科学教育

标题: 个 [打印本页]

---

作者: 汪奕梵830    时间: 2025-12-9 09:49
标题: 个
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);
帮我把控制方向键换成wasd
js

---

作者: kaia    时间: 2025-12-9 09:49
好的！你想把方向键（上下左右箭头）改成用键盘上的 WASD 来控制贪吃蛇的移动，对吗？没问题，我帮你修改代码。

在你的 `changeDirection` 函数里面，原来是监听箭头键的 keyCode，这里我帮你改成监听字母键 W（上），A（左），S（下），D（右）。

W、A、S、D 对应的 keyCode 分别是：

- W：87
- A：65
- S：83
- D：68

你原来的 `changeDirection` 代码是这样判断的：

1. if (keyPressed === 37 && dx === 0) { // 左箭头
   
2.     dx = -gridSize;
   
3.     dy = 0;
   
4. }
   
5. if (keyPressed === 38 && dy === 0) { // 上箭头
   
6.     dx = 0;
   
7.     dy = -gridSize;
   
8. }
   
9. if (keyPressed === 39 && dx === 0) { // 右箭头
   
10.     dx = gridSize;
    
11.     dy = 0;
    
12. }
    
13. if (keyPressed === 40 && dy === 0) { // 下箭头
    
14.     dx = 0;
    
15.     dy = gridSize;
    
16. }

复制代码

我们改成用 WASD 就变成：

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. }

复制代码

记得替换你代码里的 `changeDirection` 函数哦！

---

简单来说就是：

- 按 W 向上走
- 按 A 向左走
- 按 S 向下走
- 按 D 向右走

希望你能玩得开心，写代码可要有耐心，有问题继续问我！????

---

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

Powered by Discuz! X3.2