朱益佳贪吃蛇游戏

朱益佳 · 发表于 2025-9-30 09:55:37

帮我生成贪吃蛇游戏代码

kaia · 发表于 2025-9-30 09:55:49

当创建一个贪吃蛇游戏时，我们需要使用HTML、CSS和JavaScript来实现游戏界面和游戏逻辑。下面是一个简单的示例代码，你可以在浏览器中运行它来玩贪吃蛇游戏。

首先是HTML部分:

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake-body {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script src="snake-game.js"></script>
</body>
</html>

复制代码

接着是JavaScript部分，将以下代码保存为`snake-game.js`文件:

const gameBoard = document.getElementById('game-board');
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let score = 0;
let dx = 0;
let dy = 0;
function main() {
if (isGameOver()) {
alert('游戏结束！得分：' + score);
return;
}
updateSnake();
drawSnake();
drawFood();
setTimeout(main, 100);
}
function isGameOver() {
if (snake[0].x < 0 || snake[0].x >= gameBoard.clientWidth || snake[0].y < 0 || snake[0].y >= gameBoard.clientHeight) {
return true;
}
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 updateSnake() {
const newHead = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(newHead);
if (newHead.x === food.x && newHead.y === food.y) {
score += 10;
generateFood();
} else {
snake.pop();
}
}
function drawSnake() {
while (gameBoard.firstChild) {
gameBoard.removeChild(gameBoard.firstChild);
}
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.left = segment.x + 'px';
snakeElement.style.top = segment.y + 'px';
snakeElement.classList.add('snake-body');
gameBoard.appendChild(snakeElement);
});
}
function generateFood() {
food.x = Math.floor(Math.random() * gameBoard.clientWidth / 20) * 20;
food.y = Math.floor(Math.random() * gameBoard.clientHeight / 20) * 20;
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowUp' && dy !== 20) {
dx = 0;
dy = -20;
}
if (e.key === 'ArrowDown' && dy !== -20) {
dx = 0;
dy = 20;
}
if (e.key === 'ArrowLeft' && dx !== 20) {
dx = -20;
dy = 0;
}
if (e.key === 'ArrowRight' && dx !== -20) {
dx = 20;
dy = 0;
}
});
generateFood();
main();

复制代码

这样，你就可以在浏览器中玩到简单的贪吃蛇游戏了。在游戏中，你控制蛇的移动方向，吃到食物加分，但要注意避免蛇撞墙或撞到自己哦！希望你玩得开心！

朱益佳 · 发表于 2025-9-30 10:05:46

帮我分类成html、css、js

kaia · 发表于 2025-9-30 10:06:01

朱益佳发表于 2025-09-30 10:05
帮我分类成html、css、js

当创建一个贪吃蛇游戏时，我们可以将代码分成HTML、CSS和JavaScript三个部分来实现游戏界面和游戏逻辑。

首先是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 id="game-board"></div>
<script src="snake-game.js"></script>
</body>
</html>

复制代码

接着是CSS部分，用于样式设计：

#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake-body {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}

复制代码

最后是JavaScript部分，用于实现游戏逻辑：

const gameBoard = document.getElementById('game-board');
let snake = [];
let food = {x: 0, y: 0};
let score = 0;
let dx = 0;
let dy = 0;
// 其他 JavaScript 代码在这里
document.addEventListener('keydown', e => {
if (e.key === 'ArrowUp' && dy !== 20) {
dx = 0;
dy = -20;
}
if (e.key === 'ArrowDown' && dy !== -20) {
dx = 0;
dy = 20;
}
if (e.key === 'ArrowLeft' && dx !== 20) {
dx = -20;
dy = 0;
}
if (e.key === 'ArrowRight' && dx !== -20) {
dx = 20;
dy = 0;
}
});
generateFood();
main();

复制代码

将以上三部分分别保存为`index.html`、`style.css`和`snake-game.js`文件，并放在同一个文件夹内。然后在浏览器中打开`index.html`文件，就可以开始玩贪吃蛇游戏了。希望你玩得开心！

280 · 发表于 2025-11-4 09:46:01

帮我报CSS变成紫色。

280 · 发表于 2025-11-4 09:48:34

帮我把CSS变成紫色。

朱益佳 · 发表于 2025-11-4 09:54:35

#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}

.snake-body {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}

.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
帮我把字体变成紫色。

朱益佳 · 发表于 2025-11-4 09:59:46

#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}

.snake-body {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}

.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}帮我把字体变成紫色。

朱益佳 · 发表于 2025-11-11 09:38:55

function drawSnake() {
context.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach(part => {
context.fillStyle = "green";
context.fillRect(part.x, part.y, gridSize, gridSize);
});
}这段话大概什么意思

丁香仪 · 发表于 2025-11-11 09:45:44

在js文件中修改初始化参数