U

陈子睿

将下面的一段代码中的js部分中的操作按键改成w a s d [td]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); [/td]

kaia

好的！你这段代码里，控制蛇移动的方向是通过监听键盘上的箭头键（上下左右）来实现的。它们对应的键盘编码是37（左）、38（上）、39（右）、40（下）。

现在你想改成用W、A、S、D键来控制，分别代表：
- W：向上
- A：向左
- S：向下
- D：向右

这几个字母键对应的keyCode是：
- W：87
- A：65
- S：83
- D：68

我们就只需要把 `changeDirection` 这个函数里的判断条件换成这几个数字就可以啦。

我帮你改一下 `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. }

复制代码

这样你按W（87）就会让蛇往上走，按A（65）往左，按S（83）往下，按D（68）往右，就像玩游戏时用这些字母键控制角色一样，非常方便。

如果你不太熟悉 `keyCode`，其实就是每个键都有一个数字ID，JavaScript用它来知道你按了哪个键。

希望解释得清楚，如果还要帮忙改哪里或者有别的问题，告诉我哈！????