章宏睿贪吃蛇

金外章宏睿 · 发表于 2025-9-30 15:24:12

帮我生成一个贪吃蛇网页游戏代码，html,css,js

kaia · 发表于 2025-9-30 15:24:27

当我们设计一个贪吃蛇游戏时，首先要明确几个部分：蛇的身体、食物、移动方向、吃到食物后的处理等。我们可以使用HTML、CSS和JavaScript来实现这个小游戏。

首先，让我们从HTML开始。在HTML中我们需要一个画布用来绘制游戏，以及一些基本的结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

接下来是CSS，我们可以简单设置一下画布大小：

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#gameCanvas {
border: 1px solid black;
}

复制代码

最后，我们来编写JavaScript，实现蛇的移动和吃食物等功能：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 10;
let snake = [
{ x: 20, y: 20 },
{ x: 10, y: 20 },
{ x: 0, y: 20 }
];
let food = { x: 15, y: 15 };
let dx = 10;
let dy = 0;
function drawSnakePart(snakePart) {
ctx.fillStyle = 'green';
ctx.fillRect(snakePart.x * snakeSize, snakePart.y * snakeSize, snakeSize, snakeSize);
}
function changeDirection(event) {
const left = 37, up = 38, right = 39, down = 40;
if (event.keyCode === left && dx !== 10) { dx = -10; dy = 0; }
if (event.keyCode === up && dy !== 10) { dx = 0; dy = -10; }
if (event.keyCode === right && dx !== -10) { dx = 10; dy = 0; }
if (event.keyCode === down && dy !== -10) { dx = 0; dy = 10; }
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
createFood();
} else {
snake.pop();
}
}
function createFood() {
food.x = Math.floor(Math.random() * canvas.width / snakeSize);
food.y = Math.floor(Math.random() * canvas.height / snakeSize);
}
function checkGameEnd() {
if (snake[0].x < 0 || snake[0].x >= canvas.width / snakeSize || snake[0].y < 0 || snake[0].y >= canvas.height / snakeSize || checkCollision()) {
clearInterval(gameLoop);
alert('游戏结束！');
}
}
function checkCollision() {
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
return true;
}
}
return false;
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x * snakeSize, food.y * snakeSize, snakeSize, snakeSize);
}
document.addEventListener('keydown', changeDirection);
let gameLoop = setInterval(() => {
moveSnake();
checkGameEnd();
drawGame();
}, 100);

复制代码

这样，我们就完成了一个简单的贪吃蛇游戏代码。玩家通过键盘控制蛇的移动方向，蛇会不断移动，吃到食物后身体会增长。当蛇碰到墙壁或者自己的身体时游戏结束。希望你能够成功运行这个小游戏，享受编程的乐趣！

金外章宏睿 · 发表于 2025-11-4 09:05:41

帮我修改代码,将字体颜色改成绿色

kaia · 发表于 2025-11-4 09:05:49

金外章宏睿发表于 2025-11-04 09:05
帮我修改代码,将字体颜色改成绿色

当修改字体颜色时，我们需要在CSS样式中为游戏添加一个样式属性。你可以按照下面的方式将文字颜色改成绿色：

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: green; /* 修改字体颜色为绿色 */
}
#gameCanvas {
border: 1px solid black;
}

复制代码

通过上面的修改，你可以把网页游戏中的字体颜色改成绿色，让整个页面看起来更加生动活泼。希望对你有帮助！如果还有其他问题，欢迎继续提问。