用html写个贪吃蛇代码
时间: 2024-01-05 22:44:32 浏览: 27
以下是一个简单的 HTML 贪吃蛇代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇</title>
<style>
#game-board {
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="game-board"></div>
<script>
// 游戏设置
const boardSize = 400; // 游戏面板大小
const unitSize = 10; // 每个单元格的大小
// 创建贪吃蛇和食物
let snake = [{x: 0, y: 0}];
let food = {x: 0, y: 0};
let direction = 'right';
// 随机生成食物位置
function generateFood() {
food.x = Math.floor(Math.random() * (boardSize / unitSize)) * unitSize;
food.y = Math.floor(Math.random() * (boardSize / unitSize)) * unitSize;
}
// 更新贪吃蛇位置
function updateSnake() {
// 移动蛇的身体
for (let i = snake.length - 1; i > 0; i--) {
snake[i].x = snake[i - 1].x;
snake[i].y = snake[i - 1].y;
}
// 移动蛇的头部
if (direction === 'right') {
snake[0].x += unitSize;
} else if (direction === 'left') {
snake[0].x -= unitSize;
} else if (direction === 'up') {
snake[0].y -= unitSize;
} else if (direction === 'down') {
snake[0].y += unitSize;
}
}
// 检查是否吃到食物
function checkFood() {
if (snake[0].x === food.x && snake[0].y === food.y) {
snake.push({x: snake[snake.length - 1].x, y: snake[snake.length - 1].y});
generateFood();
}
}
// 检查是否碰到边界或自己的身体
function checkCollision() {
if (snake[0].x < 0 || snake[0].x >= boardSize || snake[0].y < 0 || snake[0].y >= boardSize) {
clearInterval(gameInterval);
alert('游戏结束!');
location.reload();
}
for (let i = 1; i < snake.length; i++) {
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
clearInterval(gameInterval);
alert('游戏结束!');
location.reload();
}
}
}
// 渲染贪吃蛇和食物
function render() {
// 清空游戏面板
document.getElementById('game-board').innerHTML = '';
// 渲染食物
let foodElement = document.createElement('div');
foodElement.className = 'food';
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
document.getElementById('game-board').appendChild(foodElement);
// 渲染贪吃蛇
for (let i = 0; i < snake.length; i++) {
let snakeElement = document.createElement('div');
snakeElement.className = 'snake';
snakeElement.style.left = snake[i].x + 'px';
snakeElement.style.top = snake[i].y + 'px';
document.getElementById('game-board').appendChild(snakeElement);
}
}
// 处理键盘事件
document.addEventListener('keydown', function(event) {
if (event.code === 'ArrowRight' && direction !== 'left') {
direction = 'right';
} else if (event.code === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
} else if (event.code === 'ArrowUp' && direction !== 'down') {
direction = 'up';
} else if (event.code === 'ArrowDown' && direction !== 'up') {
direction = 'down';
}
});
// 主循环
let gameInterval = setInterval(function() {
updateSnake();
checkFood();
checkCollision();
render();
}, 100);
// 初始化游戏
generateFood();
render();
</script>
</body>
</html>
```
注释已经写得比较详细了,这里简单介绍一下代码的实现逻辑:
- 首先定义了游戏面板大小、单元格大小、贪吃蛇、食物和当前方向等变量;
- 在 `generateFood()` 函数中随机生成食物位置;
- 在 `updateSnake()` 函数中更新贪吃蛇位置;
- 在 `checkFood()` 函数中检查是否吃到食物;
- 在 `checkCollision()` 函数中检查是否碰到边界或自己的身体;
- 在 `render()` 函数中渲染贪吃蛇和食物;
- 在 `document.addEventListener()` 中处理键盘事件,改变当前方向;
- 在主循环中不断调用上述函数,并每隔一段时间重新渲染游戏面板;
- 最后在页面加载完成后初始化游戏,生成食物并渲染游戏面板。
这只是一个非常简单的示例,实际上还有很多方面可以优化和改进,比如添加计分系统、增加难度等等。