<!DOCTYPE html> <html> <head> <title>简易贪吃蛇</title> <style> canvas { display: block; margin: 0 auto; background: #f0f0f0; border: 1px solid #333; } body { text-align: center; font-family: Arial, sans-serif; } .score { font-size: 24px; margin: 10px; } </style> </head> <body> <h1>贪吃蛇游戏</h1> <div class="score">得分: <span id="score">0</span

存在的问题代码中 `resetGame` 函数未闭合，缺少右花括号 `}`。这会导致 JavaScript 代码语法错误，使得 `resetGame` 函数之后的代码可能无法正常解析和执行。修正后的代码 ```html <!DOCTYPE html> <html> <head> <title>简易贪吃蛇</title> <style> canvas { display: block; margin: 0 auto; background: #f0f0f0; border: 1px solid #333; } body { text-align: center; font-family: Arial, sans-serif; } .score { font-size: 24px; margin: 10px; } </style> </head> <body> <h1>贪吃蛇游戏</h1> <div class="score">得分: <span id="score">0</span></div> <canvas id="gameCanvas" width="400" height="400"></canvas> <p>使用方向键控制蛇的移动</p> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreElement = document.getElementById('score'); const gridSize = 20; const tileCount = canvas.width / gridSize; let score = 0; let gameSpeed = 100; let snake = [ {x: 10, y: 10} ]; let direction = {x: 0, y: 0}; let food = {x: 5, y: 5}; function gameLoop() { moveSnake(); if (checkCollision()) { alert('游戏结束! 得分: ' + score); resetGame(); return; } drawGame(); setTimeout(gameLoop, gameSpeed); } function moveSnake() { const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y}; // 检查是否吃到食物 if (head.x === food.x && head.y === food.y) { score++; scoreElement.textContent = score; // 增加游戏速度 if (gameSpeed > 50) { gameSpeed -= 2; } generateFood(); } else { // 没吃到食物就移除尾部 snake.pop(); } // 添加新的头部 snake.unshift(head); } function checkCollision() { const head = snake[0]; // 撞墙检测 if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) { 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 generateFood() { let validPosition = false; while (!validPosition) { food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; validPosition = true; // 确保食物不会出现在蛇身上 for (let segment of snake) { if (segment.x === food.x && segment.y === food.y) { validPosition = false; break; } } } } function drawGame() { // 清空画布 ctx.fillStyle = '#f0f0f0'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制蛇 ctx.fillStyle = 'green'; for (let segment of snake) { ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 1, gridSize - 1); } // 绘制食物 ctx.fillStyle = 'red'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 1, gridSize - 1); } function resetGame() { snake = [{x: 10, y: 10}]; direction = {x: 0, y: 0}; score = 0; scoreElement.textContent = score; gameSpeed = 100; } // 补充缺失的右花括号 // 监听键盘事件 document.addEventListener('keydown', function(event) { switch (event.key) { case 'ArrowUp': if (direction.y !== 1) { direction = {x: 0, y: -1}; } break; case 'ArrowDown': if (direction.y !== -1) { direction = {x: 0, y: 1}; } break; case 'ArrowLeft': if (direction.x !== 1) { direction = {x: -1, y: 0}; } break; case 'ArrowRight': if (direction.x !== -1) { direction = {x: 1, y: 0}; } break; } }); gameLoop(); </script> </body> </html> ``` 代码解释在原代码基础上补充了 `resetGame` 函数的右花括号，使函数定义完整。同时添加了键盘事件监听，允许玩家使用方向键控制蛇的移动。需要小心的地方我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 键盘事件监听时要防止蛇反向移动，比如蛇正在向上移动时，不能直接让它向下移动，需要进行方向判断。 2. 生成食物时要确保食物不会出现在蛇的身体上，避免出现食物和蛇重叠的情况。 3. 游戏速度的调整要注意边界，避免速度过快或过慢影响游戏体验，代码中设置了速度下限为 50。 [2025-08-12 12:58:19 | AI写代码神器 | 1472点数解答]

服务商

更多选项

快捷项

直通车