纯JS单页面赛车游戏的制作方法

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章给大家分享的是有关纯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单页面赛车游戏的制作方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉