Make a game that a ball gets out of the 260 rings outside a ring

components/ring-game.js

@@ -0,0 +1,197 @@
+class RingGame extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+        canvas {
+          display: block;
+          background: #1a1a2e;
+        }
+      </style>
+      <canvas></canvas>
+    `;
+
+    this.canvas = this.shadowRoot.querySelector('canvas');
+    this.ctx = this.canvas.getContext('2d');
+    this.resizeCanvas();
+    window.addEventListener('resize', () => this.resizeCanvas());
+
+    this.setupGame();
+    this.gameLoop();
+  }
+
+  resizeCanvas() {
+    this.canvas.width = this.clientWidth;
+    this.canvas.height = this.clientHeight;
+    this.center = {
+      x: this.canvas.width / 2,
+      y: this.canvas.height / 2
+    };
+    this.maxRadius = Math.min(this.canvas.width, this.canvas.height) * 0.45;
+  }
+
+  setupGame() {
+    this.rings = [];
+    this.ball = {
+      x: 0,
+      y: 0,
+      radius: 10,
+      speed: 2,
+      angle: Math.random() * Math.PI * 2,
+      color: '#ff6b6b'
+    };
+
+    // Create 260 concentric rings
+    for (let i = 0; i < 260; i++) {
+      const radius = this.maxRadius * (1 - i/260);
+      this.rings.push({
+        radius: radius,
+        color: i % 2 === 0 ? '#3a3a5e' : '#2a2a4e',
+        thickness: 2
+      });
+    }
+
+    // Start ball at center
+    this.ball.x = this.center.x;
+    this.ball.y = this.center.y;
+    this.currentRing = this.rings.length - 1;
+    this.gameOver = false;
+    this.score = 0;
+  }
+
+  gameLoop() {
+    if (this.gameOver) return;
+
+    this.update();
+    this.draw();
+
+    requestAnimationFrame(() => this.gameLoop());
+  }
+
+  update() {
+    // Move ball
+    this.ball.x += Math.cos(this.ball.angle) * this.ball.speed;
+    this.ball.y += Math.sin(this.ball.angle) * this.ball.speed;
+
+    // Check collision with current ring
+    const ring = this.rings[this.currentRing];
+    const distance = Math.sqrt(
+      Math.pow(this.ball.x - this.center.x, 2) + 
+      Math.pow(this.ball.y - this.center.y, 2)
+    );
+
+    if (distance + this.ball.radius > ring.radius) {
+      // Bounce off ring
+      this.ball.angle = Math.atan2(
+        this.ball.y - this.center.y,
+        this.ball.x - this.center.x
+      );
+      this.score++;
+      
+      // Move to next outer ring
+      if (this.currentRing > 0) {
+        this.currentRing--;
+      } else {
+        // Escaped all rings!
+        this.gameOver = true;
+        this.showGameOver(true);
+      }
+    }
+
+    // Check if ball escaped the game area
+    if (
+      this.ball.x < -this.ball.radius || 
+      this.ball.x > this.canvas.width + this.ball.radius ||
+      this.ball.y < -this.ball.radius || 
+      this.ball.y > this.canvas.height + this.ball.radius
+    ) {
+      this.gameOver = true;
+      this.showGameOver(false);
+    }
+  }
+
+  draw() {
+    // Clear canvas
+    this.ctx.fillStyle = '#1a1a2e';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+    // Draw rings
+    this.rings.forEach((ring, i) => {
+      if (i <= this.currentRing) {
+        this.ctx.beginPath();
+        this.ctx.arc(
+          this.center.x, 
+          this.center.y, 
+          ring.radius, 
+          0, 
+          Math.PI * 2
+        );
+        this.ctx.strokeStyle = ring.color;
+        this.ctx.lineWidth = ring.thickness;
+        this.ctx.stroke();
+      }
+    });
+
+    // Draw ball
+    this.ctx.fillStyle = this.ball.color;
+    this.ctx.beginPath();
+    this.ctx.arc(
+      this.ball.x, 
+      this.ball.y, 
+      this.ball.radius, 
+      0, 
+      Math.PI * 2
+    );
+    this.ctx.fill();
+
+    // Draw score
+    this.ctx.fillStyle = '#ffffff';
+    this.ctx.font = '16px "Press Start 2P", cursive';
+    this.ctx.textAlign = 'left';
+    this.ctx.fillText(`Rings left: ${this.currentRing + 1}`, 20, 30);
+  }
+
+  showGameOver(success) {
+    const gameOverDiv = document.createElement('div');
+    gameOverDiv.style.position = 'absolute';
+    gameOverDiv.style.top = '50%';
+    gameOverDiv.style.left = '50%';
+    gameOverDiv.style.transform = 'translate(-50%, -50%)';
+    gameOverDiv.style.backgroundColor = 'rgba(26, 26, 46, 0.9)';
+    gameOverDiv.style.padding = '2rem';
+    gameOverDiv.style.borderRadius = '8px';
+    gameOverDiv.style.textAlign = 'center';
+    gameOverDiv.style.color = 'white';
+    gameOverDiv.style.fontFamily = '"Press Start 2P", cursive';
+    gameOverDiv.style.zIndex = '100';
+
+    gameOverDiv.innerHTML = `
+      <h2>${success ? 'ESCAPED!' : 'GAME OVER'}</h2>
+      <p>You passed ${this.score} rings</p>
+      <button id="restart-btn" style="
+        background: #ff6b6b;
+        color: white;
+        border: none;
+        padding: 0.5rem 1rem;
+        margin-top: 1rem;
+        font-family: inherit;
+        cursor: pointer;
+      ">Play Again</button>
+    `;
+
+    this.shadowRoot.appendChild(gameOverDiv);
+    
+    gameOverDiv.querySelector('#restart-btn').addEventListener('click', () => {
+      this.shadowRoot.removeChild(gameOverDiv);
+      this.setupGame();
+      this.gameLoop();
+    });
+  }
+}
+
+customElements.define('ring-game', RingGame);

index.html

@@ -16,14 +16,9 @@
 <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>
+        <ring-game></ring-game>
     </div>
-    <section id="about-preview" class="info-section">
+<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>

script.js

@@ -2,174 +2,4 @@
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize Feather Icons
     feather.replace();
-    
-    const canvas = document.getElementById('gameCanvas');
-    const ctx = canvas.getContext('2d');
-    
-    // Set canvas size
-    function resizeCanvas() {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-    }
-    window.addEventListener('resize', resizeCanvas);
-    resizeCanvas();
-    
-    // Game variables
-    const gridSize = 20;
-    const tileCount = Math.floor(canvas.width / gridSize);
-    let speed = 7;
-    let score = 0;
-    let gameRunning = false;
-    // Worm
-    let worm = [];
-    worm[0] = {
-        x: Math.floor(tileCount/2) * gridSize, 
-        y: Math.floor(tileCount/2) * gridSize
-    };
-    
-    // Food
-    let food = {
-        x: Math.floor(Math.random() * tileCount) * gridSize,
-        y: Math.floor(Math.random() * tileCount) * gridSize,
-        color: getRandomColor()
-    };
-    
-    // Direction
-let xVelocity = 0;
-    let yVelocity = 0;
-    
-    // Game loop
-    function gameLoop() {
-        // Clear canvas
-        ctx.fillStyle = '#f0fdf4';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        
-        // Move worm
-        let head = {x: worm[0].x + xVelocity, y: worm[0].y + yVelocity};
-        worm.unshift(head);
-        
-        // Check if worm eats food
-        if(head.x === food.x && head.y === food.y) {
-            score++;
-            food = {
-                x: Math.floor(Math.random() * tileCount) * gridSize,
-                y: Math.floor(Math.random() * tileCount) * gridSize,
-                color: getRandomColor()
-            };
-        } else {
-            worm.pop();
-        }
-        
-        // Draw worm
-        for(let i = 0; i < worm.length; i++) {
-            ctx.fillStyle = i === 0 ? '#22c55e' : '#4ade80';
-            ctx.beginPath();
-            ctx.arc(worm[i].x + gridSize/2, worm[i].y + gridSize/2, gridSize/2, 0, Math.PI*2);
-            ctx.fill();
-            
-            // Add eyes to head
-            if(i === 0) {
-                ctx.fillStyle = 'white';
-                ctx.beginPath();
-                ctx.arc(worm[i].x + gridSize/3, worm[i].y + gridSize/3, gridSize/8, 0, Math.PI*2);
-                ctx.arc(worm[i].x + 2*gridSize/3, worm[i].y + gridSize/3, gridSize/8, 0, Math.PI*2);
-                ctx.fill();
-                
-                ctx.fillStyle = 'black';
-                ctx.beginPath();
-                ctx.arc(worm[i].x + gridSize/3, worm[i].y + gridSize/3, gridSize/12, 0, Math.PI*2);
-                ctx.arc(worm[i].x + 2*gridSize/3, worm[i].y + gridSize/3, gridSize/12, 0, Math.PI*2);
-                ctx.fill();
-            }
-        }
-        
-        // Draw food
-        ctx.fillStyle = food.color;
-        ctx.beginPath();
-        ctx.arc(food.x + gridSize/2, food.y + gridSize/2, gridSize/2, 0, Math.PI*2);
-        ctx.fill();
-        
-        // Check collision with walls
-        if(head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
-            gameOver();
-        }
-        
-        // Check collision with self
-        for(let i = 1; i < worm.length; i++) {
-            if(head.x === worm[i].x && head.y === worm[i].y) {
-                gameOver();
-            }
-        }
-    }
-    
-    // Game controls
-    document.addEventListener('keydown', (e) => {
-        // Prevent reverse direction
-        switch(e.key) {
-            case 'ArrowUp':
-                if(yVelocity === 0) {
-                    xVelocity = 0;
-                    yVelocity = -gridSize;
-                }
-                break;
-            case 'ArrowDown':
-                if(yVelocity === 0) {
-                    xVelocity = 0;
-                    yVelocity = gridSize;
-                }
-                break;
-            case 'ArrowLeft':
-                if(xVelocity === 0) {
-                    xVelocity = -gridSize;
-                    yVelocity = 0;
-                }
-                break;
-            case 'ArrowRight':
-                if(xVelocity === 0) {
-                    xVelocity = gridSize;
-                    yVelocity = 0;
-                }
-                break;
-        }
-    });
-    
-    // Game over function
-    function gameOver() {
-        clearInterval(gameInterval);
-        
-        // Show game over screen
-        const gameOverDiv = document.createElement('div');
-        gameOverDiv.className = 'game-over';
-        gameOverDiv.innerHTML = `
-            <h2 class="text-4xl font-bold text-white mb-4">Game Over!</h2>
-            <p class="text-2xl text-white mb-6">Your score: ${score}</p>
-            <button onclick="location.reload()" class="game-button text-xl">
-                Play Again <i data-feather="refresh-cw" class="ml-2"></i>
-            </button>
-        `;
-        canvas.parentElement.appendChild(gameOverDiv);
-        feather.replace();
-    }
-    
-    // Random color generator for food
-    function getRandomColor() {
-        const colors = [
-            '#ef4444', '#f97316', '#f59e0b', '#10b981', 
-            '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899'
-        ];
-        return colors[Math.floor(Math.random() * colors.length)];
-    }
-    // Start game when play button clicked
-    document.getElementById('play-btn').addEventListener('click', () => {
-        if (!gameRunning) {
-            gameRunning = true;
-            document.getElementById('play-btn').style.display = 'none';
-            setInterval(gameLoop, 1000/speed);
-        }
-    });
-// Responsive canvas
-    window.addEventListener('resize', () => {
-        canvas.width = canvas.parentElement.clientWidth;
-        canvas.height = canvas.parentElement.clientHeight;
-    });
-});
+});

style.css

@@ -67,6 +67,7 @@ body {
     flex: 1;
     position: relative;
     width: 100%;
+    height: 100vh;
     overflow: hidden;
 }
 =======