科学教育

标题: 帮我把下列代码改为WASD的形式 [打印本页]

---

作者: 金外周未    时间: 2025-12-9 15:19
标题: 帮我把下列代码改为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    时间: 2025-12-9 15:19
好的！我帮你把方向键（上下左右箭头）改成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.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    
33.     snake.unshift(head);  // 在最前面添加新蛇头
    
34.     if (head.x === food.x && head.y === food.y) {
    
35.         score++;
    
36.         generateFood();
    
37.     } else {
    
38.         snake.pop();  // 没吃到食物就删掉蛇尾，保持长度不变
    
39.     }
    
40. }
    
41. 
    
42. function changeDirection(event) {
    
43.     const keyPressed = event.key.toLowerCase();
    
44. 
    
45.     // 按W（上）且当前不是向下，则向上移动
    
46.     if (keyPressed === 'w' && dy === 0) {  
    
47.         dx = 0;
    
48.         dy = -gridSize;
    
49.     }
    
50.     // 按A（左）且当前不是向右，则向左移动
    
51.     else if (keyPressed === 'a' && dx === 0) {  
    
52.         dx = -gridSize;
    
53.         dy = 0;
    
54.     }
    
55.     // 按S（下）且当前不是向上，则向下移动
    
56.     else if (keyPressed === 's' && dy === 0) {  
    
57.         dx = 0;
    
58.         dy = gridSize;
    
59.     }
    
60.     // 按D（右）且当前不是向左，则向右移动
    
61.     else if (keyPressed === 'd' && dx === 0) {  
    
62.         dx = gridSize;
    
63.         dy = 0;
    
64.     }
    
65. }
    
66. 
    
67. function gameLoop() {
    
68.     moveSnake();
    
69.    
    
70.     // 判断蛇是否撞墙或撞自己（这里加一下撞自己判断更完整）
    
71.     const head = snake[0];
    
72.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height ||
    
73.         snake.slice(1).some(part => part.x === head.x && part.y === head.y)) {
    
74.         clearInterval(game);
    
75.         alert("Game Over! Your score is " + score);
    
76.         return;
    
77.     }
    
78. 
    
79.     drawSnake();
    
80.     drawFood();
    
81. }
    
82. 
    
83. startButton.addEventListener("click", () => {
    
84.     snake = [
    
85.         {x: gridSize * 5, y: gridSize * 5},
    
86.         {x: gridSize * 4, y: gridSize * 5},
    
87.         {x: gridSize * 3, y: gridSize * 5},
    
88.     ];
    
89.     dx = gridSize;
    
90.     dy = 0;
    
91.     score = 0;
    
92.     generateFood();
    
93.     if (game) clearInterval(game);
    
94.     game = setInterval(gameLoop, 100);
    
95. });
    
96. 
    
97. document.addEventListener("keydown", changeDirection);

复制代码

**我给你讲讲怎么用WASD控制：**  
- `W`：向上。  
- `A`：向左。  
- `S`：向下。  
- `D`：向右。

你按哪个字母，蛇头就会往对应方向走，但不能直接反向，比如当前往右，不能马上按A向左，否则蛇会撞死。

---

这段代码是一个简单的贪吃蛇游戏，帧率是每100毫秒刷新一次画面和蛇的动作。你可以把它放在有`<canvas id="gameCanvas"></canvas>`和`<button id="startButton">开始游戏</button>`的网页里玩。

如果还有哪里不懂，欢迎再问我哦！我会尽量用简单的语言帮你解释。????

---

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

Powered by Discuz! X3.2