纯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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。