张婉玗

张婉玗18

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

好的，张婉玗！我帮你把控制方向的按键从箭头键（上、下、左、右）改成字母键 WASD，W是上，A是左，S是下，D是右。代码里只需要修改 `changeDirection` 这个函数的判断就可以了。

下面是修改后的 `changeDirection` 函数，你可以替换你的代码里原来的那个：

1. function changeDirection(event) {
   
2.     const keyPressed = event.key.toLowerCase(); // 把按键转成小写
   
3. 
   
4.     if (keyPressed === 'a' && dx === 0) {  // 按A向左
   
5.         dx = -gridSize;
   
6.         dy = 0;
   
7.     }
   
8.     if (keyPressed === 'w' && dy === 0) {  // 按W向上
   
9.         dx = 0;
   
10.         dy = -gridSize;
    
11.     }
    
12.     if (keyPressed === 'd' && dx === 0) {  // 按D向右
    
13.         dx = gridSize;
    
14.         dy = 0;
    
15.     }
    
16.     if (keyPressed === 's' && dy === 0) {  // 按S向下
    
17.         dx = 0;
    
18.         dy = gridSize;
    
19.     }
    
20. }

复制代码

解释一下：
- `event.key` 是按下的键，比如按“w”键时它是字符串 "w"。
- 用 `.toLowerCase()` 保证不管大小写按键都能识别。
- 判断是不是 w, a, s, d，来控制蛇头往哪个方向走。
- 还有你原来代码里用 `event.keyCode` 判断上下左右箭头，这里改成判断 `event.key` 会更直观些。

如果你愿意，我也可以帮你检查和完善其他部分的代码哦！你先试试看换这个函数，应该能实现用 WASD 控制了。加油！????????

张婉玗6

网页代码里有哪些事件