纯js单页面赛车游戏

这次就是给大家分享赛车的游戏：
废话不多，直接上代码：

<!DOCTYPE html>
<html>
<head><meta charset="{CHARSET}"><title>Best Fly Car</title><style>input {border: 1px solid yellow;margin-left: 20px;margin-top: 20px;}.way-content {margin-left: auto;margin-right: auto;width: 1024px;height: 700px;position: relative;border: 1px solid burlywood;background-color: darkolivegreen;}.car {color:black;width: 20px;height: 20px;border: 1px solid brown;background: greenyellow;position: absolute;left: 502px;top: 678px;text-align: center;z-index: 99;}.C-car {color:black;width: 20px;height: 15px;border: 1px solid brown;background: red;position: absolute;left: 502px;top: 0px;text-align: center;z-index: 98;}.way-grid {margin: 0 0;margin-left: 412px;background-color: grey;border: none;border-right: 1px solid brown;border-left: 1px solid brown;min-width: 100px;max-width: 1024px;width: 200px;height: 10px;color: white;font-size: 5px;position: relative;text-align: center;}.go {background: greenyellow;width: 100px;height: 50px;text-align: center;}</style>
</head>
<body><div id="way-content" class="way-content"><div id="car" class="car">++</div></div><br /> The width of the road:<input id="wayWhite" type="number" value="200" /> <br /> Keyboard sensitivity: <input type="number" id="LMD" value="10" /><br /> The game difficulty:<input type="number" id="ND" value="5" /><br /><input class="go" id="go" type="button" value="go" /><br /><script type="text/javascript">var wayLeft = [],cO = null,LC = null,RC = null,st = null,clickLR = false,s = null,LMD = 5,wayWhite = 200,ND = 15, //n*2+1;NDArry = [0, 1, -1],gridStr = 'way-grid-',PX = 'px',length = 70,NDIndex = 30,waysetIndex = 10,waysetValue = (1024 - wayWhite) / 2,delvalue = 0,n = 5,waitvalue = 10 / n,checkOut = function () {var index = wayLeft[wayLeft.length - 1].wayLeft,CCarvalue = wayLeft[wayLeft.length - 1].CCarvalue + index,carIndex = parseInt(document.getElementById('car').offsetLeft) + 10;if (carIndex < index + wayWhite && carIndex > index && (CCarvalue == 0 || !(CCarvalue < carIndex && CCarvalue + 20 > carIndex))) {return true;} else {clearInterval(st);clearInterval(cO);clearInterval(LC);clearInterval(RC);var e = new Date();alert('totle :' + parseInt((e.getTime() - s.getTime()) / 600) + 's');document.onkeydown = null;document.onkeyup = null;clearInterval(cO);clearInterval(LC);clearInterval(RC);}},//初始道路坐标getFitstArray = function () {waysetValue = (1 - wayWhite) / 2;for (var i = 0; i < length; i++) {wayLeft[i] = {};wayLeft[i].wayLeft = (1024 - wayWhite) / 2;}},//初始化道路setWay = function () {var docElem = document.createDocumentFragment();for (var i = 0; i < length; i++) {var grid = document.createElement('div');grid.className = 'way-grid';grid.id = gridStr + i;grid.textContent = '|';docElem.appendChild(grid);}document.getElementById('way-content').appendChild(docElem);},//生成下一个道路getNextL = function (firstL) {var CCarvalue = 0;//渐变道路if (waysetIndex > 1) {waysetIndex -= 1;waysetValue = firstL + delvalue;} else if (waitvalue > 0) {//直线缓冲道路waitvalue--;waysetValue = firstL;} else {//渐变规则delvalue = NDArry[parseInt(Math.random() * 3)] * parseInt(n / 2 + 1);CCarvalue = parseInt(Math.random() * wayWhite);waysetIndex = NDIndex;waitvalue = 100 / n;waysetValue = firstL + delvalue;}return waysetValue >= 0 && waysetValue <= (1024 - wayWhite) ? { wayLeft: waysetValue, CCarvalue: CCarvalue } : { wayLeft: firstL, CCarvalue: CCarvalue };},//根据数组刷新道路getWayByArry = function () {var CCarvalueList = document.getElementsByClassName('C-car');while (CCarvalueList[0]) {CCarvalueList[0].remove();}for (var i = 0; i < wayLeft.length; i++) {var grid = document.getElementById(gridStr + i);grid.style['width'] = wayWhite + PX;grid.style['margin-left'] = wayLeft[i].wayLeft + PX;if (wayLeft[i].CCarvalue) {var CCarvalue = document.createElement('div');CCarvalue.id = 'CCarvalue' + i;CCarvalue.className = 'C-car';CCarvalue.textContent = '+';CCarvalue.style['left'] = wayLeft[i].CCarvalue + PX;grid.appendChild(CCarvalue);}}},//左键事件lClick = function () {if (document.onkeydown) {var a = document.getElementById('car')a.style['left'] = (a.offsetLeft - LMD) + PX;}},//右键事件rClick = function () {if (document.onkeydown) {var a = document.getElementById('car')a.style['left'] = (a.offsetLeft + LMD) + PX;}},//确定事件goClick = function () {clearInterval(st);clearInterval(cO);clearInterval(LC);clearInterval(RC);document.onkeydown = null;document.onkeyup = null;LMD = parseInt(document.getElementById('LMD').value) / 4;wayWhite = parseInt(document.getElementById('wayWhite').value);ND = parseInt(document.getElementById('ND').value) * 1 + 1;NDIndex = 30;getFitstArray();getWayByArry();s = new Date();document.onkeydown = function (evt) {var evt = window.event ? window.event : evt;if (clickLR) {} else if (evt.keyCode == 37) {//锁定当前按键clickLR = true;LC = setInterval(lClick, 10);} else if (evt.keyCode == 39) {//锁定当前按键clickLR = true;RC = setInterval(rClick, 10);}};document.onkeyup = function (evt) {//清除锁定clickLR = false;clearInterval(LC);clearInterval(RC);}document.getElementById('car').style['left'] = 502 + PX;st = setInterval(stratBC, 100 / ND);cO = setInterval(checkOut, 10);},stratBC = function () {setWayArray();getWayByArry();},setWayArray = function () {var firstL = wayLeft[0],nextL = (1024 - wayWhite) / 2;nextL = getNextL(firstL.wayLeft);for (var i = 0; i < wayLeft.length; i++) {firstL = wayLeft[i];wayLeft[i] = nextL;nextL = firstL;}};getFitstArray();setWay();getWayByArry();document.getElementById('go').onclick = goClick;</script>
</body>
</html>

图片效果：

把代码直接写进HBuilder X就可以直接运行了。

纯js单页面赛车游戏相关推荐

纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html&g ...
php赛车源码,纯JS单页面赛车游戏制作代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 Best Fly Car input { border: 1px ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
纯js制作的弹球游戏
纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1  5 <!DOCTYP ...
纯JS写的小众游戏——走四棋
过年正赶上新冠病毒不让出门,在家闲着没事,偶尔玩了一下老家流行的游戏(走四棋),然后就想把这个游戏用JS写出来,先练了一下贪吃蛇,等下也会在我的博客中单独贴出来,按照贪吃蛇动态生成dom元素的方法,粗 ...
纯JS实现填字游戏实战总结
文章目录 1 游戏整体框架和流程 2 UI设计 2.1 顶部空白格 2.2 底部16字 3 功能设计 3.1 四字洗牌并展示 3.2 拖拽 3.2.1 元素移动的坐标要素 3.2.2 元素结束移动的判 ...
如何用纯js做一个大富翁游戏
下面这张是效果图: 先立个flag,一个星期内把这个坑填了今天7月1号,建党节,在这个伟大的节日,我来填坑了. 这个游戏有以下几个难点: 1.礼品的位置 2.小怪兽位置的变化(走路.转身和回退) 3 ...
纯js实现页面漂浮图
js代码 var xPos = 700; var yPos = 300; var step = 1; var delay = 30; var height = 0; var Hoffset = 0; ...
js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面
这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...

纯js单页面赛车游戏

纯js单页面赛车游戏

纯js单页面赛车游戏相关推荐

最新文章

热门文章