html躲避方块小游戏
时间: 2023-07-01 17:18:24 浏览: 62
HTML躲避方块小游戏是一款基于HTML、CSS和JavaScript开发的小游戏,玩家需要控制一个小方块在不断向上移动的屏幕中躲避障碍物,直到到达终点。
下面是一个简单的HTML躲避方块小游戏的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>躲避方块小游戏</title>
<style>
#player {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
#obstacle {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="player"></div>
<div id="obstacle"></div>
<script>
var player = document.getElementById("player");
var obstacle = document.getElementById("obstacle");
var speed = 5;
var score = 0;
function moveObstacle() {
var randomPosition = Math.floor(Math.random() * 500) + 1; // 随机生成障碍物的位置
obstacle.style.top = "0px";
obstacle.style.left = randomPosition + "px";
}
function gameLoop() {
var playerTop = parseInt(player.style.top);
var obstacleTop = parseInt(obstacle.style.top);
var obstacleLeft = parseInt(obstacle.style.left);
if (playerTop <= obstacleTop + 50 && playerTop + 50 >= obstacleTop && obstacleLeft <= 50 && obstacleLeft + 50 >= 0) {
alert("游戏结束,得分:" + score);
location.reload();
} else {
score++;
document.getElementById("score").innerHTML = "得分:" + score;
}
player.style.top = (playerTop - speed) + "px";
obstacle.style.top = (obstacleTop + speed) + "px";
if (obstacleTop >= 500) {
moveObstacle();
}
}
setInterval(gameLoop, 50);
setInterval(moveObstacle, 3000);
</script>
<div id="score">得分:0</div>
</body>
</html>
```
这段代码中,我们使用了HTML的div元素来模拟游戏中的玩家和障碍物,使用CSS来设置它们的样式和位置,使用JavaScript来实现游戏逻辑。玩家通过键盘控制小方块的上下移动,障碍物则在屏幕上不断向下移动并随机改变位置。当玩家与障碍物相撞时,游戏结束,得分为玩家成功躲避的时间,玩家可以选择重新开始游戏。