楼梓毓贪吃蛇游戏

楼梓毓1 · 发表于 2025-9-30 10:04:44

帮我做一个有HTML，CSS，JS的贪吃蛇游戏代码

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

当然可以！让我们一步步来创建一个简单的贪吃蛇游戏吧。

首先，我们需要三个文件：一个 HTML 文件、一个 CSS 文件和一个 JS 文件。在 HTML 文件中，我们将创建游戏区域；在 CSS 文件中，我们将设置样式；在 JS 文件中，我们将编写游戏的逻辑。

### 1. HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-area" id="gameArea">
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

### 2. CSS 文件 (`style.css`)

.game-area {
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}

复制代码

### 3. JS 文件 (`script.js`)

const gameArea = document.getElementById('gameArea');
let snake = [{x: 10, y: 10}];
let food = {x: 200, y: 200};
let direction = 'right';
function drawSnake() {
gameArea.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');
gameArea.appendChild(snakeElement);
});
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
foodElement.classList.add('food');
gameArea.appendChild(foodElement);
}
function update() {
// 更新蛇的位置
const head = {x: snake[0].x, y: snake[0].y};
if (direction === 'right') {
head.x += 10;
} else if (direction === 'left') {
head.x -= 10;
} else if (direction === 'up') {
head.y -= 10;
} else if (direction === 'down') {
head.y += 10;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 生成新的食物
food.x = Math.floor(Math.random() * 40) * 10;
food.y = Math.floor(Math.random() * 40) * 10;
} else {
snake.pop();
}
// 更新画面
drawSnake();
drawFood();
}
setInterval(update, 100);
document.addEventListener('keydown', event => {
const key = event.key;
if (key === 'ArrowUp' && direction !== 'down') {
direction = 'up';
} else if (key === 'ArrowDown' && direction !== 'up') {
direction = 'down';
} else if (key === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
} else if (key === 'ArrowRight' && direction !== 'left') {
direction = 'right';
}
});

复制代码

这就是一个简单的贪吃蛇游戏代码！你可以复制这些代码并将它们分别保存到名为 `index.html`、`style.css` 和 `script.js` 的文件中，然后用浏览器打开 `index.html` 文件即可开始游戏。希望你玩得开心！如果有任何问题，都可以随时问我哦。