用js实现贪吃蛇游戏
时间: 2024-02-01 18:15:12 浏览: 22
以下是一个简单的贪吃蛇游戏示例,使用纯 JavaScript 编写:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
width: 20px;
height: 20px;
position: absolute;
background-color: green;
}
.food {
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script src="snake.js"></script>
</body>
</html>
```
JavaScript 代码:
```javascript
var board = document.getElementById("game-board");
var snake = [{ x: 200, y: 200 }];
var food = null;
var direction = "right";
var intervalId = null;
function draw() {
// 清空画布
board.innerHTML = "";
// 绘制贪吃蛇
snake.forEach(function(segment) {
var element = document.createElement("div");
element.className = "snake";
element.style.left = segment.x + "px";
element.style.top = segment.y + "px";
board.appendChild(element);
});
// 绘制食物
if (!food) {
var x = Math.floor(Math.random() * 20) * 20;
var y = Math.floor(Math.random() * 20) * 20;
food = { x: x, y: y };
}
var element = document.createElement("div");
element.className = "food";
element.style.left = food.x + "px";
element.style.top = food.y + "px";
board.appendChild(element);
}
function move() {
// 移动贪吃蛇
var head = snake[0];
switch (direction) {
case "up":
snake.unshift({ x: head.x, y: head.y - 20 });
break;
case "down":
snake.unshift({ x: head.x, y: head.y + 20 });
break;
case "left":
snake.unshift({ x: head.x - 20, y: head.y });
break;
case "right":
snake.unshift({ x: head.x + 20, y: head.y });
break;
}
// 判断是否吃到食物
if (head.x === food.x && head.y === food.y) {
food = null;
} else {
snake.pop();
}
// 判断是否碰到边界或自身
var headX = snake[0].x;
var headY = snake[0].y;
if (headX < 0 || headX >= 400 || headY < 0 || headY >= 400) {
clearInterval(intervalId);
alert("游戏结束!");
} else {
for (var i = 1; i < snake.length; i++) {
if (snake[i].x === headX && snake[i].y === headY) {
clearInterval(intervalId);
alert("游戏结束!");
break;
}
}
}
draw();
}
document.addEventListener("keydown", function(event) {
switch (event.keyCode) {
case 37:
direction = "left";
break;
case 38:
direction = "up";
break;
case 39:
direction = "right";
break;
case 40:
direction = "down";
break;
}
});
intervalId = setInterval(move, 100);
```
这个示例中,游戏画面由一个 `<div>` 元素表示。贪吃蛇和食物都是由 `<div>` 元素表示,其样式通过 CSS 控制。通过 JavaScript 实现了贪吃蛇的移动、吃到食物、撞到边界或自身等基本功能,并使用定时器实现了游戏的持续进行。