杨惜词贪吃蛇

杨惜词 · 发表于 2025-9-30 15:32:08

帮我生成一个贪吃蛇代码

kaia · 发表于 2025-9-30 15:32:19

当我们创建一个贪吃蛇游戏时，需要考虑几个重要的部分：蛇的身体、食物、游戏界面和控制蛇的移动。

首先，让我们创建一个基本的HTML文件，并添加一些必要的元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
position: absolute;
background-color: green;
width: 20px;
height: 20px;
}
#food {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const gameBoard = document.getElementById('game-board');
let snake = [{x: 200, y: 200}]; // 蛇的初始位置
let food = {x: 0, y: 0}; // 食物的初始位置
function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.left = segment.x + 'px';
snakeElement.style.top = segment.y + 'px';
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
});
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
foodElement.id = 'food';
gameBoard.appendChild(foodElement);
}
function getRandomPosition() {
return Math.floor(Math.random() * 20) * 20;
}
function update() {
drawSnake();
drawFood();
}
setInterval(update, 1000); // 每秒钟更新一次游戏状态
</script>
</body>
</html>

复制代码

这段代码实现了最基本的贪吃蛇游戏框架。在游戏中使用`snake`数组来存储蛇的身体部分，使用`food`对象来表示食物。`drawSnake()`函数用于在界面上绘制蛇的身体，`drawFood()`函数用于绘制食物。`getRandomPosition()`函数用于生成随机位置，而`update()`函数用于更新游戏状态并在界面上展示。

你可以根据此基础代码进一步完善游戏功能，如实现蛇的移动、吃食物、增加蛇的长度等操作。希望对你有所帮助！如果有任何疑问，欢迎随时向我提问。