赛车(改良版)
利用js实现以下功能：
在四个赛道随记生成路障，其移动速度随用户生存的时间增加而增加
用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路障
当路障与用户小车碰撞，游戏结束
实时记录和显示生存时间以及所得分数
效果展示
在这里插入图片描述
源代码
html
Document
Score: 0
Time: 0s
css
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#background {
margin: 0 auto;
width: 1000px;
background: url(../img/bg.jpg) no-repeat #5f5762;
background-position: center;
border-radius: 50px;
}
#band {
margin: 0 auto;
margin-top: 15px;
width: 300px;
height: 100px;
background-color: #333;
border-radius: 15px;
font-size: 25px;
line-height: 50px;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
color: #fff;
}
#bgImg {
position: relative;
}
#bg {
position: relative;
margin: 0px auto;
width: 320px;
background-color: #5d7182;
overflow: hidden;
/* background: url(../img/racing.png) repeat-y; */
opacity: 0.98;
}
.box, #mybox {
position: absolute;
width: 45px;
height: 60px;
background-color: #333;
/* opacity: 1; */
}
#mybox {
/* background-color: red; */
background: url(../img/mycar.png);
}
javascript
window.onload = function () {
alert('使用左右方向键或者A,D字母控制小车左右移动\n\n点击确定按钮开始游戏')
// 捕获背景(父元素)
var bg = this.document.getElementById('bg');
var background = this.document.getElementById('background');
var bgImg = this.document.getElementById('bgImg');
// 获取屏幕高度,赋予背景
var h = this.document.documentElement.clientHeight / 1.25;
var w = bg.clientWidth;
var carsBg = ['url(../img/block1.png)'];
bg.style.height = h + 'px';
bgImg.style.top = -(bgImg.clientHeight - h + 10) + 'px';
background.style.height = document.documentElement.clientHeight + 'px';
var score = this.document.getElementById('score');
var timeLast = this.document.getElementById('timeLast');
// 生成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; // 起始横坐标
// console.log(randNum);
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';
};
box.style.background = carsBg[Math.floor(Math.random() * carsBg.length)];
bg.appendChild(box);
moveBox(box); // 为每个box绑定对象
var carNum = document.querySelectorAll('.box').length;
if (carNum < 6) {
intervalTime -= 50;
clearInterval(timer);
if (intervalTime < 0) {
intervalTime = 10;
};
if (intervalTime > 0) {
timer = setInterval(add, intervalTime);
// console.log(intervalTime);
};
};
};
// 统计游戏时间
var timeLastNum = 0;
setInterval(function () {
timeLastNum++;
timeLast.innerHTML = 'Time: ' + timeLastNum + 's';
}, 1000)
// 当屏幕数量的车辆小于3辆时生成车辆
// 初始每隔1s判断数量，添加小车，每次最多添加3辆
// 每当车辆总数小于3时，同时减少生成车辆的时间间隔
var intervalTime = 2000;
// 需要正确关闭！！！
function add() {
createBox(); // 生成第1辆
createBox(); // 生成第2辆
createBox(); // 生成第3辆
};
var timer = setInterval(add, intervalTime);
// 设置移动背景
movebg();
function movebg() {
var timerS = setInterval(moveStreet, time);
function moveStreet() {
var pos = bgImg.offsetTop;
pos += deltaX;
if (pos > 0) {
bgImg.style.top = -(bgImg.clientHeight - h) + 'px';
} else {
clearInterval(timerS);
bgImg.style.top = pos + 'px';
timerS = setInterval(moveStreet, time);
}
}
}
// 使得每个box运动起来
var deltaX = 1;
var time = 5;
var scoreNum = 0;
function moveBox(obj) {
// bgImg.style.top = -(bgImg.clientHeight - h) + 'px';
deltaX += 0.01; // 加速度运动
var pos = 0;
var id = setInterval(move, time);
function move() {
if (pos > (h - boxh * 1.2)) {
pos = h - boxh * 1.2;
if (pos == (h - boxh * 1.2)) {
clearInterval(id);
bg.removeChild(obj); // 移除运动到底的box
scoreNum++;
score.innerHTML = 'Score: ' + scoreNum;
}
} else {
pos += deltaX;
obj.style.top = pos + 'px';
// 死亡判断！！！
// if (obj.offsetTop > h - 10 - 2 * boxh) {
// if ((mybox.offsetLeft > obj.offsetLeft - boxw) && (mybox.offsetLeft < obj.offsetLeft + boxw)) {
// alert('游戏结束\n最终得分：' + scoreNum + '分' + '\n存活时间：' + timeLastNum + 's');
// window.location.reload(true);
// }
// }
};
// bgImg.style.top = -(bgImg.clientHeight - h) + 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 moveUp() {
// // console.log('Up');
// mybox.style.top = mybox.offsetTop - speed + 'px';
// };
// function moveDown() {
// // console.log('Down');
// mybox.style.top = mybox.offsetTop + speed + 'px';
// };
function moveLeft() {
// console.log('Left');
if (mybox.offsetLeft >= 25) {
mybox.style.left = mybox.offsetLeft - speed + 'px';
}
};
function moveRight() {
// console.log('Right');
if (mybox.offsetLeft <= w - boxw - 20) {
mybox.style.left = mybox.offsetLeft + speed + 'px';
}
};
var sensitivity = 30; // 控制方向灵敏度，越小越灵敏
setInterval(function () {
switch (dir) {
// case 87:
// moveUp();
// break;
// case 38:
// moveUp();
// break;
// case 83:
// moveDown();
// break;
// case 40:
// moveDown();
// break;
case 65:
moveLeft();
break;
case 37:
moveLeft();
break;
case 68:
moveRight();
break;
case 39:
moveRight();
break;
}
}, sensitivity);
// 边缘判断 ——————> 已改良
// function getPos(obj) {
// // setInterval(function() {
// // var left = obj.offsetLeft;
// // var top = obj.offsetTop;
// // console.log(left+ ' '+top);
// // }, 10)
// }
// 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;
// // console.log(deltaMin);
// // console.log(deltaMax);
// // console.log(mybox.offsetLeft);
// if (mybox.offsetLeft <= deltaMax && mybox.offsetLeft >= deltaMin) {
// alert('Game End');
// window.location.reload();
// }
// }, t + 300);
// };
// 绑定键盘事件
var dir = 0;
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;
};
}
mycar.png
mycar.png
block1.png
block1.png
