功能說明：
基於HTML5的超級瑪麗游戲的demo，方向鍵左右控制移動，方向鍵上控制跳躍，該游戲基於本人開發的HTML5游戲框架cnGameJS（詳情點擊這里：HTML5游戲框架cnGameJS開發實錄）。
請用最新版本瀏覽器查看。
效果展示：
代碼實現：
該游戲demo主要包含的元素有：資源加載，外部輸入，碰撞檢測，動畫，游戲循環以及場景，我將一步步進行分析講解。
1.資源加載：
我們首先要有一個游戲對象，代表一個關卡。該對象有如下三個方法：initialize，update和draw。它們分別的功能是初始化，更新所有游戲元素和繪制所有游戲元素。在游戲開始前，必須先加載所有圖片資源，之后就啟動游戲循環，並調用游戲對象的初始化參數：
/* 圖片src對象 */
var srcObj={
startSrc:"images/gamestart.png",
backgroundSrc:"images/background.png",
enemySrc:"images/enemy.png",
playerSrc:"images/player.png",
stoneSrc:"images/stone.png",
stoneSrc2:"images/stone2.png",
pillarSrc:"images/pillar.png",
bulletSrc:"images/bullet.png"
}
/* 初始化 */
cnGame.init('gameCanvas',{width:500,height:400});
var maryGame={
initialize:function(){
},
update:function(){
},
draw:function(){
}
}
cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);
2.外部輸入：
由於需要鍵盤的方向鍵產生瑪麗的移動，因此我們需要檢測鍵盤方向鍵是否有按下，我們可以采用cnGameJS的isPressed（keyName）檢測鍵盤的輸入：
if(cnGame.input.isPressed("up")){
this.jump();
}
else if(cnGame.input.isPressed("right")){
this.moveRight();
}
else if(cnGame.input.isPressed("left")){
this.moveLeft();
}
else{
this.stopMove();
}
這樣就可以通過不同的鍵盤輸入使瑪麗進行不同的行為。
3.碰撞檢測：
cnGameJS里封裝了矩形和矩形的碰撞檢測，因此我們可以利用來作為游戲對象與對象間的碰撞檢測，這里的碰撞檢測復雜點，分別檢測了瑪麗和敵人或石頭的碰撞，並跟進情況改變瑪麗的速度和加速度。
1：瑪麗與敵人碰撞，根據瑪麗Y方向速度判斷敵人die或者瑪麗die。
2：瑪麗和石頭碰撞，使瑪麗Y方向速度為0，Y方向加速度為0.
3：瑪麗離開石頭：恢復重力加速度。
4.動畫：
這里的動畫主要是指瑪麗在移動時腳部的動畫，我們可以在瑪麗停止時使用圖片，移動時使用動畫。所謂的動畫其實就是一張大圖片內的幀動畫，例如我們可以首先准備 一張這樣的圖片：
之后只要使其每次顯示不同位置的瑪麗，即可完成動畫：效果預覽
5.游戲循環
游戲循環就是在資源加載后啟動的循環，它接收用戶傳入的fps，從而計算出循環間隔，每次循環更新幀和繪制幀，生成游戲動畫：
if(cg.loop&&!cg.loop.stop){//結束上一個循環
cg.loop.end();
}
cg.loop=new cg.GameLoop(self.gameObj);//開始新游戲循環
cg.loop.start();
6.場景：
所謂的場景，就是瑪麗移動的時候，瑪麗保持在畫布中央而背景相反方向移動的實現對象。場景對象不僅僅移動背景，還會把非玩家的游戲對象同樣根據玩家的速度以相反方向移動：效果預覽
this.background=new cnGame.View({src:srcObj.backgroundSrc,player:this.player,imgWidth:2301});//場景初始化
this.background.centerPlayer(true);//設置玩家在中央
this.background.insideView(this.player,"x");//保持玩家在可視區域內
最后附上游戲以及cnGameJS框架的源碼下載：點擊下載
歡迎轉載，請標明出處：http://www.cnblogs.com/Cson/archive/2012/02/14/2350652.html