纯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 相关文章推荐
addEventListener 的用法示例介绍
May 07 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
javascript的几种写法总结
Sep 30 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP读取Excel类文件
2017/05/15 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
js中eval详解
2012/03/30 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
django框架使用方法详解
2019/07/18 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
Spy++的使用方法及下载教程
2021/01/29 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
化工操作工岗位职责
2014/04/29 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
欢迎词范文
2015/01/27 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
芙蓉镇观后感
2015/06/10 职场文书