用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 /** 2 * Created by zqc on 2014/12/3. 3 */
4
5 function createCar(speed,cxt,dom) { 6 var o = new Object(); 7 o.speed = speed; // 落下速度
8 o.cxt = cxt; // 画布
9 o.cell = 100; // 赛车宽度
10 o.curdir = {'x':100,'y':400}; // 红色赛车初始位置
11 o.hinder = [[],[],[]]; // 障碍物位置
12 o.scroll = 0; // 下滑距离
13 o.scored = 0; // 分数
14 o.init = function () { 15 o.cxt.fillStyle = 'red'; 16 o.cxt.fillRect(o.curdir.x, o.curdir.y, o.cell, o.cell); 17 document.onkeydown = function (e) { // 按键事件
18 if(e.keyCode === 37 && o.curdir.x > 0){ 19 o.moveCar('left'); 20 } 21 else if(e.keyCode === 39 && o.curdir.x < 200){ 22 o.moveCar('right'); 23 } 24 else if(e.keyCode === 40) {// 长按加速
25 o.speed = speed / 3; 26 } 27 }; 28 document.onkeyup = function () { 29 o.speed = speed; 30 }; 31 o.setHinder(); 32 o.startCar(); 33 }; 34 o.setHinder = function () { // 生成障碍物
35 var rand1 = Math.ceil(Math.random() * 1000) % 2, 36 rand2 = Math.ceil(Math.random() * 1000) % 2, 37 rand3 = Math.ceil(Math.random() * 1000) % 2; 38 o.hinder[0].push({'x':0,'y':0,'hinder':rand1}); // hinder表示是否有障碍物
39 o.hinder[1].push({'x':100,'y':0,'hinder':rand2}); 40 o.hinder[2].push({'x':200,'y':0,'hinder':rand1 + rand2 == 2?0:rand3}); 41 for(var i = 0; i < o.hinder.length; i ++){ 42 var last =o.hinder[i][o.hinder[i].length - 1]; 43 if(last.hinder === 1) { // 有障碍物
44 o.cxt.fillStyle = 'black'; 45 o.cxt.fillRect(last.x,last.y, o.cell, o.cell); 46 } 47 } 48 }; 49 o.downHinder = function () { // 控制障碍物下降
50 var i = 0, 51 j = 0, 52 cur = null, 53 old = null; 54 for(; i < o.hinder[0].length; i ++) { 55 for(j = 0; j < 3; j ++) { 56 cur = o.hinder[j][i]; 57 if (cur.hinder === 1) { 58 old = o.hinder[j][i]; 59 o.cxt.clearRect(old.x,old.y, o.cell, o.cell); // 清除上一帧
60 o.hinder[j][i].y = o.hinder[j][i].y + 5; 61 cur = o.hinder[j][i]; 62 o.cxt.fillStyle = 'black'; 63 o.cxt.fillRect(cur.x,cur.y, o.cell, o.cell); 64 } 65 else
66 o.hinder[j][i].y = o.hinder[j][i].y + 5; 67 } 68 } 69 }; 70 o.moveCar = function (dir) { 71 o.cxt.fillStyle = 'red'; 72 o.cxt.clearRect(o.curdir.x, o.curdir.y, o.cell, o.cell); 73 o.curdir.x = (dir === 'left'?o.curdir.x - o.cell:o.curdir.x + o.cell); 74 o.cxt.fillRect(o.curdir.x,o.curdir.y, o.cell, o.cell); 75 }; 76 o.clearHander = function () { 77 for(var i = 0; i < o.hinder.length; i ++) { 78 if (o.hinder[i][0].y >= 500) { // 超过画布最低位置，清除障碍物
79 o.counterScorde(); // 计分
80 var over = o.hinder[i].shift(); 81 if(over.hinder === 1) 82 o.cxt.clearRect(over.x,over.y, o.cell, o.cell); 83 } 84 } 85 }; 86 o.counterScorde = function () { 87 o.scored = o.scored + Math.ceil(100/o.speed);
88 dom.innerHTML = '得分：' + o.scored; 89 }; 90 o.startCar = function () { 91 setTimeout(function () { 92 o.downHinder(); // 落下障碍物
93 o.clearHander(); // 清除已通过的障碍物
94 if(o.hinder[o.curdir.x/100][0].hinder === 1 && o.hinder[o.curdir.x/100][0].y + 100 >= o.curdir.y){ 95 alert('你挂了'); 96 return; 97 } 98 o.scroll = o.scroll + 5; // 单位下滑速度
99 if(o.scroll % 300 === 0) 100 o.setHinder(); // 设置障碍物
101 o.startCar(); 102 }, o.speed); 103 }; 104 return o; 105 } 106
107 var c = document.getElementById('mycar'); 108 var scored = document.getElementById('scored'); 109 var cxt = c.getContext('2d'); 110 var car = createCar(30,cxt,scored); 111 car.init();
详情见github： 掌机游戏赛车demo
算法写的有点不好，有大神路过望给一写指导。