科学教育

标题: 66666666666666666666666666666666666666666666666666666666666666666666666666666... [打印本页]

---

作者: 602胡安童    时间: 2025-12-10 15:04
标题: 66666666666666666666666666666666666666666666666666666666666666666666666666666...
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const startButton = document.getElementById("startButton");

const gridSize = 20;
let snake = [{x: 200, y: 200}];\\1
let food = {x: 0, y: 0};
let dx = gridSize;
let dy = 0;
let score = 0;

\\....2
function drawSnake() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(part => {
        context.fillStyle = "green";
        context.fillRect(part.x, part.y, gridSize, gridSize);
    });
}

function generateFood() {
    food.x = Math.floor(Math.random() * canvas.width / gridSize) * gridSize;
    food.y = Math.floor(Math.random() * canvas.height / gridSize) * gridSize;
}

function drawFood() {
    context.fillStyle = "red";
    context.fillRect(food.x, food.y, gridSize, gridSize);
}

function moveSnake() {
    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        score++;
        generateFood();
    } else {
        snake.pop();
    }
}

function changeDirection(event) {
    const keyPressed = event.keyCode;
    if (keyPressed === 37 && dx === 0) {
        dx = -gridSize;
        dy = 0;
    }
    if (keyPressed === 38 && dy === 0) {
        dx = 0;
        dy = -gridSize;
    }
    if (keyPressed === 39 && dx === 0) {
        dx = gridSize;
        dy = 0;
    }
    if (keyPressed === 40 && dy === 0) {
        dx = 0;
        dy = gridSize;
    }
}

function gameLoop() {
    moveSnake();
    drawSnake();
    drawFood();
    if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
        clearInterval(game);
        alert("Game Over! Your score is " + score);
    }
}

startButton.addEventListener("click", () => {
    snake = [{x: 200, y: 200}];
    dx = gridSize;
    dy = 0;
    score = 0;
    generateFood();
    game = setInterval(gameLoop, 100);
});

document.addEventListener("keydown", changeDirection);
帮我修改这段js带码

---

作者: kaia    时间: 2025-12-10 15:04
好的，我来帮你修改这段贪吃蛇游戏的代码，让它能正常运行哦！我会一步步解释哪里有问题，怎么改正，让你更容易理解。

---

### 你的代码中主要问题：

1. `snake` 是贪吃蛇身体的位置数组，但你没给它赋初始值，写成了 `let snake = ;\\1`，这里应该是一个数组，里面有蛇头的坐标，比如：`[{x: 0, y: 0}]`。

2. 在 `moveSnake()` 函数中，你写 `const head = {x: snake.x + dx, y: snake.y + dy};`，但是 `snake` 是数组，应该是用 `snake[0].x` 代表蛇头的 x 坐标。

3. 在 `gameLoop()` 函数中检查边界时用的也是 `snake.x`，也要用 `snake[0].x`。

4. `startButton` 事件里，给 `snake` 赋值还是空的，应该初始化为一个有长度1的数组。

---

### 修改后的代码：

1. const canvas = document.getElementById("gameCanvas");
   
2. const context = canvas.getContext("2d");
   
3. const startButton = document.getElementById("startButton");
   
4. 
   
5. const gridSize = 20;
   
6. let snake = [];
   
7. let food = { x: 0, y: 0 };
   
8. let dx = gridSize;
   
9. let dy = 0;
   
10. let score = 0;
    
11. let game; // 保存定时器
    
12. 
    
13. function drawSnake() {
    
14.     context.clearRect(0, 0, canvas.width, canvas.height);
    
15.     snake.forEach(part => {
    
16.         context.fillStyle = "green";
    
17.         context.fillRect(part.x, part.y, gridSize, gridSize);
    
18.     });
    
19. }
    
20. 
    
21. function generateFood() {
    
22.     food.x = Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
    
23.     food.y = Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize;
    
24. }
    
25. 
    
26. function drawFood() {
    
27.     context.fillStyle = "red";
    
28.     context.fillRect(food.x, food.y, gridSize, gridSize);
    
29. }
    
30. 
    
31. function moveSnake() {
    
32.     // 蛇头坐标是snake[0]，新蛇头位置是它加上移动方向dx/dy
    
33.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    
34.     snake.unshift(head); // 把新蛇头放到最前面
    
35. 
    
36.     // 如果蛇头吃到食物，分数+1，重新生成食物，不删尾巴（蛇变长）
    
37.     if (head.x === food.x && head.y === food.y) {
    
38.         score++;
    
39.         generateFood();
    
40.     } else {
    
41.         snake.pop(); // 移除尾巴，实现蛇移动
    
42.     }
    
43. }
    
44. 
    
45. function changeDirection(event) {
    
46.     const keyPressed = event.keyCode;
    
47. 
    
48.     if (keyPressed === 37 && dx === 0) { // 左方向键
    
49.         dx = -gridSize;
    
50.         dy = 0;
    
51.     }
    
52. 
    
53.     if (keyPressed === 38 && dy === 0) { // 上方向键
    
54.         dx = 0;
    
55.         dy = -gridSize;
    
56.     }
    
57. 
    
58.     if (keyPressed === 39 && dx === 0) { // 右方向键
    
59.         dx = gridSize;
    
60.         dy = 0;
    
61.     }
    
62. 
    
63.     if (keyPressed === 40 && dy === 0) { // 下方向键
    
64.         dx = 0;
    
65.         dy = gridSize;
    
66.     }
    
67. }
    
68. 
    
69. function gameLoop() {
    
70.     moveSnake();
    
71.     // 检查蛇有没有撞墙，蛇头是snake[0]
    
72.     if (
    
73.         snake[0].x < 0 ||
    
74.         snake[0].x >= canvas.width ||
    
75.         snake[0].y < 0 ||
    
76.         snake[0].y >= canvas.height
    
77.     ) {
    
78.         clearInterval(game);
    
79.         alert("Game Over! Your score is " + score);
    
80.         return; // 游戏结束停止执行后续代码
    
81.     }
    
82. 
    
83.     drawSnake();
    
84.     drawFood();
    
85. }
    
86. 
    
87. startButton.addEventListener("click", () => {
    
88.     snake = [{ x: 0, y: 0 }]; // 初始化蛇的位置，从左上角开始
    
89.     dx = gridSize;
    
90.     dy = 0;
    
91.     score = 0;
    
92.     generateFood();
    
93. 
    
94.     if (game) {
    
95.         clearInterval(game); // 如果之前有游戏在运行，先清除
    
96.     }
    
97.     game = setInterval(gameLoop, 100);
    
98. });
    
99. 
    
100. document.addEventListener("keydown", changeDirection);

复制代码

---

### 小结：

- 蛇身体是数组，保存每个方块的坐标。
- 蛇头总是在数组第一个元素（`snake[0]`），用它来计算移动。
- 用 `unshift` 往前添加新的头部，`pop` 移除尾部，这样蛇才会动起来。
- 按键改变 `dx` 和 `dy`，控制蛇的方向。
- 游戏循环调用移动和绘制函数，并检测游戏结束条件。

你可以试试看这个代码，应该能动起来了。有什么不懂的随时问我哦！????

---

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

Powered by Discuz! X3.2