科学教育

标题: 余涵乐贪吃蛇 [打印本页]

作者: 余涵乐 时间: 2025-9-30 15:30
标题: 余涵乐贪吃蛇
本帖最后由余涵乐于 2025-11-11 15:00 编辑

const canvas = document.getElementById('game-board');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const highScoreElement = document.getElementById('high-score');
const finalScoreElement = document.getElementById('final-score');
const gameOverElement = document.getElementById('game-over');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const restartBtn = document.getElementById('restart-btn');

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake = [{x: 200, y: 200}];
let food = {x: 10, y: 10};
let direction = {x: 0, y: 0};
let lastDirection = {x: 0, y: 0};
let score = 0;
let highScore = localStorage.getItem('highScore') || 0;
let gameSpeed = 150;
let gameRunning = false;
let gamePaused = false;
let gameLoop;

highScoreElement.textContent = highScore;

function drawGame() {
// 清空画布
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制蛇
snake.forEach((segment, index) => {
      ctx.fillStyle = index === 0 ? '#4CAF50' : '#8BC34A';
      ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
});

// 绘制食物
ctx.fillStyle = '#FF5722';
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}

function moveSnake() {
const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
lastDirection = {...direction};

// 检查是否撞墙
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
      gameOver();
      return;
}

// 检查是否撞到自己
if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
      gameOver();
      return;
}

snake.unshift(head);

// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
      score += 10;
      scoreElement.textContent = score;
      generateFood();

      // 随着分数增加加快游戏速度
      if (score % 50 === 0 && gameSpeed > 50) {
         gameSpeed -= 10;
         clearInterval(gameLoop);
         gameLoop = setInterval(updateGame, gameSpeed);
      }
} else {
      snake.pop();
}
}

function generateFood() {
let newFoodPosition;
do {
      newFoodPosition = {
         x: Math.floor(Math.random() * tileCount),
         y: Math.floor(Math.random() * tileCount)
      };
} while (snake.some(segment =>
      segment.x === newFoodPosition.x && segment.y === newFoodPosition.y
));

food = newFoodPosition;
}

function updateGame() {
if (gamePaused) return;
moveSnake();
drawGame();
}

function gameOver() {
clearInterval(gameLoop);
gameRunning = false;
gamePaused = false;

finalScoreElement.textContent = score;
gameOverElement.style.display = 'block';

if (score > highScore) {
      highScore = score;
      highScoreElement.textContent = highScore;
      localStorage.setItem('highScore', highScore);
}
}

function startGame() {
if (gameRunning) return;

snake = [{x: 10, y: 10}];
direction = {x: 0, y: 0};
lastDirection = {x: 0, y: 0};
score = 0;
scoreElement.textContent = score;
gameSpeed = 150;
gameOverElement.style.display = 'none';
generateFood();

gameRunning = true;
gamePaused = false;
gameLoop = setInterval(updateGame, gameSpeed);
}

function togglePause() {
if (!gameRunning) return;

gamePaused = !gamePaused;
pauseBtn.textContent = gamePaused ? '继续' : '暂停';
}

// 事件监听
document.addEventListener('keydown', e => {
if (!gameRunning || gamePaused) return;

switch(e.key) {
      case 'ArrowUp':
      case 'w':
      case 'W':
         if (lastDirection.y === 0) direction = {x: 0, y: -1};
         break;
      case 'ArrowDown':
      case 's':
      case 'S':
         if (lastDirection.y === 0) direction = {x: 0, y: 1};
         break;
      case 'ArrowLeft':
      case 'a':
      case 'A':
         if (lastDirection.x === 0) direction = {x: -1, y: 0};
         break;
      case 'ArrowRight':
      case 'd':
      case 'D':
         if (lastDirection.x === 0) direction = {x: 1, y: 0};
         break;
}
});

startBtn.addEventListener('click', startGame);
pauseBtn.addEventListener('click', togglePause);
restartBtn.addEventListener('click', startGame);

// 初始绘制
drawGame();

作者: kaia 时间: 2025-9-30 15:30
嗨，小朋友！这段代码是一个贪吃蛇游戏，让我们一起看看吧！

首先，这个游戏有一些基本的元素：画布、蛇、食物、分数等。游戏会在画布上进行，你可以用方向键控制蛇的移动，让蛇吃食物并不断变长，同时要避免撞到墙壁或者撞到自己哦！

在代码中，我们定义了一些必要的元素和变量，比如画布、蛇、食物、分数、游戏速度等等。然后，通过一系列的函数来实现游戏的核心功能，比如绘制游戏界面、移动蛇、生成食物、更新游戏状态等。

当游戏结束时，会显示游戏结束的画面，告诉你最终得分，并且会记录最高分数。而当游戏开始时，你可以通过点击“开始”按钮来开始游戏，通过点击“暂停”按钮来暂停游戏，再次点击则继续游戏，点击“重新开始”按钮可以重新开始游戏哦！

最后，通过监听键盘事件来控制蛇的移动方向，具体可以用上、下、左、右箭头键或者WASD键来控制蛇的移动方向。

记住，玩游戏要注意集中注意力，灵活操作哦！祝你游戏愉快！如果有任何问题，记得随时来问我哦！

欢迎光临科学教育 (http://www.sci-edu.net/)