纯JS单页面赛车游戏制作代码分享
程序员文章站
2023-12-29 10:32:52
分享一个以前写的小游戏，纯js游戏，代码很简单。欢迎大家来喷呦！
效果图：
代码展示：//直接复制到html文件即可 支持ie9+版本
&...
分享一个以前写的小游戏，纯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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。