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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯JS单页面赛车游戏制作代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5663字，纯文字阅读大概需要9分钟。

内容图文

分享一个以前写的小游戏，纯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单页面赛车游戏制作代码分享全部内容，希望文章能够帮你解决纯JS单页面赛车游戏制作代码分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/345539.html

来源：【匿名】

【上一篇】JS字符串长度判断,超出进行自动截取的实例(支持中文)【下一篇】javascript 怎么调用php方法

更多 ►

【纯JS单页面赛车游戏制作代码分享】教程文章相关的互联网学习教程文章

Javascript如何获取缓存和清除缓存API的示例代码分享

本篇文章主要介绍了详解Javascript获取缓存和清除缓存API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧JavaScript ServiceWorker API的好处就是让web开发人员轻松的控制缓存。虽然使用ETags等技术也是一种控制缓存的技术，按使用JavaScript让程序来控制缓存功能更强大，更自由。当然，强大有强大的好处，也有弊处——你需要做善后处理，所谓的善后处理，就是要清理缓存。下面我们来看看如何创建缓...

Vue.js实现自定义指令代码分享【图】

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。自定义指令的第二用处是用于集成第三方插件。我们知道任何软件开发领域都可以分为四层：底层是...

Vuefrom-validate表单验证代码分享

本文主要和大家介绍Vue from-validate 表单验证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。前言需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。那让我们自己来写一个吧！知识准备vue的自定义指令具体可以看官方手册，连接如下：https://vuejs.org/v2...

jquery左右全屏大尺寸多图滑动效果代码分享_jquery【图】

本文实例讲述了jquery左右全屏大尺寸多图滑动效果。分享给大家供大家参考。具体如下：这是一款基于jquery实现的banner焦点图播放效果的插件，图片播放时处于满屏的状态，很具有画面感，呈现的效果更佳充实，用户的视觉体验更加具体，是一款很时尚大方的特效代码。运行效果图： -------------------查看效果下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏...

PHP实现Javascript中的escape及unescape函数代码分享，escapeunescape_PHP教程

PHP实现Javascript中的escape及unescape函数代码分享，escapeunescape 这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了.. <?php classcoding {//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 functionunescape($str){$text=preg_replace_callback("/%u[0-9A-Za-z]{4}/",array(&$this,toUtf8),$str);returnmb_convert_encoding($text,"gb2312","utf-8");}functiontoUtf8($ar){foreach($ar...

PHP实现Javascript中的escape及unescape函数代码分享_PHP教程

PHP实现Javascript中的escape及unescape函数代码分享这篇文章主要介绍了PHP实现Javascript中的escape及unescape函数代码分享,本文给出两个实现版本,需要的朋友可以参考下这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了..12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152classcoding{//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能fu...

PHP实现Javascript中的escape及unescape函数代码分享_php实例

这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了.. <?php classcoding {//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 functionunescape($str){$text=preg_replace_callback("/%u[0-9A-Za-z]{4}/",array(&$this,toUtf8),$str);returnmb_convert_encoding($text,"gb2312","utf-8");}functiontoUtf8($ar){foreach($aras$val){$val=intval(substr($val,2),16);if($val<0x7F){// 0000-007F ...

PHP实现Javascript中的escape及unescape函数代码分享_PHP

这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了..<?php classcoding {//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 functionunescape($str){$text=preg_replace_callback("/%u[0-9A-Za-z]{4}/",array(&$this,toUtf8),$str);returnmb_convert_encoding($text,"gb2312","utf-8");}functiontoUtf8($ar){foreach($aras$val){$val=intval(substr($val,2),16);if($val<0x7F){// 0000-007F $...

PHP实现Javascript中的escape及unescape函数代码分享

javascript实现省市联动的代码分享

本篇文章给大家带来的内容是关于javascript实现省市联动的代码分享，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。在平常的网站开发中，我们常常会遇到这样的一个需求：在注册页面或者完善个人信息时要选择个人所在地，当选择省时，该省对应的市也会自动更新。技术点分析：DOM操作：获...

第3篇快速入门—js基础实战应用代码分享

DOM--节点的增删改查CRUD，DOM--例子:设置新闻字体， DOM的一个小例子---制作一个下拉菜单DOM--节点的增删改查CRUD<!DOCTYPE html> <html><head><title>DOM--节点的增删改查CRUD</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">p {border: #00c...

使用vue-cli实战项目代码分享【图】

这次给大家带来使用vue-cli实战项目代码分享，使用vue-cli实战的注意事项有哪些，下面就是实战案例，一起来看一下。本文是针对对于完全没有了解过vue 和npm，连运行环境和项目构建的都不会的小白，对于前端老司机的就不用看了，浪费时间。使用npm 与vue-cli 构建vue 项目第一步：安装运行环境（node与npm）nodeJ官网：http://nodejs.cn/下载安装包( 安装)安装完成后，需要检测是否安装成功使用命令行cmd 打开dos 黑窗口，运行 node...

原生nodejs使用websocket代码分享

本文给大家分享的是在原生的nodejs中如何使用websocket实现信息传输，非常实用，有需要的小伙伴可以参考下安装：npm install ws服务端（nodejs）：var WebSocketServer = require(ws).Server, wss = new WebSocketServer({ port: 8080 }); wss.on(connection, function (ws) { console.log(client connected); ws.on(message, function (message) {console.log(message); }); });客户端：<script> var ws = new WebSocket("ws://...

nodeJS服务器创建与重启操作代码分享

这次给大家带来nodeJS服务器创建与重启操作代码分享，nodeJS服务器创建与重启操作的注意事项有哪些，下面就是实战案例，一起来看一下。一：首先在nodejs项目里创建一个server.js文件，输入下面代码var http = require("http"); http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello World"); response.end(); }).listen(8888);然后在cmd下进入项目...

关于js的一些小知识点代码分享

本篇文章给大家分享的内容是关于js的一些小知识点代码分享，有着一定的参考价值，有需要的朋友可以参考一下js 防止重复提交第一种方式点击时返回false 2. 点击时，把按钮变为不可用比如 disabled var feedbtnlock = 0;function bonus_passwd() {if (feedbtnlock == 0) {feedbtnlock = 1;setTimeout(function(){feedbtnlock = 0;}, 1500);} else {alert(请勿重复点击！); return false;} }表单验证validate 2. valid...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【纯JS单页面赛车游戏制作代码分享】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程