效果图:
需求分析:
1、在四个赛道随记生成路人小车,其运动速度随用户生存的时间增加而增加
2、用户可以通过方向键或者A、D键控制用户小车左右移动,躲避路人小车
3、当路人小车与用户小车碰撞,游戏结束
素材图片:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>赛车游戏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#bg {
position: relative;
margin: 0 auto;
width: 320px;
background: url(racing.png) repeat-y;
}
.box, #mybox {
position: absolute;
width: 45px;
height: 60px;
background-color: #333;
}
#mybox {
background-color: red;
}
</style>
</head>
<body>
<div id="bg">
<div id="mybox"></div>
<script>
window.onload = function () {
alert('使用左右方向键或者A,D字母控制小车左右移动\n\n点击确定按钮开始游戏')
// 捕获背景(父元素)
var bg = this.document.getElementById('bg');
// 获取屏幕高度,赋予背景
var h = this.document.documentElement.clientHeight;
var w = bg.clientWidth;
bg.style.height = h + 'px';
// 生成box
function createBox() {
var box = this.document.createElement('div')
box.setAttribute('class', 'box');
// 生成的位置---> 22;88;172;238 四个赛道随机生成
var randNum = Math.random();
var deltai = (((w - 20) / 4) - boxw) / 2;
var i = deltai + 10; // 起始横坐标
if (randNum < 0.25) {
box.style.left = i + 'px';
} else if (randNum >= 0.25 && randNum < 0.5) {
box.style.left = i + boxw + (2 * deltai) + 'px';
} else if (randNum >= 0.5 && randNum < 0.75) {
box.style.left = i + (2 * boxw) + (4 * deltai) + 'px';
} else {
box.style.left = i + (3 * boxw) + (6 * deltai) + 'px';
};
bg.appendChild(box);
moveBox(box); // 为每个box绑定对象
end(box);
};
// 每隔t毫秒向父元素添加一个box
var t = 1500;
function add() {
// console.log('add');
createBox();
};
setInterval(function () {
add();
}, t);
// 使得每个box运动起来
var deltaX = 1;
var time = 10;
function moveBox(obj) {
deltaX += 0.1;
var pos = 0;
var id = setInterval(move, time);
function move() {
if (pos == (h - boxh)) {
clearInterval(id);
bg.removeChild(obj); // 移除运动到底的box
} else {
pos += deltaX;
obj.style.top = pos + 'px';
}
}
}
// 加入自定义小车
var mybox = this.document.getElementById('mybox');
var boxh = mybox.clientHeight;
var boxw = mybox.clientWidth;
// 指定初始位置
mybox.style.top = h - boxh - 10 + 'px';
mybox.style.left = w / 2 + 'px';
var speed = 10;
function moveLeft() {
if (mybox.offsetLeft >= 25) {
mybox.style.left = mybox.offsetLeft - speed + 'px';
}
};
function moveRight() {
if (mybox.offsetLeft <= w - boxw - 20) {
mybox.style.left = mybox.offsetLeft + speed + 'px';
}
};
var sensitivity = 30; // 控制方向灵敏度,越小越灵敏
setInterval(function () {
switch (dir) {
case 65:
moveLeft();
break;
case 37:
moveLeft();
break;
case 68:
moveRight();
break;
case 39:
moveRight();
break;
}
}, sensitivity);
// 边缘判断
function end(obj) {
var v = deltaX / time;
var x = h - 10 - 2 * boxh;
var t = x / v;
setTimeout(function () {
var deltaMin = obj.offsetLeft;
var deltaMax = obj.offsetLeft + boxw;
if (mybox.offsetLeft <= deltaMax && mybox.offsetLeft >= deltaMin) {
alert('Game End');
window.location.reload();
}
}, t + 300);
};
// 绑定键盘事件
this.document.onkeydown = function (event) {
event = event || window.event;
// up 38 w 87;down 40 s 83;left 37 a 65;right 39 d 68
dir = event.keyCode;
};
this.document.onkeyup = function () {
dir = 0;
};
}
</script>
</div>
</body>
</html>