欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-29 10:32:52
分享一个以前写的小游戏,纯js游戏,代码很简单。欢迎大家来喷呦! 效果图:   代码展示://直接复制到html文件即可 支持ie9+版本 &...

分享一个以前写的小游戏,纯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>

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

上一篇:

下一篇: