用html5+js实现掌机游戏赛车demo-CSDN博客

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