经典贪吃蛇游戏：从代码问题修复到完整逻辑实现全揭秘

代码问题分析提供的代码未完成，`const pauseBtn =` 语句没有完成赋值，后续操作无法继续。并且代码里缺少贪吃蛇游戏核心逻辑的实现，像蛇的移动、食物生成、碰撞检测等。完整代码实现 ```html <!DOCTYPE html> <html> <head> <title>经典贪吃蛇游戏</title> <style> body { display: flex; flex-direction: column; align-items: center; font-family: Arial, sans-serif; background-color: #f0f0f0; } #gameCanvas { border: 2px solid #333; background-color: #111; margin-top: 20px; } #score { font-size: 24px; margin-top: 10px; } #controls { margin-top: 20px; text-align: center; } button { padding: 10px 20px; font-size: 16px; margin: 0 10px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } button:hover { background-color: #45a049; } </style> </head> <body> <h1>经典贪吃蛇游戏</h1> <div id="score">得分: 0</div> <canvas id="gameCanvas" width="400" height="400"></canvas> <div id="controls"> <button id="startBtn">开始游戏</button> <button id="pauseBtn">暂停</button> <button id="restartBtn">重新开始</button> </div> <p>使用方向键或WASD控制蛇的移动</p> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreDisplay = document.getElementById('score'); const startBtn = document.getElementById('startBtn'); const pauseBtn = document.getElementById('pauseBtn'); const restartBtn = document.getElementById('restartBtn'); const blockSize = 20; let snake = [ { x: 10 * blockSize, y: 10 * blockSize } ]; let food = { x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize, y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize }; let direction = 'right'; let score = 0; let gameInterval; let isPaused = false; function drawBlock(x, y) { ctx.fillStyle = 'green'; ctx.fillRect(x, y, blockSize, blockSize); } function drawSnake() { snake.forEach(segment => { drawBlock(segment.x, segment.y); }); } function drawFood() { ctx.fillStyle = 'red'; ctx.fillRect(food.x, food.y, blockSize, blockSize); } function moveSnake() { let head = { ...snake[0] }; switch (direction) { case 'right': head.x += blockSize; break; case 'left': head.x -= blockSize; break; case 'up': head.y -= blockSize; break; case 'down': head.y += blockSize; break; } snake.unshift(head); if (head.x === food.x && head.y === food.y) { score++; scoreDisplay.textContent = `得分: ${score}`; food = { x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize, y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize }; } else { snake.pop(); } } function checkCollision() { let head = snake[0]; if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) { return true; } for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { return true; } } return false; } function update() { if (isPaused) return; ctx.clearRect(0, 0, canvas.width, canvas.height); drawSnake(); drawFood(); moveSnake(); if (checkCollision()) { clearInterval(gameInterval); alert('游戏结束！'); } } function startGame() { gameInterval = setInterval(update, 100); startBtn.disabled = true; pauseBtn.disabled = false; restartBtn.disabled = false; } function pauseGame() { isPaused = !isPaused; pauseBtn.textContent = isPaused ? '继续' : '暂停'; } function restartGame() { clearInterval(gameInterval); snake = [ { x: 10 * blockSize, y: 10 * blockSize } ]; food = { x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize, y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize }; direction = 'right'; score = 0; scoreDisplay.textContent = `得分: 0`; isPaused = false; pauseBtn.textContent = '暂停'; startGame(); } document.addEventListener('keydown', function (event) { switch (event.key) { case 'ArrowRight': case 'd': if (direction !== 'left') direction = 'right'; break; case 'ArrowLeft': case 'a': if (direction !== 'right') direction = 'left'; break; case 'ArrowUp': case 'w': if (direction !== 'down') direction = 'up'; break; case 'ArrowDown': case 's': if (direction !== 'up') direction = 'down'; break; } }); startBtn.addEventListener('click', startGame); pauseBtn.addEventListener('click', pauseGame); restartBtn.addEventListener('click', restartGame); </script> </body> </html> ``` 额外注意的逻辑点 1. 方向控制时要避免蛇反向移动，例如蛇向右移动时不能直接向左。 2. 食物生成位置要避免和蛇的身体重合，否则会出现食物生成在蛇身上的情况。 3. 游戏暂停和继续时，要处理好定时器的开关以及 `isPaused` 状态的切换。 ######[AI写代码神器 | 1691点数解答 | 2025-06-27 16:27:12]

服务商

更多选项

快捷项

自定义