最近无聊，用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();
算法写的有点不好，有大神路过望给一写指导。
时间： 2025-01-15 22:25:29