詳細介紹基於HTML5的超級瑪莉遊戲demo的範例程式碼

功能說明：

　　基於HTML5的超級瑪麗遊戲的demo，方向鍵左右控制移動，方向鍵上控制跳躍，該遊戲基於本人開發的HTML5遊戲框架cnGameJS。

　　請用最新版本瀏覽器檢視。

效果顯示：

 

程式碼實作：

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

　　1.資源載入：

　　　　我們首先要有一個遊戲對象，代表一個關卡。該物件有以下三個方法：initialize，update和draw。它們分別的功能是初始化，更新所有遊戲元素並繪製所有遊戲元素。在遊戲開始前，必須先載入所有圖片資源，之後就啟動遊戲循環，並呼叫遊戲物件的初始化參數：

 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});
 maryGame={
    initialize:(){
    },
    update:(){

    },
    draw:(){
    }
}
    cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);

　2.外部輸入：

　　　　由於需要鍵​​盤的方向鍵產生瑪麗的移動，因此我們需要檢測鍵盤方向鍵是否有按下，我們可以採用cnGameJS的isPressed（keyName）檢測鍵盤的輸入：

        (cnGame.input.isPressed("up")){
.jump();

        }
 (cnGame.input.isPressed("right")){
.moveRight();    
        }
 (cnGame.input.isPressed("left")){
.moveLeft();
        }
{
.stopMove();
        }

　　　　這樣就可以透過不同的鍵盤輸入使瑪麗進行不同的行為。

　　3.碰撞檢測：

　　　　cnGameJS裡封裝了矩形和矩形的碰撞偵測，因此我們可以利用作為遊戲物件與物件間的碰撞偵測，這裡的碰撞偵測複雜點，分別偵測了瑪麗和敵人或石頭的碰撞，並跟進情況改變瑪麗的速度和加速度。

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

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

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

　　4.動畫：

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

　　

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

　　5.遊戲循環

　　　　遊戲循環就是在資源加載後啟動的循環，它接收用戶傳入的fps，從而計算出循環間隔，每次循環更新幀和繪製幀，生成遊戲動畫：

                    (cg.loop&&!cg.loop.stop){                        cg.loop.end();
                    }
                    cg.loop= cg.GameLoop(self.gameObj);                    cg.loop.start();

　　6.場景：

#######################################################所謂的場景，就是瑪莉移動的時候，瑪莉保持在畫布中央而背景相反方向移動的實現對象。場景物件不只移動背景，還會將非玩家的遊戲物件同樣依照玩家的速度以相反方向移動：效果預覽############

            .background= cnGame.View({src:srcObj.backgroundSrc,player:.player,imgWidth:2301});            .background.centerPlayer();            .background.insideView(.player,"x");

以上是詳細介紹基於HTML5的超級瑪莉遊戲demo的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！