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

更新时间：2017年03月03日 16:49:10 作者：笑逗逗

这篇文章主要为大家分享了纯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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
游戏

JSON stringify方法原理及实例解析
这篇文章主要介绍了JSON stringify方法原理及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
momentjs获取上周、上月、前三个月的起始和结束时间(附完整代码)
这篇文章主要给大家介绍了关于momentjs获取上周、上月、前三个月的起始和结束时间的相关资料,在需要你进行日期处理的地方,必然少不了moment.js的使用,需要的朋友可以参考下
2023-07-07
js实现简单的倒计时
这篇文章主要为大家详细介绍了js实现简单的倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
使用TypeScript V8来改进您的JavaScript代码
TypeScript V8是一个强大的JavaScript类型系统,它可以帮助你发现JavaScript代码中的错误和潜在问题,并在编译时捕获它们,以便您可以解决它们,TypeScript V8为JavaScript提供一系列的类型注释,包括自定义类型和其他高级功能
2023-08-08
js使用child_process模块操作cmd命令
这篇文章主要给大家介绍了关于js使用child_process模块操作cmd命令的相关资料,在JavaScript中执行CMD命令非常灵活,可以执行任何CMD命令,例如:复制、移动、删除文件等等,需要的朋友可以参考下
2024-01-01
使用TypeScript接口优化数据结构的示例详解
在现代软件开发中,数据结构的设计至关重要,它直接影响到程序的性能和可维护性,TypeScript 作为一种静态类型的超集,为 JavaScript 带来了类型系统,本文将探讨如何利用 TypeScript 的接口（Interfaces）来优化数据结构,需要的朋友可以参考下
2024-09-09
日期函数扩展类Ver0.1.1
日期函数扩展类Ver0.1.1...
2006-09-09
一文带你搞懂JavaScript中转义字符的使用
说起转义字符，大家最先想到的肯定是使用反斜杠，这也是我们最常见的，很多编程语言都支持。除了反斜杠以外，在前端开发中，还有其他几种转义字符，也是较常见的，本文将对这些做一个总结
2023-02-02
JavaScript仿淘宝实现固定右侧侧边栏
这篇文章主要为大家详细介绍了如何利用JavaScript实现仿淘宝固定右侧侧边栏效果，文中示例代码介绍的非常详细，感兴趣的小伙伴们可以参考一下
2022-03-03
javascript 中的继承实例详解
这篇文章主要介绍了javascript 中的继承实例详解的相关资料,需要的朋友可以参考下
2017-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具