用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
算法写的有点不好，有大神路过望给一写指导。
