黄俊轩贪吃蛇游戏

黄俊轩 · 发表于 2025-9-30 10:05:54

帮我生成一个贪吃蛇游戏的网页代码

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

当你制作一个贪吃蛇游戏的网页时，你需要用到HTML、CSS和JavaScript来实现游戏的功能。下面是一个简单的贪吃蛇游戏的网页代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
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>
const gameBoard = document.getElementById('game-board');
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let direction = 'right';
function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = segment.y / 20;
snakeElement.style.gridColumnStart = segment.x / 20;
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
});
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.gridRowStart = food.y / 20;
foodElement.style.gridColumnStart = food.x / 20;
foodElement.id = 'food';
gameBoard.appendChild(foodElement);
}
function moveSnake() {
const head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case 'up':
head.y -= 20;
break;
case 'down':
head.y += 20;
break;
case 'left':
head.x -= 20;
break;
case 'right':
head.x += 20;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
// Snake eats the food
food.x = Math.floor(Math.random() * 20) * 20;
food.y = Math.floor(Math.random() * 20) * 20;
} else {
// Remove tail
snake.pop();
}
}
function changeDirection(event) {
const key = event.key;
if (key === 'ArrowUp' && direction !== 'down') {
direction = 'up';
} else if (key === 'ArrowDown' && direction !== 'up') {
direction = 'down';
} else if (key === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
} else if (key === 'ArrowRight' && direction !== 'left') {
direction = 'right';
}
}
drawFood();
drawSnake();
document.addEventListener('keydown', changeDirection);
setInterval(() => {
moveSnake();
drawSnake();
}, 100);
</script>
</body>
</html>

复制代码

在这个示例中，我使用了一个简单的游戏板`game-board`，用绿色方块表示蛇，红色方块表示食物。通过控制蛇的移动方向和吃食物来实现游戏的功能。希望这个示例对你有帮助，你可以根据自己的需求进行修改和扩展。祝你玩得开心！