写一篇基于web的跑酷小游戏代码
时间: 2023-12-14 12:05:15 浏览: 24
好的,以下是一个基于web的跑酷小游戏的代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>跑酷小游戏</title>
<style>
#player {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background-color: red;
}
#obstacle {
position: absolute;
left: 800px;
top: 0;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="player"></div>
<div id="obstacle"></div>
<script src="game.js"></script>
</body>
</html>
```
CSS部分:
我们定义了两个方块元素,一个代表玩家,一个代表障碍物。玩家的颜色为红色,障碍物的颜色为蓝色。两个元素都是绝对定位,初始位置不一样。
JS部分:
```
var player = document.getElementById("player");
var obstacle = document.getElementById("obstacle");
var score = 0;
var speed = 10;
function moveObstacle() {
var obstacleLeft = parseInt(obstacle.style.left);
if (obstacleLeft > -50) {
obstacle.style.left = obstacleLeft - speed + "px";
} else {
obstacle.style.left = 800 + "px";
score++;
document.getElementById("score").innerHTML = "得分:" + score;
}
}
var timer = setInterval(moveObstacle, 50);
document.onkeydown = function(event) {
if (event.keyCode == 32) {
var playerTop = parseInt(player.style.top);
player.style.top = playerTop - 50 + "px";
}
}
```
首先,我们获取了玩家和障碍物的元素对象,并定义了得分和速度两个变量。
然后,我们定义了一个函数 `moveObstacle()`,用于移动障碍物。如果障碍物还没到达屏幕左侧,就将其向左移动 `speed` 像素。否则,将其移回屏幕右侧,并增加得分。
接着,我们使用 `setInterval()` 函数来定时调用 `moveObstacle()` 函数,实现障碍物的持续移动。
最后,我们监听键盘事件,当用户按下空格键时,将玩家向上移动一段距离。注意,这里我们是通过修改 `top` 属性来实现移动的。
完整的代码可以在 `game.js` 文件中找到,将其与 HTML 文件放在同一目录下即可运行。在浏览器中打开 HTML 文件,即可开始游戏。