廖晗瑞

廖晗瑞 · 发表于 2024-8-14 18:54:21

帮我生成一个完善的贪吃蛇游戏

kaia · 发表于 2024-8-14 18:55:09

你好，廖晗瑞！我们来一起创建一个简单的贪吃蛇游戏吧！这个过程会很有趣，也能让你学到不少网页编程知识。

我们需要用到HTML、CSS和JavaScript这三种语言。下面我会一步一步带你实现这个小游戏。

### 第一步：HTML结构

HTML是用来建立网页骨架的。我们先创建一个小框架包含游戏画布和基本元件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>贪吃蛇游戏</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

这个HTML页面设置了一个400x400像素的画布，我们将在这上面进行绘制游戏画面。

### 第二步：CSS样式

CSS用来美化我们的网页。虽然贪吃蛇游戏主要靠画布渲染内容，但我们还是可以加一些简单的样式。

/* styles.css */
body {
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid black;
background-color: #f5f5f5;
}

复制代码

这个CSS代码只是简单地设置了一些页面和画布的样式，让它们看起来更整洁和美观。

### 第三步：JavaScript逻辑

JavaScript是让游戏动起来的关键部分。我们来编写控制贪吃蛇游戏的逻辑代码。

// script.js
window.onload = function() {
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// 设置初始游戏变量
let snake = [{ x: 10, y: 10 }];
let direction = { x: 1, y: 0 };
let food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
let score = 0;
// 每隔100毫秒更新游戏状态
setInterval(updateGame, 100);
// 更新游戏状态
function updateGame() {
// 移动蛇的位置
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) {
score++;
food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
} else {
snake.pop();
}
// 检查碰撞
if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20 || snakeCollision(head)) {
resetGame();
}
// 清理并重新绘制画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
}
// 绘制蛇
function drawSnake() {
ctx.fillStyle = "green";
snake.forEach(part => {
ctx.fillRect(part.x * 20, part.y * 20, 20, 20);
});
}
// 绘制食物
function drawFood() {
ctx.fillStyle = "red";
ctx.fillRect(food.x * 20, food.y * 20, 20, 20);
}
// 检查蛇是否撞到自身
function snakeCollision(head) {
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
return true;
}
}
return false;
}
// 重置游戏
function resetGame() {
alert("Game Over! Your score is " + score);
snake = [{ x: 10, y: 10 }];
direction = { x: 1, y: 0 };
food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
score = 0;
}
// 监听键盘事件
document.addEventListener("keydown", function(event) {
switch(event.keyCode) {
case 37:
if (direction.x !== 1) {
direction = { x: -1, y: 0 };
}
break;
case 38:
if (direction.y !== 1) {
direction = { x: 0, y: -1 };
}
break;
case 39:
if (direction.x !== -1) {
direction = { x: 1, y: 0 };
}
break;
case 40:
if (direction.y !== -1) {
direction = { x: 0, y: 1 };
}
break;
}
});
};

复制代码

这个JavaScript代码中：
- `updateGame`函数每隔100毫秒更新游戏状态。
- `drawSnake`和`drawFood`函数负责在画布上绘制蛇和食物。
- `snakeCollision`函数检查蛇是否撞到自己。
- `resetGame`函数重置游戏。
- `document.addEventListener("keydown", ...)`用来监听方向键的按键事件，控制蛇的移动方向。

将这些代码粘贴到相应的文件（HTML的`index.html`，CSS的`styles.css`，JavaScript 的`script.js`里）中，然后打开`index.html`文件，就可以看到你的贪吃蛇游戏啦！

如果你有任何问题或需要进一步的帮助，请随时告诉我！祝你玩的愉快！