纯javascript实现赛车小游戏

赛车

更多原生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;};
}

背景图片资源：

纯javascript实现赛车小游戏相关推荐

用javascript编写的小游戏-打砖块
用javascript编写的小游戏-打砖块前言启发下载链接游戏功能说明代码效果演示代码后记前言这是我在CSDN发表的第一篇文章.是我在初学javascript后, 忽然来了兴致, 编 ...
html实现经典赛车小游戏
文章目录 1.设计来源 1.1 主界面 2.效果和源码 2.1 动态效果 2.2 源代码源码下载作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151 ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
【源代码】Python制作的赛车小游戏，逆行飙车
python制作的赛车小游戏,逆行飙车,通过键盘方向键控制程序运行截图源代码 import pygame, sys, time, random# pygame 初始化 pygame.init() ...
[Unity] 制作游戏赛车小游戏
模拟赛车小游戏效果展示做一款模拟赛车的小游戏demo,方向键控制.有刹车.重玩,还有漂移和查看车型的功能可以看到,还有翻车的效果哈哈哈!有兴趣的小伙伴来看看吧! 资源准备从网上下载赛车模型和桥 ...
Python制作的赛车小游戏源代码，逆行飙车
python制作的赛车小游戏,逆行飙车,通过键盘方向键控制程序运行截图: 源代码 import pygame, sys, time, random# pygame 初始化 pygame.init() ...
JavaScript实现2048小游戏，我终于赢了一把
JavaScript实现2048小游戏作者简介作者名: 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...
【Cocos Creator游戏开发教程】仿微信趣味画赛车小游戏（三）代码实现
[Cocos Creator游戏开发教程]仿微信趣味画赛车小游戏(一)前言,界面UI [Cocos Creator游戏开发教程]仿微信趣味画赛车小游戏(二)物理刚体关节项目地址已放到 github ...
利用html css javascript写翻翻乐小游戏
利用html css javascript写翻翻乐小游戏废话不多说,先看效果代码放到文章末尾,不想看代码解释的可以直接跳过到后面直接下载我写这个小游戏的过程 1.准备图片我在觅元素上找了 ...

纯javascript实现赛车小游戏

赛车

效果展示

源代码

纯javascript实现赛车小游戏相关推荐

最新文章

热门文章