纯JS单页面赛车游戏制作代码分享
作者：笑逗逗 发布时间：2024-02-23 14:10:17
标签：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>
0
投稿猜你喜欢
数据可视化是以图形格式呈现数据。它通过以简单易懂的格式汇总和呈现大量数据，帮助人们理解数据的重要性，并有助于清晰有效地传达信息。考虑这个给定- 四种格式的解析：filelistslicelistdownload.cfgthird_party_download.cfg还是2个文件。替换
- 关于 HTTP 协议HTTP（即超文本传输协议）是现代网络中最常见和常用的协议之一，设计它的目的是保证客户机和服务器之间的通信。HTTP 的
- 1.首先是html页面的form表单的三大属性，action是提交到哪，method是提交方式，enctype只要有图片上传就要加这个属性D
- Vue动态创建组件实例并挂载到body方式一import Vue from 'vue'/** * @param Compon
- 创建列表list( ) # 创造列表list(可迭代对象)# 将可迭代对象创造成列表切片索引：列表[a:b]切片索引赋值：列表[切片] =
- 前端Vue 8080端口，后端Node.js 8085端口 主要记录下前后端不同端口遇到的问题1、写服务器端程序，我的在(node_prox
- PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统（ORDBMS），是以加州大学计算机系开发的POSTGRES，4
- python中.split()只能用指定一个分隔符例如：text='3.14:15'print text.split(
- 1 回顾上一节我们详细讲解了如何对数据库进行分区操作，包括了 垂直拆分（Scale Up 纵向扩展）和水平拆分（Scale Out 横向扩展
- 将一个类的接口转换成客户希望的另外一个接口。使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。应用场景：希望复用一些现存的类，但是接
- 一、概论C4.5主要是在ID3的基础上改进，ID3选择（属性）树节点是选择信息增益值最大的属性作为节点。而C4.5引入了新概念“信息增益率”
- 本文实例为大家分享了JS实现长图上下滚动的具体代码，供大家参考，具体内容如下案例描述将一张长图放在某一固定长宽的盒子里，当鼠标置于盒子的上半
- 互斥锁在Golang中，互斥锁（Mutex）是一种基本的同步原语，用于实现对共享资源的互斥访问。互斥锁通过在代码中标记临界区来控制对共享资源
- 当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！1.合理
- 本文实例为大家分享了Python实现京东秒杀功能的具体代码，供大家参考，具体内容如下#Python 3.5#coding:utf-8#imp
- 更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档，这里我们之做个简单的说明 包括一下几大属性： appCodeNam
- 组件间通信的概念开始之前，我们把组件间通信这个词进行拆分组件通信都知道组件是vue最强大的功能之一，vue中每一个.vue文件我们都可以视之
- 1、将css与javascript全部用下边的方法分离到外部文件中去。<link rel="stylesheet"
- CREATE VIEW dbo.vw_db_dictionary AS SELECT TOP 100 PERCENT dbo.sysobje
