帮我在js的基础上用wasd修改 - 科学教育

const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const startButton = document.getElementById("startButton");
const gridSize = 20;
let snake = []; // 蛇身体的位置数组，里面每个元素是{x, y}
let food = {x: 0, y: 0};
let dx = gridSize; // 水平移动距离，每次移动多少格子
let dy = 0; // 垂直移动距离
let score = 0;
let game; // 计时器变量
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}; // 新的蛇头位置
// 检查是否撞墙
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
clearInterval(game);
alert("Game Over! Your score is " + score);
return;
}
// 检查是否撞自己
for (let part of snake) {
if (part.x === head.x && part.y === head.y) {
clearInterval(game);
alert("Game Over! Your score is " + score);
return;
}
}
snake.unshift(head); // 把新头加到蛇的前面
if (head.x === food.x && head.y === food.y) {
score++;
generateFood();
} else {
snake.pop(); // 如果没吃到食物，去掉尾巴，让蛇长度不变
}
}
function changeDirection(event) {
const keyPressed = event.key.toLowerCase(); // 获取按键字符，转换成小写方便判断
// 不能让蛇直接往反方向走，比如当前往右，不能直接往左
if (keyPressed === 'a' && dx === 0) { // 按A往左
dx = -gridSize;
dy = 0;
}
else if (keyPressed === 'w' && dy === 0) { // 按W往上
dx = 0;
dy = -gridSize;
}
else if (keyPressed === 'd' && dx === 0) { // 按D往右
dx = gridSize;
dy = 0;
}
else if (keyPressed === 's' && dy === 0) { // 按S往下
dx = 0;
dy = gridSize;
}
}
function gameLoop() {
moveSnake();
drawSnake();
drawFood();
}
startButton.addEventListener("click", () => {
snake = [ {x: gridSize * 5, y: gridSize * 5} ]; // 给蛇一个初始位置
dx = gridSize;
dy = 0;
score = 0;
generateFood();
if (game) clearInterval(game); // 防止多次点击按钮导致游戏叠加
game = setInterval(gameLoop, 100);
});
document.addEventListener("keydown", changeDirection);

复制代码