赛车
更多原生js小项目，参见本人GitHub—Aguang5241
赛车改良版参见赛车游戏改良版
利用js实现以下功能：
在四个赛道随记生成路人小车，其运动速度随用户生存的时间增加而增加用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路人小车当路人小车与用户小车碰撞，游戏结束
效果展示
源代码
html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/street.css"><script src="js/street.js"></script><title>Document</title></head><body><div id="bg"><div id="mybox"></div></div></body></html>
css
* {margin: 0;padding: 0;}body {text-align: center;}#bg {position: relative;margin: 0 auto;width: 320px;background: url(../img/racing.png) repeat-y;}.box, #mybox {position: absolute;width: 45px;height: 60px;background-color: #333;}#mybox {background-color: red;}
javascript
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';// 生成boxfunction 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.left = Math.floor(Math.random() * 270) + 'px'; // 此处无法修改270bg.appendChild(box);// console.log(box.clientWidth);moveBox(box); // 为每个box绑定对象end(box);};// 每隔t毫秒向父元素添加一个boxvar 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 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 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);};// 绑定键盘事件this.document.onkeydown = function (event) {event = event || window.event;// up 38 w 87；down 40 s 83；left 37 a 65；right 39 d 68dir = event.keyCode;};this.document.onkeyup = function () {dir = 0;};}
背景图片资源：
