贪吃蛇

张复礼 · 发表于 2024-8-2 14:58:55

生成一段完整的贪吃蛇游戏

kaia · 发表于 2024-8-2 14:59:15

嘿，小朋友！咱们今天来做一个有趣的小游戏吧——贪吃蛇！这可是一个经典的游戏哦！我们会用到HTML、CSS和JavaScript来完成这个小项目。准备好了吗？让我们开始吧！

### 第一步：设置HTML结构
首先，我们需要一个简单的HTML文件来放置我们的游戏画布(canvas)。它就像是我们的“游戏舞台”。

创建一个新的HTML文件，命名为 `index.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>
canvas {
border: 1px solid black;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

### 第二步：设置CSS样式
在上面的HTML文件中，我们已经加了简单的CSS样式，用来显示一个边框，并设置画布的背景颜色。

### 第三步：编写JavaScript
现在，我们要来写最重要的JavaScript部分。在HTML文件的最后一行，我们使用`<script>`标签引入了一个叫做 `script.js` 的文件。接下来，我们需要创建这个文件，并使用它来实现贪吃蛇游戏的逻辑。

新建一个文件，命名为 `script.js`，然后添加以下代码：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let snake = [
{ x: 150, y: 150 },
{ x: 140, y: 150 },
{ x: 130, y: 150 },
{ x: 120, y: 150 },
{ x: 110, y: 150 }
];
let dx = 10;
let dy = 0;
function clearCanvas() {
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
snake.pop();
}
function main() {
setTimeout(function onTick() {
clearCanvas();
moveSnake();
drawSnake();
main();
}, 100);
}
document.addEventListener("keydown", changeDirection);
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
main();

复制代码

### 解释一下代码：
1. **初始化贪吃蛇**：我们设定了初始的蛇身体位置，宽度和高度都为10个像素。
2. **画布清理函数**：每次更新蛇的位置前，我们需要清理画布。
3. **绘制蛇**：定义了如何绘制蛇的每一节。
4. **移动蛇**：蛇的每一节都会往前挪动一格。
5. **主循环(main)**：每100毫秒，我们会清理画布、移动蛇、再重新绘制。
6. **方向控制**：通过监听键盘事件，实现上下左右的控制。

这么一来，你就可以在浏览器中打开 `index.html` 文件，尽情享受你的贪吃蛇游戏了！加油，希望你玩得开心！

张复礼 · 发表于 2024-8-2 15:11:39

你好，我的游戏需要出现蛇的食物，蛇吃了食物之后变长，当蛇碰壁后显示“游戏结束”及得分，出现“开始游戏”的按钮。

kaia · 发表于 2024-8-2 15:12:02

张复礼发表于 2024-08-02 15:11
你好，我的游戏需要出现蛇的食物，蛇吃了食物之后变长 ...

好的，小朋友！我们来为贪吃蛇游戏添加食物、增加得分和游戏结束的功能吧！这是一个非常有趣的部分。下面我们逐步修改 `script.js` 文件。

### 修改后的 JavaScript 代码

在之前的代码基础上添加以下内容：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let snake = [{ x: 50, y: 50 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;
document.addEventListener("keydown", changeDirection);
function randomFoodPosition() {
const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
return { x, y };
}
function clearCanvas() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
// 检测碰壁
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
gameOver = true;
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
food = randomFoodPosition();
} else {
snake.pop();
}
}
function collision(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 main() {
if (gameOver) {
displayGameOver();
return;
}
setTimeout(function onTick() {
clearCanvas();
drawFood();
moveSnake();
drawSnake();
main();
}, 100);
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
// 显示游戏结束
function displayGameOver() {
ctx.fillStyle = "black";
ctx.font = "30px Arial";
ctx.fillText("游戏结束！得分: " + score, canvas.width / 4, canvas.height / 2);
document.getElementById("startButton").style.display = "block";
}
function startGame() {
snake = [{ x: 50, y: 50 }];
score = 0;
dx = 10;
dy = 0;
gameOver = false;
food = randomFoodPosition();
main();
}
food = randomFoodPosition();
main();

复制代码

### 修改后的 HTML 代码

在原有的 `index.html` 文件中，添加一个开始游戏的按钮：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
background-color: #f5f5f5;
}
#startButton {
display: none;
margin-top: 10px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startButton" onclick="startGame()">开始游戏</button>
<script src="script.js"></script>
</body>
</html>

复制代码

### 解释修改的内容：

1. **生成食物**：使用 `randomFoodPosition()` 函数随机位置放置食物。
2. **增加得分**：每次蛇吃到食物时，得分加一，并重新生成食物。
3. **检测碰壁**：如果蛇的头部碰到边界或自己的身体，游戏结束。
4. **显示游戏结束信息**：当游戏结束时，显示得分和“开始游戏”按钮。
5. **重新开始游戏**：点击“开始游戏”按钮后，游戏会重置并开始。

现在你打开 `index.html` 文件，就可以玩这个完整的贪吃蛇游戏了！享受游戏吧！如果还有其他问题，随时问我哦！

张复礼 · 发表于 2024-8-2 15:34:13

为什么没有css文件

kaia · 发表于 2024-8-2 15:34:26

张复礼发表于 2024-08-02 15:34
为什么没有css文件

抱歉忘记提到CSS文件了！来，我们为这个贪吃蛇游戏添加一些简单的样式，使它看起来更好。接下来，我们会创建一个 `style.css` 文件并添加相应的样式。

### 创建 CSS 文件

新建一个文件，命名为 `style.css`，然后添加以下内容：

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #e0e0e0;
}
canvas {
border: 1px solid black;
background-color: #f5f5f5;
}
#startButton {
display: none; /* 默认隐藏 */
padding: 10px 20px;
font-size: 20px;
margin-top: 10px;
cursor: pointer;
background-color: #4CAF50; /* 绿色按钮 */
color: white;
border: none;
border-radius: 5px;
}
#startButton:hover {
background-color: #45a049; /* 更深的绿色 */
}

复制代码

### 修改 HTML 文件以链接 CSS

确保在 `index.html` 文件的 `<head>` 部分连接这个 CSS 文件：

<!DOCTYPE html>
<html lang="zh">
<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>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startButton" onclick="startGame()">开始游戏</button>
<script src="script.js"></script>
</body>
</html>

复制代码

### 解释 CSS 样式：

1. **`body`**: 用 Flexbox 布局使画布和按钮居中，背景颜色为淡灰色。
2. **`canvas`**: 设置边框和背景颜色。
3. **`#startButton`**: 设置按钮的样式，包括颜色、大小以及鼠标悬停时的效果。

### 运行游戏

完成这些后，你可以在浏览器中打开 `index.html` 文件，使用“开始游戏”按钮来开始你的贪吃蛇游戏！希望你喜欢这些改动！如果还有其他问题，或者想进一步增加更多功能，随时告诉我哦！

张复礼 · 发表于 2024-8-6 14:17:33

游戏结束后，“开始游戏”的按钮出现在“游戏结束！”四个字下方。

kaia · 发表于 2024-8-6 14:18:01

张复礼发表于 2024-08-06 14:17
游戏结束后，“开始游戏”的按钮出现在“游戏结束！” ...

好的，我们来调整一下按钮在“游戏结束！”文字下方的位置。为此，我们将进一步改进 HTML 和 CSS 代码，使布局更合理。

### 修改后的 HTML 代码

更新你的 `index.html` 文件，使其如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<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>
<h1>贪吃蛇游戏</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="gameOverText" class="hidden">游戏结束！</div>
<button id="startButton" onclick="startGame()">开始游戏</button>
<script src="script.js"></script>
</body>
</html>

复制代码

这里我们添加了一个 `<div>` 标签，用于显示“游戏结束！”的信息。

### 修改后的 CSS 代码

更新你的 `style.css` 文件，使其如下所示：

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #e0e0e0;
margin: 0;
}
canvas {
border: 1px solid black;
background-color: #f5f5f5;
}
#startButton {
display: none; /* 默认隐藏 */
padding: 10px 20px;
font-size: 20px;
margin-top: 10px;
cursor: pointer;
background-color: #4CAF50; /* 绿色按钮 */
color: white;
border: none;
border-radius: 5px;
}
#startButton:hover {
background-color: #45a049; /* 更深的绿色 */
}
#gameOverText {
font-size: 24px;
color: red;
margin-top: 20px;
display: none; /* 默认隐藏 */
}
.hidden {
display: none;
}

复制代码

### 修改后的 JavaScript 代码

接下来，更新 `script.js` 文件，使其如下所示：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let snake = [{ x: 50, y: 50 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;
document.addEventListener("keydown", changeDirection);
function randomFoodPosition() {
const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
return { x, y };
}
function clearCanvas() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
// 检测碰壁
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
gameOver = true;
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
food = randomFoodPosition();
} else {
snake.pop();
}
}
function collision(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 main() {
if (gameOver) {
displayGameOver();
return;
}
setTimeout(function onTick() {
clearCanvas();
drawFood();
moveSnake();
drawSnake();
main();
}, 100);
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
// 显示游戏结束
function displayGameOver() {
document.getElementById('gameOverText').classList.remove('hidden');
document.getElementById('startButton').style.display = 'block';
}
function startGame() {
snake = [{ x: 50, y: 50 }];
score = 0;
dx = 10;
dy = 0;
gameOver = false;
food = randomFoodPosition();
document.getElementById('gameOverText').classList.add('hidden');
document.getElementById('startButton').style.display = 'none';
main();
}
food = randomFoodPosition();
main();

复制代码

### 解释调整内容：

1. **HTML**：
- 添加了一个 `<div id="gameOverText" class="hidden">` 用于显示“游戏结束！”信息。
- 更新了按钮的点击事件为 `onclick="startGame()"`。

2. **CSS**：
- 更新了 `#gameOverText` 样式，确保它默认隐藏，并在需要的时候显示。
- 确保 `#startButton` 和 `#gameOverText` 在样式上有合理的间距。

3. **JavaScript**：
- 添加了 `displayGameOver` 函数来显示“游戏结束！”信息和按钮。
- 更新了 `startGame` 函数以重置游戏状态并隐藏“游戏结束！”信息和按钮。

现在，游戏结束后，“开始游戏”按钮将显示在“游戏结束！”文字的下方。希望这些修改能满足你的需求！如果还有其他问题，尽管问我哦！

张复礼 · 发表于 2024-8-6 14:21:46

游戏结束后，显示“很遗憾！游戏结束”，并显示得分

kaia · 发表于 2024-8-6 14:23:20

张复礼发表于 2024-08-06 14:21
游戏结束后，显示“很遗憾！游戏结束”，并显示得分 ...

好的，让我们在游戏结束时更清晰地显示“很遗憾！游戏结束”，并显示得分。我们会在HTML中添加一个用于显示游戏结束信息的元素，并在JavaScript中更新其内容。

### 修改后的 HTML 代码

首先，更新你的 `index.html` 文件，如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="gameOverText" class="hidden">很遗憾！游戏结束<br>得分: <span id="score"></span></div>
<button id="startButton" onclick="startGame()">开始游戏</button>
<script src="script.js"></script>
</body>
</html>

复制代码

这里我们使用了 `<span id="score"></span>` 来动态显示得分。

### 修改后的 CSS 代码

更新你的 `style.css` 文件，使其如下所示（没有太大变化，只是确保样式合理）：

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #e0e0e0;
margin: 0;
}
canvas {
border: 1px solid black;
background-color: #f5f5f5;
}
#startButton {
display: none; /* 默认隐藏 */
padding: 10px 20px;
font-size: 20px;
margin-top: 10px;
cursor: pointer;
background-color: #4CAF50; /* 绿色按钮 */
color: white;
border: none;
border-radius: 5px;
}
#startButton:hover {
background-color: #45a049; /* 更深的绿色 */
}
#gameOverText {
font-size: 24px;
color: red;
text-align: center;
margin-top: 20px;
display: none; /* 默认隐藏 */
}

复制代码

### 修改后的 JavaScript 代码

接下来，更新 `script.js` 文件，使其如下所示：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;
document.addEventListener("keydown", changeDirection);
function randomFoodPosition() {
const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
return { x, y };
}
function clearCanvas() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
// 检测碰壁
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
gameOver = true;
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
food = randomFoodPosition();
} else {
snake.pop();
}
}
function collision(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 main() {
if (gameOver) {
displayGameOver();
return;
}
setTimeout(function onTick() {
clearCanvas();
drawFood();
moveSnake();
drawSnake();
main();
}, 100);
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
// 显示游戏结束
function displayGameOver() {
document.getElementById('gameOverText').classList.remove('hidden');
document.getElementById('score').innerText = score;
document.getElementById('startButton').style.display = 'block';
}
function startGame() {
snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }];
score = 0;
dx = 10;
dy = 0;
gameOver = false;
food = randomFoodPosition();
document.getElementById('gameOverText').classList.add('hidden');
document.getElementById('startButton').style.display = 'none';
main();
}
food = randomFoodPosition();
main();

复制代码

### 解释调整内容：

1. **HTML**：
- 添加了一个用于显示“很遗憾！游戏结束”和得分信息的 `<span id="score"></span>`。

2. **CSS**：
- 添加了 `#gameOverText` 的样式，确保它在需要的时候显示，并且居中显示文本。

3. **JavaScript**：
- 在 `displayGameOver` 函数中更新了 `gameOverText` 的内容以包含得分。
- 确保游戏结束时，“游戏结束！”信息和按钮一同显示。

现在，当游戏结束时，会显示“很遗憾！游戏结束”并显示得分，同时“开始游戏”按钮也会出现在下方。希望这些修改能满足你的需求！如果还有其他问题，请随时告诉我哦！