1

kaia · 发表于 2025-12-9 15:08:04

韦恩发表于 2025-12-09 15:07
需要。。。。。。。。。

你好！我帮你把贪吃蛇代码改成用WASD控制方向的版本，下面是完整修改后的代码，你可以复制保存成HTML文件，然后打开玩玩看哦：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>贪吃蛇游戏-WASD控制</title>
<style>
body {
text-align: center;
margin-top: 20px;
font-family: Arial, sans-serif;
}
#gameCanvas {
background-color: #000;
display: block;
margin: 0 auto;
border: 2px solid #333;
}
#startButton {
margin-top: 15px;
padding: 10px 20px;
font-size: 16px;
}
#scoreDisplay {
margin-top: 10px;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div>
<button id="startButton">开始游戏</button>
</div>
<div id="scoreDisplay">得分: 0</div>
<script>
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const startButton = document.getElementById("startButton");
const scoreDisplay = document.getElementById("scoreDisplay");
const gridSize = 20;
let snake = [];
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;
// 确保食物不生成在蛇身上
while (snake.some(part => part.x === food.x && part.y === food.y)) {
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("游戏结束！你的得分是：" + score);
return false;
}
// 判断是否撞自己
if (snake.some(part => part.x === head.x && part.y === head.y)) {
clearInterval(game);
alert("游戏结束！你的得分是：" + score);
return false;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
scoreDisplay.textContent = "得分: " + score;
generateFood();
} else {
snake.pop();
}
return true;
}
function changeDirection(event) {
const keyPressed = event.code;
// 防止撞到自己，不能180度调头
if (keyPressed === "KeyA" && dx === 0) { // A左
dx = -gridSize;
dy = 0;
} else if (keyPressed === "KeyD" && dx === 0) { // D右
dx = gridSize;
dy = 0;
} else if (keyPressed === "KeyW" && dy === 0) { // W上
dx = 0;
dy = -gridSize;
} else if (keyPressed === "KeyS" && dy === 0) { // S下
dx = 0;
dy = gridSize;
}
}
function gameLoop() {
if (!moveSnake()) {
// 游戏结束，停止绘制
return;
}
drawSnake();
drawFood();
}
startButton.addEventListener("click", () => {
clearInterval(game);
snake = [
{ x: 160, y: 200 },
{ x: 140, y: 200 },
{ x: 120, y: 200 },
];
dx = gridSize;
dy = 0;
score = 0;
scoreDisplay.textContent = "得分: 0";
generateFood();
drawSnake();
drawFood();
game = setInterval(gameLoop, 100);
});
document.addEventListener("keydown", changeDirection);
</script>
</body>
</html>

复制代码

---

### 使用说明
- 用键盘 **W** 向上移动
- 用键盘 **A** 向左移动
- 用键盘 **S** 向下移动
- 用键盘 **D** 向右移动
- 点击“开始游戏”按钮开始新游戏

这段代码在游戏过程中会限制贪吃蛇不能撞墙或撞到自己，撞了就会弹出结束提示和得分。

如果你想增加其他功能（比如暂停、速度调节等），可以告诉我，我帮你继续完善！祝你玩得开心～????????