科学教育

标题: ndfj [打印本页]

---

作者: 金麟--天下会    时间: 2025-12-9 09:43
标题: ndfj
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);
帮我把控制方向的键改成a,w,s,d

---

作者: kaia    时间: 2025-12-9 09:43
你好！你写的这个游戏是贪吃蛇，看起来代码还有一些小问题，我帮你修改一下，同时把控制方向的键改成了a、w、s、d。

在键盘事件中，a、w、s、d对应的keyCode分别是：
- a：65
- w：87
- s：83
- d：68

我帮你把 `changeDirection` 函数改成用这几个键来控制方向：

1. function changeDirection(event) {
   
2.     const keyPressed = event.keyCode;
   
3.     if (keyPressed === 65 && dx === 0) { // a - 向左
   
4.         dx = -gridSize;
   
5.         dy = 0;
   
6.     }
   
7.     if (keyPressed === 87 && dy === 0) { // w - 向上
   
8.         dx = 0;
   
9.         dy = -gridSize;
   
10.     }
    
11.     if (keyPressed === 68 && dx === 0) { // d - 向右
    
12.         dx = gridSize;
    
13.         dy = 0;
    
14.     }
    
15.     if (keyPressed === 83 && dy === 0) { // s - 向下
    
16.         dx = 0;
    
17.         dy = gridSize;
    
18.     }
    
19. }

复制代码

另外，你的蛇身体初始化和 `moveSnake` 函数中的代码也需要修正，比如蛇是一个数组，每一节身体都有 x 和 y 坐标，而现在代码里少了初始化蛇身体，还有在 `moveSnake` 中你写的是 `snake.x`，它应该是 `snake[0].x` 表示蛇头坐标。

这是改好的简单版本：

1. let snake = [{x: 100, y: 100}]; // 初始化蛇身体，从一个方块开始
   
2. 
   
3. function moveSnake() {
   
4.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
   
5.     snake.unshift(head);
   
6. 
   
7.     if (head.x === food.x && head.y === food.y) {
   
8.         score++;
   
9.         generateFood();
   
10.     } else {
    
11.         snake.pop();
    
12.     }
    
13. }
    
14. 
    
15. function gameLoop() {
    
16.     moveSnake();
    
17. 
    
18.     // 判断游戏是否结束（撞墙）
    
19.     if (
    
20.         snake[0].x < 0 || snake[0].x >= canvas.width ||
    
21.         snake[0].y < 0 || snake[0].y >= canvas.height
    
22.     ) {
    
23.         clearInterval(game);
    
24.         alert("Game Over! Your score is " + score);
    
25.     }
    
26. 
    
27.     drawSnake();
    
28.     drawFood();
    
29. }
    
30. 
    
31. startButton.addEventListener("click", () => {
    
32.     snake = [{x: 100, y: 100}];
    
33.     dx = gridSize;
    
34.     dy = 0;
    
35.     score = 0;
    
36.     generateFood();
    
37.     game = setInterval(gameLoop, 100);
    
38. });

复制代码

总结一下：

- 控制方向改成a、w、s、d，把 `changeDirection` 里的数字换成对应的keyCode。
- 蛇身体是个数组，第一节是蛇头，坐标用 `snake[0].x`, `snake[0].y`。
- 初始化蛇身体不能空，要给它初始位置。

你可以试试看，有什么不明白再问我哦！加油～

---

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

Powered by Discuz! X3.2