用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
>
6head
>
7<
style
>
8body
11#mycar
14style
>
15<
body
>
16<
canvas 
id="mycar"
width
="300px"
height
="500px"
>
canvas
>
17<
div 
id="scored"
>得分：0
div>
18<
script 
src="js/mycar.js"
>
script
>
19body
>
20html
>

1/**

2* created by zqc on 2014/12/3.3*/
45function
createcar(speed,cxt,dom) ; //
紅色賽車初始位置
11     o.hinder = [,,]; //
障礙物位置
12     o.scroll = 0; //
下滑距離
13     o.scored = 0; //
分數14     o.init = function
() 21
else
if(e.keycode === 39 && o.curdir.x < 200)
24else
if(e.keycode === 40) 
27};
28         document.onkeyup = function
() ;
31o.sethinder();
32o.startcar();
33};
34     o.sethinder = function () ); //
hinder表示是否有障礙物
39         o.hinder[1].push();
40         o.hinder[2].push();
41for(var i = 0; i < o.hinder.length; i ++)47}
48};
49     o.downhinder = function () 
65else
66                     o.hinder[j][i].y = o.hinder[j][i].y + 5;67}
68}69};
70     o.movecar = function
(dir) ;
76     o.clearhander = function
() 84}85
};86     o.counterscorde = function
() ;
90     o.startcar = function
() 98             o.scroll = o.scroll + 5; //
單位下滑速度
99if(o.scroll % 300 === 0)
100                 o.sethinder(); //
設定障礙物
101o.startcar();
102}, o.speed);
103};
104return
o;105
}106
107var c = document.getelementbyid('mycar');
108var scored = document.getelementbyid('scored');
109var cxt = c.getcontext('2d');
110var car = createcar(30,cxt,scored);
111 car.init();

演算法寫的有點不好，有大神路過望給一寫指導。

HTML5 JS實現俄羅斯方塊

遊戲區域是限定大小的區域，本遊戲的遊戲區域有21 25個矩形,每個矩形width為10單位，heght為6個單位 canvas 的絕對單位是固定的，非畫素 建立rusblock類包含相應的資料和行為，建立二維陣列astate 21 25 記錄遊戲區域中被標記的矩形。俄羅斯方塊有7個部件，每個部件所佔...

HTML5 JS 《五子飛》遊戲實現（一）規則

很久沒寫文章了，這個遊戲其實已經寫了有段時間了，一直沒有完善，趕在新年之際，分享給大家。規則如下 一 黑白雙方 對方黑，我方白 各執五子，分別擺放在雙方的邊線上 二 棋子只能走直線 斜的直線也是 不能轉彎 三 只要前面沒有棋子 任何一方的 就可以跳格走 四 可以夾死對方乙個或可以挑對方兩個棋子 以1...

只要三步，使用html5 js實現畫素風頭像生成器

html5的畫布給我們帶來了很大的空間，其實畫素風格頭像生成器只是用到了畫方塊的方法。畫乙個畫素頭像，只要三步，1 解決畫素點，2 解決畫素點之間的關係，3 一次次地畫畫素點。其實在canvas上畫方塊非常簡單，只要通過js在頁面上取得乙個畫布，然後再生成上下文，再定義畫筆，然後再往上畫就好了。比如...