纯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: ;
} .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: ;
} .way-grid {
margin: ;
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="" /> <br /> Keyboard sensitivity: <input type="number" id="LMD" value="" /><br /> The game difficulty:<input type="number" id="ND" value="" /><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 = ,
wayWhite = ,
ND = , //n*2+1;
NDArry = [, , -],
gridStr = 'way-grid-',
PX = 'px',
length = ,
NDIndex = ,
waysetIndex = ,
waysetValue = ( - wayWhite) / ,
delvalue = ,
n = ,
waitvalue = / n,
checkOut = function () {
var index = wayLeft[wayLeft.length - ].wayLeft,
CCarvalue = wayLeft[wayLeft.length - ].CCarvalue + index,
carIndex = parseInt(document.getElementById('car').offsetLeft) + ;
if (carIndex < index + wayWhite && carIndex > index && (CCarvalue == || !(CCarvalue < carIndex && CCarvalue + > carIndex))) {
return true;
} else {
clearInterval(st);
clearInterval(cO);
clearInterval(LC);
clearInterval(RC);
var e = new Date();
alert('totle :' + parseInt((e.getTime() - s.getTime()) / ) + 's');
document.onkeydown = null;
document.onkeyup = null;
clearInterval(cO);
clearInterval(LC);
clearInterval(RC);
}
},
//初始道路坐标
getFitstArray = function () {
waysetValue = ( - wayWhite) / ;
for (var i = ; i < length; i++) {
wayLeft[i] = {};
wayLeft[i].wayLeft = ( - wayWhite) / ;
}
},
//初始化道路
setWay = function () {
var docElem = document.createDocumentFragment();
for (var i = ; 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 = ;
//渐变道路
if (waysetIndex > ) {
waysetIndex -= ;
waysetValue = firstL + delvalue;
} else if (waitvalue > ) {
//直线缓冲道路
waitvalue--;
waysetValue = firstL;
} else {
//渐变规则
delvalue = NDArry[parseInt(Math.random() * )] * parseInt(n / + );
CCarvalue = parseInt(Math.random() * wayWhite);
waysetIndex = NDIndex;
waitvalue = / n;
waysetValue = firstL + delvalue;
} return waysetValue >= && waysetValue <= ( - wayWhite) ? { wayLeft: waysetValue, CCarvalue: CCarvalue } : { wayLeft: firstL, CCarvalue: CCarvalue };
},
//根据数组刷新道路
getWayByArry = function () {
var CCarvalueList = document.getElementsByClassName('C-car');
while (CCarvalueList[]) {
CCarvalueList[].remove();
}
for (var i = ; 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) / ;
wayWhite = parseInt(document.getElementById('wayWhite').value);
ND = parseInt(document.getElementById('ND').value) * + ;
NDIndex = ;
getFitstArray();
getWayByArry();
s = new Date();
document.onkeydown = function (evt) {
var evt = window.event ? window.event : evt;
if (clickLR) { } else if (evt.keyCode == ) {
//锁定当前按键
clickLR = true;
LC = setInterval(lClick, );
} else if (evt.keyCode == ) {
//锁定当前按键
clickLR = true;
RC = setInterval(rClick, );
}
};
document.onkeyup = function (evt) {
//清除锁定
clickLR = false;
clearInterval(LC);
clearInterval(RC);
}
document.getElementById('car').style['left'] = + PX;
st = setInterval(stratBC, / ND);
cO = setInterval(checkOut, );
},
stratBC = function () {
setWayArray();
getWayByArry();
},
setWayArray = function () {
var firstL = wayLeft[],
nextL = ( - wayWhite) / ;
nextL = getNextL(firstL.wayLeft);
for (var i = ; i < wayLeft.length; i++) {
firstL = wayLeft[i];
wayLeft[i] = nextL;
nextL = firstL;
}
};
getFitstArray();
setWay();
getWayByArry();
document.getElementById('go').onclick = goClick;
</script>
</body>
</html>
爱情就是他妈这么个过程：
确定喜欢的类型是需求分析；
初步接触是概要设计，深入接触是详细设计；
确定恋爱关系是编写代码；
同居就是测试；
吵架就是fix bug；
结婚就是上线；
生孩子就是项目升级；
离婚就是他妈的项目下线。
纯JS单页面赛车游戏代码分享的更多相关文章
- 纯JS写的2048游戏，分享之
这几天玩儿着2048这个游戏,突然心血来潮想练习下敲代码的思路.于是乎就模仿做了一个,到眼下位置还没有实现动态移动,不是非常好看,只是玩儿着自己模仿的小游戏还是蛮爽的,哈哈 假设没有玩儿过这个游戏,最 ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- ionic单页面应用中微信分享的问题总结
首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- js五子棋游戏代码分享
HTML代码 <canvas id="game"></canvas> CSS代码 * { margin: 0; padding: 0; } #game { ...
- 一款WP小游戏代码分享
首先声明游戏是H5的代码,当然游戏部分不是我写的,感谢@LeZhi的分享,关于H5我还在学习,这里只是简单介绍一下如何把一款现成的H5游戏封装成一款WP游戏(当然也可以做成Windows游戏). 大家 ...
- node.js和socket.io纯js实现的即时通讯实例分享
在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码.这 ...
- Js 网页版扫雷游戏代码实现
这个游戏是自己在大约一年前联系js熟练度时做的,用的都是基础的东西,最近比较忙没时间整理.直接发给大家,有兴趣的可以看一下.欢迎大家提出建议.如果你有什么新的想法也可以提出来,或者你并不擅长编程.你想 ...
随机推荐
- OnsenUI和AngularJS配合搭建混合应用的基本步骤
混合开发的热潮已经掀起,实现混合开发的方式很多.今天给大家介绍一个实现混合开发的基本方法-OnsenUI和AngularJS配合. OnsenUI是一个可以实现混合开发的前端框架,包含了很多前端设计中 ...
- 持续集成接口自动化-jmeter+ant+jenkins(一)
ant 批量执行Jmeter 一.环境准备 1.JDK环境:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.A ...
- Mac 上的 outlook 一直让输入密码
Mac 上的 outlook 即便输入了正确的密码,依然提示密码错误,让重新输入,需要输入多遍之后才能连上服务器. 出现这个问题的原因可能是证书过期了. 解决方式如下: 1.找到 2. 删掉 Exch ...
- mui学习链接
http://dev.dcloud.net.cn/mui/snippet/ http://www.bcty365.com/content-146-2453-1.html hbuilder转rem值: ...
- - (BOOL)setResourceValue:(id)value forKey:(NSString *)key error:(NSError **)error
如果我们的APP需要存放比较大的文件的时候,同时又不希望被系统清理掉,那我么我们就需要把我们的资源保存在Documents目录下,但是我们又不希望他会被iCloud备份,因此就有了这个方法 [URL ...
- [LeetCode] Range Sum Query - Mutable 题解
题目 题目 思路 一看就是单点更新和区间求和,故用线段树做. 一开始没搞清楚,题目给定的i是从0开始还是从1开始,还以为是从1开始,导致后面把下标都改掉了,还有用区间更新的代码去实现单点更新,虽然两者 ...
- php基本数据类型需要注意的地方
一.布尔(Boolean) 手册中提到特殊类型NULL(包括尚未赋值的变量)会被换为false值,我自己在测试的时候发现NULL值可以转换为false,虽然false也会输出,但是尚未赋值的变量会报N ...
- django出现__init__() got an unexpected keyword argument 'mimetype‘ 问题解决
这种问题好多新手按照djangobook学习的时候应该都遇到过,是因为这是老的django的写法,新的django已经升级改变了很多东西. 处理方法如下: I think you are not us ...
- 深入理解Spring中bean的生命周期
[Spring中bean的生命周期] bean的生命周期 1.以ApplocationContext上下文单例模式装配bean为例,深入探讨bean的生命周期: (1).生命周期图: (2).具体事例 ...
- Linux之例行(任务调度)
一. 例行命令之at 1.1 at 仅执行一次就从Linux任务中取消 1.2 at 指令可以将工作命令写入工作记录文件,工作记录文件默认存放在/var/spool/at目录内 1.3 at 工作 ...