QIANHAOWEN

QIANHAOWEN · 发表于 2025-10-9 12:01:35

帮我做1个贪吃蛇的网页代码

kaia · 发表于 2025-10-9 12:01:47

当我们创建一个贪吃蛇游戏的网页时，首先需要了解一些基本的网页编程知识。你可以使用 HTML 来定义页面的结构，使用 CSS 来设置页面的样式，使用 JavaScript 来控制游戏的逻辑。

首先，我们来创建一个简单的贪吃蛇游戏的网页代码示例:

1. 创建一个 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>
/* 设置游戏区域样式 */
#gameBoard {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
/* 设置蛇身和食物样式 */
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="gameBoard"></div>
<script src="snake.js"></script>
</body>
</html>

复制代码

2. 创建一个 JavaScript 文件，命名为 snake.js，代码如下：

const gameBoard = document.getElementById('gameBoard');
let snake = [{ x: 10, y: 10 }];
let food = { x: 200, y: 200 };
let dx = 0;
let dy = 0;
function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
});
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
function updateSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
// 吃到食物，增加蛇身长度
food.x = Math.floor(Math.random() * 40) * 10;
food.y = Math.floor(Math.random() * 40) * 10;
} else {
snake.pop();
}
}
document.addEventListener('keydown', e => {
switch(e.key) {
case 'ArrowUp':
dx = 0; dy = -10; break;
case 'ArrowDown':
dx = 0; dy = 10; break;
case 'ArrowLeft':
dx = -10; dy = 0; break;
case 'ArrowRight':
dx = 10; dy = 0; break;
}
});
function main() {
updateSnake();
drawSnake();
drawFood();
}
setInterval(main, 100);

复制代码

通过以上代码，我们就实现了一个简单的贪吃蛇游戏，玩家可以通过上下左右方向键控制蛇的移动，吃到食物后蛇的长度会增加。希望这个简单的示例能帮助你开始做一个属于自己的贪吃蛇游戏！如果有任何问题，欢迎继续提问哦。