首页 > 代码库 > 用html5+js实现掌机游戏赛车demo
用html5+js实现掌机游戏赛车demo
最近无聊，用html5+js做了一个以前玩过的掌机赛车游戏，顺便学习一下画布的api以及巩固一下js基础。
游戏界面，没做什么美化。
游戏规则：游戏界面分为三列，黑色方块随机落下，红色方块可以在三列自由移动（用方向键，长按下方向键黑色方块加速下滑）。红色方块碰到黑色方块即为输。
得分：每正常通过一次黑色方块加12分，加速通过加30分。
下面直接上代码：
html：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 body{ 9 text-align: center;10 }11 #mycar{12 border: 1px solid black;13 }14 </style>15 <body>16 <canvas id="mycar" width="300px" height="500px"></canvas>17 <div id="scored">得分：0</div>18 <script src="js/mycar.js"></script>19 </body>20 </html>js：
1 function createCar(speed,cxt,dom) { 2 var o = new Object(); 3 o.speed = speed; 4 o.cxt = cxt; 5 o.cell = 100; 6 o.curdir = {‘x‘:100,‘y‘:400}; 7 o.hinder = [[],[],[]]; 8 o.scroll = 0; 9 o.scored = 0;10 o.init = function () {11 o.cxt.fillStyle = ‘red‘;12 o.cxt.fillRect(o.curdir.x, o.curdir.y, o.cell, o.cell);13 document.onkeydown = function (e) {14 if(e.keyCode === 37 && o.curdir.x > 0){15 o.moveCar(‘left‘);16 }17 else if(e.keyCode === 39 && o.curdir.x < 200){18 o.moveCar(‘right‘);19 }20 else if(e.keyCode === 40)21 o.speed = speed / 3;22 };23 document.onkeyup = function () {24 o.speed = speed;25 };26 o.setHinder();27 o.downHinder();28 };29 o.setHinder = function () {30 var rand1 = Math.ceil(Math.random() * 1000) % 2,31 rand2 = Math.ceil(Math.random() * 1000) % 2,32 rand3 = Math.ceil(Math.random() * 1000) % 2;33 o.hinder[0].push({‘x‘:0,‘y‘:0,‘hinder‘:rand1});34 o.hinder[1].push({‘x‘:100,‘y‘:0,‘hinder‘:rand2});35 o.hinder[2].push({‘x‘:200,‘y‘:0,‘hinder‘:rand1 + rand2 == 2?0:rand3});36 for(var i = 0; i < o.hinder.length; i ++){37 var last =o.hinder[i][o.hinder[i].length - 1];38 if(last.hinder === 1) {39 o.cxt.fillStyle = ‘black‘;40 o.cxt.fillRect(last.x,last.y, o.cell, o.cell);41 }42 }43 };44 o.downHinder = function () {45 setTimeout(function () {46 var i = 0,47 j = 0,48 cur = null,49 old = null;50 for(i = 0; i < o.hinder[0].length; i ++) {51 for(j = 0; j < 3; j ++) {52 cur = o.hinder[j][i];53 if (cur.hinder === 1) {54 old = o.hinder[j][i];55 o.cxt.clearRect(old.x,old.y, o.cell, o.cell);56 o.hinder[j][i].y = o.hinder[j][i].y + 5;57 cur = o.hinder[j][i];58 o.cxt.fillStyle = ‘black‘;59 o.cxt.fillRect(cur.x,cur.y, o.cell, o.cell);60 }61 else62 o.hinder[j][i].y = o.hinder[j][i].y + 5;63 }64 }65 for(i = 0; i < o.hinder.length; i ++) {66 if (o.hinder[i][0].y >= 500) {67 o.scored = o.scored + Math.ceil(100/o.speed);68 dom.innerHTML = ‘得分：‘ + o.scored;69 var over = o.hinder[i].shift();70 if(over.hinder === 1)71 o.cxt.clearRect(over.x,over.y, o.cell, o.cell);72 }73 }74 if(o.hinder[o.curdir.x/100][0].hinder === 1 && o.hinder[o.curdir.x/100][0].y + 100 >= o.curdir.y){75 alert(‘你挂了‘);76 return;77 }78 o.scroll = o.scroll + 5;79 if(o.scroll % 300 == 0)80 o.setHinder();81 o.downHinder();82 }, o.speed);83 };84 o.moveCar = function (dir) {85 o.cxt.fillStyle = ‘red‘;86 o.cxt.clearRect(o.curdir.x, o.curdir.y, o.cell, o.cell);87 o.curdir.x = (dir === ‘left‘?o.curdir.x - o.cell:o.curdir.x + o.cell);88 o.cxt.fillRect(o.curdir.x,o.curdir.y, o.cell, o.cell);89 };90 return o;91 }92 93 var c = document.getElementById(‘mycar‘);94 var scored = document.getElementById(‘scored‘);95 var cxt = c.getContext(‘2d‘);96 var car = createCar(30,cxt,scored);97 car.init();
算法写的有点不好，有大神路过望给一写指导。
用html5+js实现掌机游戏赛车demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。