【CSON原創(chuàng)】基于HTML5的超級(jí)瑪麗游戲demo

功能說(shuō)明：

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

　　請(qǐng)用最新版本瀏覽器查看。

效果展示：

代碼實(shí)現(xiàn)：

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

　　1.資源加載：

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

/* 圖片src對(duì)象 */
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)生瑪麗的移動(dòng)，因此我們需要檢測(cè)鍵盤方向鍵是否有按下，我們可以采用cnGameJS的isPressed（keyName）檢測(cè)鍵盤的輸入：

        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();
        }

　　　　這樣就可以通過(guò)不同的鍵盤輸入使瑪麗進(jìn)行不同的行為。

　　3.碰撞檢測(cè)：

　　　　cnGameJS里封裝了矩形和矩形的碰撞檢測(cè)，因此我們可以利用來(lái)作為游戲?qū)ο笈c對(duì)象間的碰撞檢測(cè)，這里的碰撞檢測(cè)復(fù)雜點(diǎn)，分別檢測(cè)了瑪麗和敵人或石頭的碰撞，并跟進(jìn)情況改變瑪麗的速度和加速度。

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

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

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

　　4.動(dòng)畫：

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

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

　　5.游戲循環(huán)

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

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

　　6.場(chǎng)景：

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

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

　　最后附上游戲以及cnGameJS框架的源碼下載：點(diǎn)擊下載

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

posted @ 2012-02-14 12:37 Cson 閱讀(14131) 評(píng)論(4) 收藏舉報(bào)

刷新頁(yè)面返回頂部

【CSON原創(chuàng)】基于HTML5的超級(jí)瑪麗游戲demo

公告