我需要你帮我写一个HTML的贪吃蛇程序
时间: 2023-03-15 16:19:36 浏览: 54
当然,我很乐意帮助您写一个贪吃蛇程序。下面是一个简单的HTML贪吃蛇程序的例子:
```
<!DOCTYPE html>
<html>
<head>
<style>
#game-board {
width: 500px;
height: 500px;
border: 1px solid black;
}
.snake-unit {
width: 10px;
height: 10px;
position: absolute;
background-color: green;
}
.food-unit {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<h1>HTML 贪吃蛇</h1>
<div id="game-board"></div>
<script>
// 设置游戏板的宽高
var width = 500;
var height = 500;
// 设置蛇的长度和速度
var snake = [];
var length = 5;
var speed = 100;
// 设置食物的位置
var food = {};
food.x = Math.floor(Math.random() * (width / 10)) * 10;
food.y = Math.floor(Math.random() * (height / 10)) * 10;
// 初始化蛇的位置
for (var i = length - 1; i >= 0; i--) {
snake.push({ x: i, y: 0 });
}
// 渲染游戏板
var board = document.getElementById("game-board");
for (var i = 0; i < snake.length; i++) {
var snakeUnit = document.createElement("div");
snakeUnit.className = "snake-unit";
snakeUnit.style.left = snake[i].x * 10 + "px";
snakeUnit.style.top = snake[i].y * 10 + "px";
board.appendChild(snakeUnit);
}
// 渲染食物
var foodUnit = document.createElement("div");
foodUnit.className = "food-unit";
foodUnit.style.left = food.x + "px";
foodUnit.style.top = food.y + "px";
board.appendChild(foodUnit);
// 游戏主循环
setInterval(function () {
// 移动蛇
var x = snake[0].x;
var y = snake[0].y;
x++;
snake.pop();
snake.unshift({ x: x, y: y });
//