添加贪吃蛇游戏功能

13758623687 · 发表于 2024-7-26 11:11:31

@AI请在贪吃蛇游戏中添加游戏功能

kaia · 发表于 2024-7-26 11:11:49

当然可以！让我们一起添加一些简化版的贪吃蛇游戏功能吧！

### 贪吃蛇游戏基本概念

在贪吃蛇游戏中，玩家控制一条蛇在屏幕上移动，目标是尽量多吃食物（通常是小方块），每吃一个食物，蛇会变长。游戏的难度会随着蛇的长度增加而增加，如果蛇撞到墙壁或撞到自己，游戏结束。

### 创建贪吃蛇游戏的基础步骤

1. **设置游戏画布**：我们需要一个地方来画蛇和食物。
2. **初始化蛇和食物**：开始时我们需要初始化蛇的位置和食物的位置。
3. **控制蛇的移动**：通过按键来控制蛇的方向。
4. **检测碰撞**：检测蛇是否吃到食物，或者是否撞到墙壁或自己。
5. **更新画面**：实时更新游戏画面，让玩家看到蛇的移动。

### 代码实现（HTML + CSS + JavaScript）

#### 1. 设置HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>

复制代码

#### 2. 编写JavaScript文件 (snake.js)

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20; // 每个方格的大小
let snake = [{ x: 200, y: 200 }]; // 初始蛇的位置
let direction = { x: 0, y: -gridSize }; // 初始蛇的方向
let food = generateFood(); // 初始化食物
function gameLoop() {
moveSnake();
checkCollision();
drawGame();
}
function moveSnake() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
snake.unshift(head); // 在蛇头前插入新的位置
if (head.x === food.x && head.y === food.y) {
food = generateFood(); // 吃到食物后生成新食物
} else {
snake.pop(); // 没有吃到食物就移除尾部
}
}
function checkCollision() {
const head = snake[0];
// 撞墙检测
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
alert('Game Over!'); // 游戏结束
resetGame();
}
// 撞自己检测
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
alert('Game Over!'); // 游戏结束
resetGame();
}
}
}
function drawGame() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 画蛇
ctx.fillStyle = 'green';
snake.forEach(part => ctx.fillRect(part.x, part.y, gridSize, gridSize));
// 画食物
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, gridSize, gridSize);
}
function generateFood() {
const x = Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
const y = Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize;
return { x, y };
}
function resetGame() {
snake = [{ x: 200, y: 200 }];
direction = { x: 0, y: -gridSize };
food = generateFood();
}
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
direction = { x: 0, y: -gridSize };
break;
case 'ArrowDown':
direction = { x: 0, y: gridSize };
break;
case 'ArrowLeft':
direction = { x: -gridSize, y: 0 };
break;
case 'ArrowRight':
direction = { x: gridSize, y: 0 };
break;
}
});
setInterval(gameLoop, 100);

复制代码

### 简单解析

1. **HTML部分**: 我们创建了一个画布 (`canvas`) 用来绘制游戏。
2. **CSS部分**: 只是简单设置了页面布局。
3. **JavaScript部分**:
- `canvas`: 获取画布元素。
- `gridSize`: 定义每个小方格的大小。
- `snake`: 一个数组，表示蛇的身体，每个元素都是一个对象 `{x, y}`。
- `direction`: 蛇移动的方向。
- `food`: 当前食物的位置。
- `gameLoop`: 游戏循环函数，包含移动蛇、检测碰撞和更新画面。
- `moveSnake`: 更新蛇的位置。
- `checkCollision`: 检查是否撞墙或撞自己。
- `drawGame`: 绘制游戏画面。
- `generateFood`: 随机生成食物位置。
- `resetGame`: 重置游戏。
- `window.addEventListener('keydown')`: 监听键盘事件，控制蛇的方向。

尝试运行以上代码，看看你能否控制蛇去吃食物吧！如果有任何问题或需要进一步的扩展，可以随时告诉我哦！