林奕锦

林奕锦 · 发表于 2024-7-12 09:59:15

kaia 发表于 2024-7-12 09:44
当然可以！以下是一个简化版的贪吃蛇游戏的网页代码，包含HTML、CSS和JavaScript：

**HTML（index.html ...

你好，请问可不可以在这个代码的基础上增加更丰富的背景，更生动的角色，有开始按钮和结束提示

kaia · 发表于 2024-7-12 09:59:58

林奕锦发表于 2024-07-12 09:59
你好，请问可不可以在这个代码的基础上增加更丰富的背 ...

当然可以！我们可以对现有代码进行一些改进，增加一个开始按钮、结束提示，以及更丰富的背景和角色。以下是更新后的代码：

### 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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startButton">开始游戏</button>
<div id="gameOverMessage"></div>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

### CSS（style.css）

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.game-container {
text-align: center;
}
canvas {
border: 1px solid #000;
background-image: url('background.png'); /* 更丰富的背景图 */
background-size: cover;
}
#startButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#gameOverMessage {
margin-top: 20px;
font-size: 18px;
color: red;
}

复制代码

### JavaScript（script.js）

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20;
let snake;
let food;
let score;
let direction;
let gameInterval;
const startButton = document.getElementById('startButton');
const gameOverMessage = document.getElementById('gameOverMessage');
startButton.addEventListener('click', startGame);
document.addEventListener('keydown', setDirection);
function startGame() {
// 初始化游戏参数
snake = [{ x: 9 * box, y: 10 * box }];
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
score = 0;
direction = null;
gameOverMessage.innerHTML = '';
if (gameInterval) {
clearInterval(gameInterval);
}
gameInterval = setInterval(draw, 100);
}
function setDirection(event) {
const key = event.keyCode;
if (key == 37 && direction != 'RIGHT') {
direction = 'LEFT';
} else if (key == 38 && direction != 'DOWN') {
direction = 'UP';
} else if (key == 39 && direction != 'LEFT') {
direction = 'RIGHT';
} else if (key == 40 && direction != 'UP') {
direction = 'DOWN';
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
const snakePart = new Image();
snakePart.src = i === 0 ? 'head.png' : 'body.png'; // 更生动的蛇头和蛇身
ctx.drawImage(snakePart, snake[i].x, snake[i].y, box, box);
}
const foodImg = new Image();
foodImg.src = 'food.png'; // 更生动的食物
ctx.drawImage(foodImg, food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction == 'LEFT') snakeX -= box;
if (direction == 'UP') snakeY -= box;
if (direction == 'RIGHT') snakeX += box;
if (direction == 'DOWN') snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(gameInterval);
gameOverMessage.innerHTML = `游戏结束. 得分: ${score}`;
}
snake.unshift(newHead);
ctx.fillStyle = 'black';
ctx.font = '45px Changa one';
ctx.fillText(score, box, 1.5 * box);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x == array[i].x && head.y == array[i].y) {
return true;
}
}
return false;
}

复制代码

### 补充图片资源
为了这个例子更生动，你可以使用以下图片资源：
- `background.png`：游戏背景图
- `head.png`：蛇头图
- `body.png`：蛇身图
- `food.png`：食物图

将这些图片放在与HTML文件相同的目录下，确保它们的文件名和代码中的一致。

以上就是完整的贪吃蛇游戏代码，包含更丰富的背景、更生动的角色、开始按钮和结束提示。你可以将这些代码复制到相应的文件中然后通过浏览器打开`index.html`来运行这个游戏。祝你游戏愉快！

林奕锦 · 发表于 2024-7-12 10:06:26

你好，请帮我生成一个贪吃蛇游戏的网页代码，用html、css、js来完成

kaia · 发表于 2024-7-12 10:07:12

林奕锦发表于 2024-07-12 10:06
你好，请帮我生成一个贪吃蛇游戏的网页代码，用html、 ...

好的，这里是一个完整的贪吃蛇游戏示例，包括HTML、CSS和JavaScript代码。这个版本的游戏加入了开始按钮、结束提示和基本的背景及角色。

### 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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startButton">开始游戏</button>
<div id="gameOverMessage"></div>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

### CSS（style.css）

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.game-container {
text-align: center;
}
canvas {
border: 1px solid #000;
background-color: #eee; /* 可以替换为背景图片 */
}
#startButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#gameOverMessage {
margin-top: 20px;
font-size: 18px;
color: red;
}

复制代码

### JavaScript（script.js）

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20;
let snake;
let food;
let score;
let direction;
let gameInterval;
const startButton = document.getElementById('startButton');
const gameOverMessage = document.getElementById('gameOverMessage');
startButton.addEventListener('click', startGame);
document.addEventListener('keydown', setDirection);
function startGame() {
// 初始化游戏参数
snake = [{ x: 9 * box, y: 9 * box }];
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
score = 0;
direction = null;
gameOverMessage.innerHTML = '';
if (gameInterval) {
clearInterval(gameInterval);
}
gameInterval = setInterval(draw, 100);
}
function setDirection(event) {
const key = event.keyCode;
if (key == 37 && direction != 'RIGHT') {
direction = 'LEFT';
} else if (key == 38 && direction != 'DOWN') {
direction = 'UP';
} else if (key == 39 && direction != 'LEFT') {
direction = 'RIGHT';
} else if (key == 40 && direction != 'UP') {
direction = 'DOWN';
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = i === 0 ? 'green' : 'white';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = 'red';
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction == 'LEFT') snakeX -= box;
if (direction == 'UP') snakeY -= box;
if (direction == 'RIGHT') snakeX += box;
if (direction == 'DOWN') snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(gameInterval);
gameOverMessage.innerHTML = `游戏结束. 得分: ${score}`;
}
snake.unshift(newHead);
ctx.fillStyle = 'black';
ctx.font = '45px Changa one';
ctx.fillText(score, box, 1.5 * box);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x == array[i].x && head.y == array[i].y) {
return true;
}
}
return false;
}
startGame();

复制代码

上面的代码可以放在三个独立的文件中。你可以用更生动的图像来替换背景、蛇头、蛇身和食物。如果你没有这些图像，也可以选择颜色填充的方式展示蛇和食物。你只需要将这些文件保存在同一个目录下，然后在浏览器中打开`index.html`来启动游戏。

游戏开始时，点击“开始游戏”按钮进行游戏，每次游戏结束后会显示得分。这样，你就具备了一个完整的、有开始按钮和结束提示的贪吃蛇游戏。希望你喜欢这个小游戏！