功能說明：

　　基于HTML5的超級瑪麗游戲的demo，方向鍵左右控制移動，方向鍵上控制跳躍，該游戲基于本人開發(fā)的HTML5游戲框架cnGameJS（詳情點擊這里：HTML5游戲框架cnGameJS開發(fā)實錄）。

　　請用最新版本瀏覽器查看。

效果展示：

代碼實現(xiàn)：

　　該游戲demo主要包含的元素有：資源加載，外部輸入，碰撞檢測，動畫，游戲循環(huán)以及場景，我將一步步進行分析講解。

　　1.資源加載：

　　　　我們首先要有一個游戲?qū)ο?#xff0c;代表一個關(guān)卡。該對象有如下三個方法：initialize，update和draw。它們分別的功能是初始化，更新所有游戲元素和繪制所有游戲元素。在游戲開始前，必須先加載所有圖片資源，之后就啟動游戲循環(huán)，并調(diào)用游戲?qū)ο蟮某跏蓟瘏?shù)：

/* 圖片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.外部輸入：

　　　　由于需要鍵盤的方向鍵產(chǎn)生瑪麗的移動，因此我們需要檢測鍵盤方向鍵是否有按下，我們可以采用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里封裝了矩形和矩形的碰撞檢測，因此我們可以利用來作為游戲?qū)ο笈c對象間的碰撞檢測，這里的碰撞檢測復(fù)雜點，分別檢測了瑪麗和敵人或石頭的碰撞，并跟進情況改變瑪麗的速度和加速度。

　　　　1：瑪麗與敵人碰撞，根據(jù)瑪麗Y方向速度判斷敵人die或者瑪麗die。

　　　　2：瑪麗和石頭碰撞，使瑪麗Y方向速度為0，Y方向加速度為0.

　　　　3：瑪麗離開石頭：恢復(fù)重力加速度。

　　

　　4.動畫：

　　　　這里的動畫主要是指瑪麗在移動時腳部的動畫，我們可以在瑪麗停止時使用圖片，移動時使用動畫。所謂的動畫其實就是一張大圖片內(nèi)的幀動畫，例如我們可以首先準(zhǔn)備　　一張這樣的圖片：

　　

　　之后只要使其每次顯示不同位置的瑪麗，即可完成動畫：效果預(yù)覽

　　

　　5.游戲循環(huán)

　　　　游戲循環(huán)就是在資源加載后啟動的循環(huán)，它接收用戶傳入的fps，從而計算出循環(huán)間隔，每次循環(huán)更新幀和繪制幀，生成游戲動畫：

if(cg.loop&&!cg.loop.stop){//結(jié)束上一個循環(huán)
cg.loop.end();
}
cg.loop=new cg.GameLoop(self.gameObj);//開始新游戲循環(huán)
cg.loop.start();

　　

　　6.場景：

　　　　所謂的場景，就是瑪麗移動的時候，瑪麗保持在畫布中央而背景相反方向移動的實現(xiàn)對象。場景對象不僅僅移動背景，還會把非玩家的游戲?qū)ο笸瑯痈鶕?jù)玩家的速度以相反方向移動：效果預(yù)覽

this.background=new cnGame.View({src:srcObj.backgroundSrc,player:this.player,imgWidth:2301});//場景初始化
this.background.centerPlayer(true);//設(shè)置玩家在中央
this.background.insideView(this.player,"x");//保持玩家在可視區(qū)域內(nèi)

?

　　最后附上游戲以及cnGameJS框架的源碼下載：點擊下載

歡迎轉(zhuǎn)載，請標(biāo)明出處：http://www.cnblogs.com/Cson/archive/2012/02/14/2350652.html

轉(zhuǎn)載于:https://www.cnblogs.com/Cson/archive/2012/02/14/2350652.html

總結(jié)

以上是生活随笔為你收集整理的【CSON原创】基于HTML5的超级玛丽游戏demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。