纯JS单页面赛车游戏代码分享

　　分享一个以前写的小游戏，纯js游戏，代码很简单。欢迎大家来喷呦！

效果图：

代码展示：//直接复制到html文件即可支持IE9+版本

<!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>

View Code

爱情就是他妈这么个过程：

确定喜欢的类型是需求分析；

初步接触是概要设计，深入接触是详细设计；

确定恋爱关系是编写代码；

同居就是测试；

吵架就是fix bug；

结婚就是上线；

生孩子就是项目升级；

离婚就是他妈的项目下线。

转载于:https://www.cnblogs.com/zwcai/p/6472121.html

纯JS单页面赛车游戏代码分享相关推荐

纯js单页面赛车游戏
纯js单页面赛车游戏这次就是给大家分享赛车的游戏: 废话不多,直接上代码: <!DOCTYPE html> <html> <head><meta chars ...
php赛车源码,纯JS单页面赛车游戏制作代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 Best Fly Car input { border: 1px ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
复习Java小球游戏代码分享Java面试题MySQL中常用的锁生活【记录一个咸鱼大学生三个月的奋进生活】021
记录一个咸鱼大学生三个月的奋进生活021 复习Java小球游戏游戏界面的代码小球运动线程的代码运行游戏的代码运行结果代码分享学习Java面试题(MySQL中常用的锁) 照片分享复习Jav ...
纯js制作的弹球游戏
纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1  5 <!DOCTYP ...
js 实现php md5加密,js实现md5加密插件代码分享
本文主要和大家分享js实现md5加密插件代码,希望能帮助到大家.//使用方法: //引入文件 //var MD5=MD5.createMD5String(yourSrting):( function( ...
还在一筹莫展？单页面网站优化技巧分享给你！
有些企业网站由于业务的特殊性会将网站设计成单页面的形式,以更直观的方式向用户传达更多的信息,给网站带来更多精准的目标用户,为网站带来更多的流量与成交量.不过对于网站单页面的优化,该如何进行呢?下面就带 ...

纯JS单页面赛车游戏代码分享

纯JS单页面赛车游戏代码分享相关推荐

最新文章

热门文章