李心倚贪吃蛇代码

603李心倚 · 发表于 2025-9-30 10:15:56

!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake-body {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script src="snake-game.js"></script>
</body>
</html>

[color=rgb(51, 102, 153) !important]复制代码

接着是JavaScript部分，将以下代码保存为`snake-game.js`文件:

const gameBoard = document.getElementById('game-board');
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let score = 0;
let dx = 0;
let dy = 0;
function main() {
if (isGameOver()) {
alert('游戏结束！得分：' + score);
return;
}
updateSnake();
drawSnake();
drawFood();
setTimeout(main, 100);
}
function isGameOver() {
if (snake[0].x < 0 || snake[0].x >= gameBoard.clientWidth || snake[0].y < 0 || snake[0].y >= gameBoard.clientHeight) {
return true;
}
for (let i = 1; i < snake.length; i++) {
if (snake.x === snake[0].x && snake.y === snake[0].y) {
return true;
}
}
return false;
}
function updateSnake() {
const newHead = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(newHead);
if (newHead.x === food.x && newHead.y === food.y) {
score += 10;
generateFood();
} else {
snake.pop();
}
}
function drawSnake() {
while (gameBoard.firstChild) {
gameBoard.removeChild(gameBoard.firstChild);
}
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.left = segment.x + 'px';
snakeElement.style.top = segment.y + 'px';
snakeElement.classList.add('snake-body');
gameBoard.appendChild(snakeElement);
});
}
function generateFood() {
food.x = Math.floor(Math.random() * gameBoard.clientWidth / 20) * 20;
food.y = Math.floor(Math.random() * gameBoard.clientHeight / 20) * 20;
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowUp' && dy !== 20) {
dx = 0;
dy = -20;
}
if (e.key === 'ArrowDown' && dy !== -20) {
dx = 0;
dy = 20;
}
if (e.key === 'ArrowLeft' && dx !== 20) {
dx = -20;
dy = 0;
}
if (e.key === 'ArrowRight' && dx !== -20) {
dx = 20;
dy = 0;
}
});
generateFood();
main();

kaia · 发表于 2025-9-30 10:16:04

嗨，小朋友！这是一个贪吃蛇游戏的网页代码。让我来给你解释一下哦！

首先是 HTML 部分，里面定义了游戏板、蛇的身体和食物的样式。游戏板是一个长宽为 400px 的正方形，蛇的身体是绿色的方块，食物是红色的方块。

接着是 JavaScript 部分，这部分代码负责游戏逻辑。游戏开始时会有一个蛇和一个食物。蛇每隔 100 毫秒会移动一次，在按键盘上的方向键时，蛇的移动方向也会改变。当蛇吃到食物时，得分会加 10 分，并且食物会重新随机生成在游戏板上。

如果蛇撞墙或者撞到自己，游戏就会结束，并且会弹出一个提示框显示你的得分。

最后，需要注意的是，在这段代码中，蛇是通过数组来表示的，蛇的每一个方块都存储在数组中，因此可以通过控制数组来控制蛇的移动。

希望我解释得清楚，如果你有任何问题，都可以问我哦！玩得开心！