给我用html写个贪吃蛇的游戏
时间: 2023-12-24 16:04:30 浏览: 34
好的,以下是一个简单的贪吃蛇游戏,使用HTML、CSS和JavaScript编写:
```html
<!DOCTYPE html>
<html>
<head>
<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;
top: 0;
left: 0;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body onload="startGame()">
<div id="game-board"></div>
<script>
var board = document.getElementById("game-board");
var snake = [{x: 0, y: 0}];
var food = {x: 0, y: 0};
var direction = "right";
var gameInterval;
function startGame() {
// 初始化蛇和食物位置
snake[0].x = Math.floor(Math.random() * 19) * 20;
snake[0].y = Math.floor(Math.random() * 19) * 20;
food.x = Math.floor(Math.random() * 19) * 20;
food.y = Math.floor(Math.random() * 19) * 20;
drawSnake();
drawFood();
gameInterval = setInterval(moveSnake, 100);
}
function drawSnake() {
board.innerHTML = "";
for (var i = 0; i < snake.length; i++) {
var snakeDiv = document.createElement("div");
snakeDiv.classList.add("snake");
snakeDiv.style.top = snake[i].y + "px";
snakeDiv.style.left = snake[i].x + "px";
board.appendChild(snakeDiv);
}
}
function drawFood() {
var foodDiv = document.createElement("div");
foodDiv.classList.add("food");
foodDiv.style.top = food.y + "px";
foodDiv.style.left = food.x + "px";
board.appendChild(foodDiv);
}
function moveSnake() {
// 移动蛇头
if (direction === "right") {
snake[0].x += 20;
} else if (direction === "left") {
snake[0].x -= 20;
} else if (direction === "up") {
snake[0].y -= 20;
} else if (direction === "down") {
snake[0].y += 20;
}
// 检查是否撞到墙或自己
if (snake[0].x < 0 || snake[0].x >= 400 || snake[0].y < 0 || snake[0].y >= 400) {
clearInterval(gameInterval);
alert("游戏结束!");
return;
}
for (var i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
clearInterval(gameInterval);
alert("游戏结束!");
return;
}
}
// 检查是否吃到食物
if (snake[0].x === food.x && snake[0].y === food.y) {
// 新增蛇尾
var tail = {x: snake[snake.length - 1].x, y: snake[snake.length - 1].y};
snake.push(tail);
// 更新食物位置
food.x = Math.floor(Math.random() * 19) * 20;
food.y = Math.floor(Math.random() * 19) * 20;
drawFood();
}
// 移动蛇身
for (var i = snake.length - 1; i > 0; i--) {
snake[i].x = snake[i - 1].x;
snake[i].y = snake[i - 1].y;
}
drawSnake();
}
document.addEventListener("keydown", function(event) {
if (event.keyCode === 37 && direction !== "right") { // left
direction = "left";
} else if (event.keyCode === 38 && direction !== "down") { // up
direction = "up";
} else if (event.keyCode === 39 && direction !== "left") { // right
direction = "right";
} else if (event.keyCode === 40 && direction !== "up") { // down
direction = "down";
}
});
</script>
</body>
</html>
```
在这个示例中,我们使用了 HTML、CSS 和 JavaScript 来实现贪吃蛇游戏。游戏主面板使用了一个 div 元素,并设置了边框和大小。蛇和食物的位置通过绝对定位来实现,使用了 CSS 样式来设置它们的大小和颜色。JavaScript 代码实现了游戏逻辑,包括初始化、移动蛇、检测碰撞、更新分数等。用户通过键盘方向键来控制蛇的移动方向。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)