Spaces:

dannyboy84
/

wormate-io-clone

Running

App Files Files Community

dannyboy84 commited on Oct 31

Commit

dc42002

verified ·

1 Parent(s): b7bb800

ok for some reason your not working can you fix this, please test the game when you finish

Browse files

Files changed (3) hide show

index.html +6 -6
script.js +305 -1
style.css +72 -0

index.html CHANGED Viewed

@@ -16,13 +16,13 @@
 <body>
     <wormate-nav></wormate-nav>
     <div id="game-container">
-        <ring-game></ring-game>
     </div>
-<section id="about-preview" class="info-section">
-        <h2>About the Game</h2>
-        <p>Grow your worm, compete with others, and dominate the leaderboard!</p>
-        <a href="about.html" class="info-link">Learn More →</a>
-    </section>
 <game-footer></game-footer>
     <script src="script.js"></script>
 </body>

 <body>
     <wormate-nav></wormate-nav>
     <div id="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <div id="game-ui">
+            <div id="score-display">Score: 0</div>
+            <div id="leaderboard"></div>
+            <button id="play-btn" class="wormate-btn">PLAY</button>
+        </div>
     </div>
 <game-footer></game-footer>
     <script src="script.js"></script>
 </body>

script.js CHANGED Viewed

@@ -1,5 +1,309 @@
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize Feather Icons
-    feather.replace();
 });

+// Game initialization
 document.addEventListener('DOMContentLoaded', () => {
+    // Initialize game
+    const game = new WormateGame();
+    game.init();
     // Initialize Feather Icons
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
 });
+class WormateGame {
+    constructor() {
+        this.canvas = document.getElementById('gameCanvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.scoreDisplay = document.getElementById('score-display');
+        this.leaderboard = document.getElementById('leaderboard');
+        this.playBtn = document.getElementById('play-btn');
+        this.gameStarted = false;
+        this.playerId = null;
+        this.players = {};
+        this.foods = [];
+        this.powerUps = [];
+        this.score = 0;
+        this.keys = {
+            ArrowUp: false,
+            ArrowDown: false,
+            ArrowLeft: false,
+            ArrowRight: false
+        };
+    }
+    init() {
+        this.resizeCanvas();
+        window.addEventListener('resize', () => this.resizeCanvas());
+        // Keyboard controls
+        window.addEventListener('keydown', (e) => {
+            if (this.keys.hasOwnProperty(e.key)) {
+                this.keys[e.key] = true;
+                e.preventDefault();
+            }
+        });
+        window.addEventListener('keyup', (e) => {
+            if (this.keys.hasOwnProperty(e.key)) {
+                this.keys[e.key] = false;
+                e.preventDefault();
+            }
+        });
+        // Start game button
+        this.playBtn.addEventListener('click', () => this.startGame());
+        // Start game loop
+        this.gameLoop();
+    }
+    resizeCanvas() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+    startGame() {
+        const playerName = prompt('Enter your name:', 'Player' + Math.floor(Math.random() * 1000));
+        if (playerName) {
+            this.playerId = 'local-' + Date.now();
+            this.players[this.playerId] = {
+                id: this.playerId,
+                name: playerName,
+                color: this.getRandomColor(),
+                score: 0,
+                segments: [
+                    { x: this.canvas.width/2, y: this.canvas.height/2, radius: 15 },
+                    { x: this.canvas.width/2 - 20, y: this.canvas.height/2, radius: 14 },
+                    { x: this.canvas.width/2 - 40, y: this.canvas.height/2, radius: 13 }
+                ]
+            };
+            // Generate initial food
+            for (let i = 0; i < 50; i++) {
+                this.foods.push({
+                    x: Math.random() * this.canvas.width,
+                    y: Math.random() * this.canvas.height,
+                    radius: 8 + Math.random() * 4,
+                    color: this.getRandomColor()
+                });
+            }
+            this.gameStarted = true;
+            this.playBtn.style.display = 'none';
+        }
+    }
+    gameLoop() {
+        if (this.gameStarted) {
+            this.update();
+            this.render();
+        }
+        requestAnimationFrame(() => this.gameLoop());
+    }
+    update() {
+        // Move player worm
+        const player = this.players[this.playerId];
+        if (!player) return;
+        const head = player.segments[0];
+        let newX = head.x;
+        let newY = head.y;
+        if (this.keys.ArrowUp) newY -= 5;
+        if (this.keys.ArrowDown) newY += 5;
+        if (this.keys.ArrowLeft) newX -= 5;
+        if (this.keys.ArrowRight) newX += 5;
+        // Add new head position
+        player.segments.unshift({
+            x: newX,
+            y: newY,
+            radius: head.radius
+        });
+        // Remove tail segment
+        player.segments.pop();
+        // Check food collision
+        this.foods = this.foods.filter(food => {
+            const distance = Math.sqrt(
+                Math.pow(head.x - food.x, 2) +
+                Math.pow(head.y - food.y, 2)
+            );
+            if (distance < head.radius + food.radius) {
+                // Eat food - grow worm
+                const tail = player.segments[player.segments.length - 1];
+                for (let i = 0; i < 5; i++) {
+                    player.segments.push({
+                        x: tail.x,
+                        y: tail.y,
+                        radius: tail.radius * 0.95
+                    });
+                }
+                player.score += Math.floor(food.radius);
+                this.score = player.score;
+                this.scoreDisplay.textContent = `Score: ${this.score}`;
+                return false; // Remove food
+            }
+            return true; // Keep food
+        });
+        // Add new food if needed
+        if (this.foods.length < 30 && Math.random() < 0.1) {
+            this.foods.push({
+                x: Math.random() * this.canvas.width,
+                y: Math.random() * this.canvas.height,
+                radius: 8 + Math.random() * 4,
+                color: this.getRandomColor()
+            });
+        }
+        // Check wall collision
+        if (
+            head.x < -head.radius ||
+            head.x > this.canvas.width + head.radius ||
+            head.y < -head.radius ||
+            head.y > this.canvas.height + head.radius
+        ) {
+            this.gameOver();
+        }
+        // Update leaderboard
+        this.updateLeaderboard();
+    }
+    render() {
+        // Clear canvas
+        this.ctx.fillStyle = '#1a1a2e';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        // Draw foods
+        this.foods.forEach(food => {
+            this.ctx.fillStyle = food.color;
+            this.ctx.beginPath();
+            this.ctx.arc(food.x, food.y, food.radius, 0, Math.PI * 2);
+            this.ctx.fill();
+        });
+        // Draw players
+        Object.values(this.players).forEach(player => {
+            // Draw worm segments
+            player.segments.forEach((segment, i) => {
+                const gradient = this.ctx.createRadialGradient(
+                    segment.x, segment.y, 0,
+                    segment.x, segment.y, segment.radius
+                );
+                gradient.addColorStop(0, player.color);
+                gradient.addColorStop(1, this.darkenColor(player.color, 0.3));
+                this.ctx.fillStyle = gradient;
+                this.ctx.beginPath();
+                this.ctx.arc(segment.x, segment.y, segment.radius, 0, Math.PI * 2);
+                this.ctx.fill();
+                // Draw eyes on head
+                if (i === 0 && player.segments.length > 1) {
+                    const angle = Math.atan2(
+                        player.segments[1].y - segment.y,
+                        player.segments[1].x - segment.x
+                    );
+                    const eyeRadius = segment.radius * 0.3;
+                    const eyeOffset = segment.radius * 0.6;
+                    // Eyes
+                    this.ctx.fillStyle = 'white';
+                    this.ctx.beginPath();
+                    this.ctx.arc(
+                        segment.x + Math.cos(angle + Math.PI/2) * eyeOffset,
+                        segment.y + Math.sin(angle + Math.PI/2) * eyeOffset,
+                        eyeRadius, 0, Math.PI * 2
+                    );
+                    this.ctx.fill();
+                    this.ctx.beginPath();
+                    this.ctx.arc(
+                        segment.x + Math.cos(angle - Math.PI/2) * eyeOffset,
+                        segment.y + Math.sin(angle - Math.PI/2) * eyeOffset,
+                        eyeRadius, 0, Math.PI * 2
+                    );
+                    this.ctx.fill();
+                    // Pupils
+                    this.ctx.fillStyle = 'black';
+                    this.ctx.beginPath();
+                    this.ctx.arc(
+                        segment.x + Math.cos(angle + Math.PI/2) * eyeOffset + Math.cos(angle) * eyeRadius/2,
+                        segment.y + Math.sin(angle + Math.PI/2) * eyeOffset + Math.sin(angle) * eyeRadius/2,
+                        eyeRadius/2, 0, Math.PI * 2
+                    );
+                    this.ctx.fill();
+                    this.ctx.beginPath();
+                    this.ctx.arc(
+                        segment.x + Math.cos(angle - Math.PI/2) * eyeOffset + Math.cos(angle) * eyeRadius/2,
+                        segment.y + Math.sin(angle - Math.PI/2) * eyeOffset + Math.sin(angle) * eyeRadius/2,
+                        eyeRadius/2, 0, Math.PI * 2
+                    );
+                    this.ctx.fill();
+                }
+            });
+            // Draw player name
+            if (player.segments.length > 0) {
+                const head = player.segments[0];
+                this.ctx.fillStyle = 'white';
+                this.ctx.font = '12px "Press Start 2P", cursive';
+                this.ctx.textAlign = 'center';
+                this.ctx.fillText(player.name, head.x, head.y - head.radius - 10);
+            }
+        });
+    }
+    updateLeaderboard() {
+        const sortedPlayers = Object.values(this.players).sort((a, b) => b.score - a.score);
+        this.leaderboard.innerHTML = '<h3>Leaderboard</h3>' +
+            sortedPlayers.map(p =>
+                `<div class="player-row ${p.id === this.playerId ? 'you' : ''}">
+                    <span class="player-name">${p.name}</span>
+                    <span class="player-score">${p.score}</span>
+                </div>`
+            ).join('');
+    }
+    gameOver() {
+        alert(`Game Over! Your score: ${this.score}`);
+        this.gameStarted = false;
+        this.playBtn.style.display = 'block';
+        this.players = {};
+        this.foods = [];
+        this.score = 0;
+        this.scoreDisplay.textContent = `Score: 0`;
+    }
+    getRandomColor() {
+        const colors = [
+            '#FF5252', '#FF4081', '#E040FB', '#7C4DFF',
+            '#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
+            '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41',
+            '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'
+        ];
+        return colors[Math.floor(Math.random() * colors.length)];
+    }
+    darkenColor(color, amount) {
+        let r = parseInt(color.substr(1, 2), 16);
+        let g = parseInt(color.substr(3, 2), 16);
+        let b = parseInt(color.substr(5, 2), 16);
+        r = Math.max(0, Math.floor(r * (1 - amount)));
+        g = Math.max(0, Math.floor(g * (1 - amount)));
+        b = Math.max(0, Math.floor(b * (1 - amount)));
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    }
+}

style.css CHANGED Viewed

@@ -69,6 +69,78 @@ body {
     width: 100%;
     height: 100vh;
     overflow: hidden;
 }
 =======
 #gameCanvas {

     width: 100%;
     height: 100vh;
     overflow: hidden;
+    background: #1a1a2e;
+}
+#gameCanvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+#game-ui {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 1rem;
+    pointer-events: none;
+    z-index: 10;
+}
+#score-display {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    color: #ff6b6b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+#leaderboard {
+    background: rgba(26, 26, 46, 0.8);
+    padding: 1rem;
+    border-radius: 5px;
+    max-width: 200px;
+    font-size: 0.8rem;
+}
+#leaderboard h3 {
+    margin: 0 0 0.5rem 0;
+    color: #ff6b6b;
+    font-size: 0.9rem;
+}
+.player-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.3rem;
+}
+.player-row.you {
+    color: #69f0ae;
+    font-weight: bold;
+}
+.wormate-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 1rem 2rem;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 1rem;
+    background: #ff6b6b;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    pointer-events: auto;
+    transition: all 0.3s;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    z-index: 20;
+}
+.wormate-btn:hover {
+    background: #ff5252;
+    transform: translate(-50%, -50%) scale(1.05);
 }
 =======
 #gameCanvas {