1

潘芊宇

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);

kaia

好的！我来帮你把代码改成用 WASD 键控制小蛇的方向。W 是上，A 是左，S 是下，D 是右。

首先，我发现你代码里有两个地方写得不完整，我帮你补充一下：

1. 蛇的身体数组 snake 应该初始化为一个有几个方块的数组，比如：

1. let snake = [
   
2.   {x: 100, y: 100},
   
3.   {x: 80, y: 100},
   
4.   {x: 60, y: 100}
   
5. ];

复制代码

2. 在移动蛇的时候，需要用 snake[0] 表示蛇头的位置，而不是 snake.x。

3. 一些细节我要帮你修正一下，让整体流程更顺畅。

下面是修改好的代码，并且把方向键改成 WASD 控制了：

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.     // 新蛇头的位置 = 旧蛇头 + 移动距离
    
33.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    
34.    
    
35.     // 把新蛇头放到数组最前面
    
36.     snake.unshift(head);
    
37. 
    
38.     if (head.x === food.x && head.y === food.y) {
    
39.         // 吃到食物，分数增加，重新生成食物
    
40.         score++;
    
41.         generateFood();
    
42.     } else {
    
43.         // 没吃到食物，去掉蛇尾巴，让蛇保持长度
    
44.         snake.pop();
    
45.     }
    
46. }
    
47. 
    
48. function changeDirection(event) {
    
49.     const keyPressed = event.key.toLowerCase(); // 把按键转成小写
    
50.    
    
51.     // 防止蛇直接反方向撞自己，比如向右时不能直接变向左
    
52.     if ((keyPressed === 'a' || keyPressed === 'arrowleft') && dx === 0) { // 左
    
53.         dx = -gridSize;
    
54.         dy = 0;
    
55.     } else if ((keyPressed === 'w' || keyPressed === 'arrowup') && dy === 0) { // 上
    
56.         dx = 0;
    
57.         dy = -gridSize;
    
58.     } else if ((keyPressed === 'd' || keyPressed === 'arrowright') && dx === 0) { // 右
    
59.         dx = gridSize;
    
60.         dy = 0;
    
61.     } else if ((keyPressed === 's' || keyPressed === 'arrowdown') && dy === 0) { // 下
    
62.         dx = 0;
    
63.         dy = gridSize;
    
64.     }
    
65. }
    
66. 
    
67. function checkGameOver() {
    
68.     const head = snake[0];
    
69.     // 蛇头碰到边界，游戏结束
    
70.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    
71.         return true;
    
72.     }
    
73.     // 蛇头碰到自己身体，游戏结束
    
74.     for (let i = 1; i < snake.length; i++) {
    
75.         if (head.x === snake[i].x && head.y === snake[i].y) {
    
76.             return true;
    
77.         }
    
78.     }
    
79.     return false;
    
80. }
    
81. 
    
82. function gameLoop() {
    
83.     moveSnake();
    
84.     if (checkGameOver()) {
    
85.         clearInterval(game);
    
86.         alert("游戏结束！你的得分是 " + score);
    
87.         return;
    
88.     }
    
89.     drawSnake();
    
90.     drawFood();
    
91. }
    
92. 
    
93. startButton.addEventListener("click", () => {
    
94.     // 初始化蛇，蛇头在中间靠左一点
    
95.     snake = [
    
96.         {x: 100, y: 100},
    
97.         {x: 80, y: 100},
    
98.         {x: 60, y: 100}
    
99.     ];
    
100.     dx = gridSize;
     
101.     dy = 0;
     
102.     score = 0;
     
103.     generateFood();
     
104.     if (game) {
     
105.         clearInterval(game);
     
106.     }
     
107.     game = setInterval(gameLoop, 100);
     
108. });
     
109. 
     
110. document.addEventListener("keydown", changeDirection);

复制代码

### 讲解一下怎么用 WASD 控制：

- 我们监听键盘事件，检测你按的是哪个键。
- 按 W 就让蛇往上跑（dy = -gridSize），按 A 就往左跑（dx = -gridSize），按 S 往下跑（dy = gridSize），按 D 往右跑（dx = gridSize）。
- 这样小蛇就能听你的指令，用 WASD 按键跑来跑去啦！

你可以试着运行这段代码，看小蛇能否用 WASD 控制移动，吃到红色的食物，得分增加。如果碰到墙壁或者撞到自己，就会显示游戏结束。

如果你有任何问题，或者想增加功能，可以随时告诉我哦！