用html5+js实现掌机游戏赛车demo

浏览数：38 / 时间：2015年06月09日

最近无聊，用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                     else
62                         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();