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


Posted in Javascript onMarch 03, 2017

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

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

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
js Event对象的5种坐标
Sep 12 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
JS html时钟制作代码分享
Mar 03 #Javascript
AngularJS路由实现页面跳转实例
Mar 03 #Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 #Javascript
求js数组的最大值和最小值的四种方法
Mar 03 #Javascript
jQuery控制元素隐藏和显示
Mar 03 #Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 #Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 #Javascript
You might like
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
javascript 面向对象继承
2009/11/26 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JS前端笔试题分析
2016/12/19 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python写程序统计词频的方法
2019/07/29 Python
详解python statistics模块及函数用法
2019/10/27 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
事业单位年度考核评语
2014/12/31 职场文书
2015中学学校工作总结
2015/07/20 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android