科学教育

标题: 111111111111111111111111111111111111111111 [打印本页]

---

作者: 朱益佳    时间: 2025-12-9 09:59
标题: 111111111111111111111111111111111111111111
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);
帮我改成用wasb的方向键。

---

作者: kaia    时间: 2025-12-9 10:00
好的！你想把蛇游戏的方向键从箭头键改成用 WASD 键控制对吗？我帮你修改代码，让按 W A S D 来控制蛇的移动方向。

**WASD 对应的键盘码：**
- W = 87 (上)
- A = 65 (左)
- S = 83 (下)
- D = 68 (右)

我帮你改写 `changeDirection` 函数，其他地方保持不变。还有你代码里有几个小错误，我也帮你一并修正：

1. `let snake = ;` 应该初始化为一个数组，比如：`let snake = [{x: 0, y: 0}];`
2. `const head = {x: snake.x + dx, y: snake.y + dy};` 应该是 `snake[0].x` 和 `snake[0].y`，因为 `snake` 是数组。
3. 判断撞墙也要用蛇头的位置，就是 `snake[0]`。
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;
   
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. 
    
35.     if (head.x === food.x && head.y === food.y) {
    
36.         score++;
    
37.         generateFood();
    
38.     } else {
    
39.         snake.pop();
    
40.     }
    
41. }
    
42. 
    
43. function changeDirection(event) {
    
44.     const keyPressed = event.keyCode;
    
45.     // 用WASD控制方向
    
46.     if (keyPressed === 65 && dx === 0) { // A - 向左
    
47.         dx = -gridSize;
    
48.         dy = 0;
    
49.     }
    
50.     if (keyPressed === 87 && dy === 0) { // W - 向上
    
51.         dx = 0;
    
52.         dy = -gridSize;
    
53.     }
    
54.     if (keyPressed === 68 && dx === 0) { // D - 向右
    
55.         dx = gridSize;
    
56.         dy = 0;
    
57.     }
    
58.     if (keyPressed === 83 && dy === 0) { // S - 向下
    
59.         dx = 0;
    
60.         dy = gridSize;
    
61.     }
    
62. }
    
63. 
    
64. function gameLoop() {
    
65.     moveSnake();
    
66.     drawSnake();
    
67.     drawFood();
    
68. 
    
69.     const head = snake[0];
    
70. 
    
71.     // 撞墙判断
    
72.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    
73.         clearInterval(game);
    
74.         alert("Game Over! Your score is " + score);
    
75.     }
    
76. }
    
77. 
    
78. startButton.addEventListener("click", () => {
    
79.     snake = [
    
80.         {x: 0, y: 0},
    
81.         {x: gridSize, y: 0},
    
82.         {x: gridSize * 2, y: 0},
    
83.     ];
    
84.     dx = gridSize;
    
85.     dy = 0;
    
86.     score = 0;
    
87.     generateFood();
    
88.     clearInterval(game); // 避免重复启动多个定时器
    
89.     game = setInterval(gameLoop, 100);
    
90. });
    
91. 
    
92. document.addEventListener("keydown", changeDirection);

复制代码

---

**总结一下：**

- 我们把检测按键的代码从 方向键的数字改成了 WASD 的数字码。
- 保证蛇每次只能沿一个方向移动，避免直接向“反方向”移导致游戏异常。
- 修正了蛇移动，初始化和碰撞判断的小错误。

你可以试试这个代码，按 W A S D 控制蛇移动。如果还有哪里不懂或者需要帮忙，可以再告诉我哦！

---

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

Powered by Discuz! X3.2