AI 生成: A classic Snake game built with HTML, CSS, and JavaScript. Control the snake to eat food, grow longer, and avoid hitting walls or yourself.

js/game.js

@@ -0,0 +1,177 @@
+// Snake Game Logic
+(function () {
+  'use strict';
+
+  const canvas = document.getElementById('gameCanvas');
+  const ctx = canvas.getContext('2d');
+  const scoreEl = document.getElementById('score');
+  const highScoreEl = document.getElementById('high-score');
+  const restartBtn = document.getElementById('restartBtn');
+
+  const GRID_SIZE = 20;          // size of each cell in pixels
+  const COLS = canvas.width / GRID_SIZE;
+  const ROWS = canvas.height / GRID_SIZE;
+
+  let snake, direction, nextDirection, food, score, highScore, gameOver, gameLoop;
+
+  highScore = Number(localStorage.getItem('snakeHighScore')) || 0;
+  highScoreEl.textContent = highScore;
+
+  // Initialize a new game state
+  function init() {
+    snake = [
+      { x: 10, y: 10 },
+      { x: 9, y: 10 },
+      { x: 8, y: 10 }
+    ];
+    direction = { x: 1, y: 0 };
+    nextDirection = { x: 1, y: 0 };
+    score = 0;
+    gameOver = false;
+    scoreEl.textContent = score;
+    placeFood();
+
+    if (gameLoop) clearInterval(gameLoop);
+    gameLoop = setInterval(update, 100);
+  }
+
+  // Place food at a random empty cell
+  function placeFood() {
+    let newFood;
+    do {
+      newFood = {
+        x: Math.floor(Math.random() * COLS),
+        y: Math.floor(Math.random() * ROWS)
+      };
+    } while (snake.some(seg => seg.x === newFood.x && seg.y === newFood.y));
+    food = newFood;
+  }
+
+  // Update game state each tick
+  function update() {
+    if (gameOver) return;
+
+    direction = nextDirection;
+
+    const head = {
+      x: snake[0].x + direction.x,
+      y: snake[0].y + direction.y
+    };
+
+    // Wall collision
+    if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) {
+      return endGame();
+    }
+
+    // Self collision
+    if (snake.some(seg => seg.x === head.x && seg.y === head.y)) {
+      return endGame();
+    }
+
+    snake.unshift(head);
+
+    // Eat food
+    if (head.x === food.x && head.y === food.y) {
+      score += 10;
+      scoreEl.textContent = score;
+      if (score > highScore) {
+        highScore = score;
+        highScoreEl.textContent = highScore;
+        localStorage.setItem('snakeHighScore', highScore);
+      }
+      placeFood();
+    } else {
+      snake.pop();
+    }
+
+    draw();
+  }
+
+  // Draw everything on the canvas
+  function draw() {
+    // Background
+    ctx.fillStyle = '#16213e';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Grid lines (subtle)
+    ctx.strokeStyle = 'rgba(78, 204, 163, 0.08)';
+    for (let i = 1; i < COLS; i++) {
+      ctx.beginPath();
+      ctx.moveTo(i * GRID_SIZE, 0);
+      ctx.lineTo(i * GRID_SIZE, canvas.height);
+      ctx.stroke();
+    }
+    for (let j = 1; j < ROWS; j++) {
+      ctx.beginPath();
+      ctx.moveTo(0, j * GRID_SIZE);
+      ctx.lineTo(canvas.width, j * GRID_SIZE);
+      ctx.stroke();
+    }
+
+    // Food
+    ctx.fillStyle = '#e94560';
+    ctx.beginPath();
+    ctx.arc(
+      food.x * GRID_SIZE + GRID_SIZE / 2,
+      food.y * GRID_SIZE + GRID_SIZE / 2,
+      GRID_SIZE / 2 - 2,
+      0,
+      Math.PI * 2
+    );
+    ctx.fill();
+
+    // Snake
+    snake.forEach((seg, i) => {
+      ctx.fillStyle = i === 0 ? '#4ecca3' : '#3aa886';
+      ctx.fillRect(
+        seg.x * GRID_SIZE + 1,
+        seg.y * GRID_SIZE + 1,
+        GRID_SIZE - 2,
+        GRID_SIZE - 2
+      );
+    });
+
+    // Game over overlay
+    if (gameOver) {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#e94560';
+      ctx.font = 'bold 32px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2 - 10);
+      ctx.fillStyle = '#eee';
+      ctx.font = '18px sans-serif';
+      ctx.fillText('Press Restart to play again', canvas.width / 2, canvas.height / 2 + 30);
+    }
+  }
+
+  // End the game
+  function endGame() {
+    gameOver = true;
+    clearInterval(gameLoop);
+    draw();
+  }
+
+  // Keyboard controls
+  document.addEventListener('keydown', (e) => {
+    const key = e.key.toLowerCase();
+    let newDir = null;
+
+    if (key === 'arrowup' || key === 'w') newDir = { x: 0, y: -1 };
+    else if (key === 'arrowdown' || key === 's') newDir = { x: 0, y: 1 };
+    else if (key === 'arrowleft' || key === 'a') newDir = { x: -1, y: 0 };
+    else if (key === 'arrowright' || key === 'd') newDir = { x: 1, y: 0 };
+
+    if (!newDir) return;
+    e.preventDefault();
+
+    // Prevent reversing direction
+    if (newDir.x === -direction.x && newDir.y === -direction.y) return;
+    nextDirection = newDir;
+  });
+
+  restartBtn.addEventListener('click', init);
+
+  // Start the game
+  init();
+})();