帮我在js的基础上用wasd修改

潘芊宇

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

kaia

你好！我看到你做的是一个贪吃蛇小游戏，用JavaScript在网页上画图和控制蛇的移动。你想用WASD键来控制方向，我帮你改一下代码，顺便给你讲讲怎么做的~

主要思路是：

- 把监听按键的代码里，判断方向的键改成W、A、S、D这4个字母对应的键码。
- 方向不能直接反向，比如往左的时候不能马上按右，这样蛇不会自己撞到自己。

我帮你改好了，下面看修改的地方：

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 = []; // 蛇身体的位置数组，里面每个元素是{x, y}
   
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.     const head = {x: snake[0].x + dx, y: snake[0].y + dy}; // 新的蛇头位置
    
33.     // 检查是否撞墙
    
34.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    
35.         clearInterval(game);
    
36.         alert("Game Over! Your score is " + score);
    
37.         return;
    
38.     }
    
39.     // 检查是否撞自己
    
40.     for (let part of snake) {
    
41.         if (part.x === head.x && part.y === head.y) {
    
42.             clearInterval(game);
    
43.             alert("Game Over! Your score is " + score);
    
44.             return;
    
45.         }
    
46.     }
    
47.     snake.unshift(head); // 把新头加到蛇的前面
    
48. 
    
49.     if (head.x === food.x && head.y === food.y) {
    
50.         score++;
    
51.         generateFood();
    
52.     } else {
    
53.         snake.pop(); // 如果没吃到食物，去掉尾巴，让蛇长度不变
    
54.     }
    
55. }
    
56. 
    
57. function changeDirection(event) {
    
58.     const keyPressed = event.key.toLowerCase(); // 获取按键字符，转换成小写方便判断
    
59. 
    
60.     // 不能让蛇直接往反方向走，比如当前往右，不能直接往左
    
61.     if (keyPressed === 'a' && dx === 0) { // 按A往左
    
62.         dx = -gridSize;
    
63.         dy = 0;
    
64.     }
    
65.     else if (keyPressed === 'w' && dy === 0) { // 按W往上
    
66.         dx = 0;
    
67.         dy = -gridSize;
    
68.     }
    
69.     else if (keyPressed === 'd' && dx === 0) { // 按D往右
    
70.         dx = gridSize;
    
71.         dy = 0;
    
72.     }
    
73.     else if (keyPressed === 's' && dy === 0) { // 按S往下
    
74.         dx = 0;
    
75.         dy = gridSize;
    
76.     }
    
77. }
    
78. 
    
79. function gameLoop() {
    
80.     moveSnake();
    
81.     drawSnake();
    
82.     drawFood();
    
83. }
    
84. 
    
85. startButton.addEventListener("click", () => {
    
86.     snake = [ {x: gridSize * 5, y: gridSize * 5} ]; // 给蛇一个初始位置
    
87.     dx = gridSize;
    
88.     dy = 0;
    
89.     score = 0;
    
90.     generateFood();
    
91.     if (game) clearInterval(game); // 防止多次点击按钮导致游戏叠加
    
92.     game = setInterval(gameLoop, 100);
    
93. });
    
94. 
    
95. document.addEventListener("keydown", changeDirection);

复制代码

**简单解释：**

- 我把监听按键的部分，改成了监听键值 `'w'`, `'a'`, `'s'`, `'d'`（分别是上、左、下、右）。
- `moveSnake`函数里用`sake[0]`代表蛇头的位置，然后根据dx、dy计算新的头位置。
- 增加了撞墙和撞自己判断，如果碰到了就结束游戏，并弹出得分。
- 点击开始按钮时，蛇会初始化成一节，开始移动。

你可以试试运行这个代码后，用WASD控制蛇的移动！如果还有不懂或者想加功能，告诉我哦～