天天看點

egret開發HTML5小遊戲-瘋狂大亂鬥簡介

簡介

寒假開始,花了5天時間利用Egret引擎開發了一款HTML5小遊戲,最終界面效果如下:

egret開發HTML5小遊戲-瘋狂大亂鬥簡介

【遊戲首頁】

egret開發HTML5小遊戲-瘋狂大亂鬥簡介

【遊戲圖鑒】

egret開發HTML5小遊戲-瘋狂大亂鬥簡介

【遊戲截圖】

項目結構

egret開發HTML5小遊戲-瘋狂大亂鬥簡介

主要的類就是list.ts和Main.ts,再就是存放遊戲素材的resourc檔案夾

建立對戰消息:

let show_game:egret.TextField=new egret.TextField();
    show_game.text="對戰消息:";
    show_game.x=1000;
    show_game.y=1000;
    this.parent.addChild(show_game);
    let show_game1:egret.TextField=new egret.TextField();
    show_game1.text=" 遊戲開始了";
    show_game1.x=1000;
    show_game1.y=1070;
    this.parent.addChild(show_game1);
    let show_game2:egret.TextField=new egret.TextField();
    show_game2.text=" BOSS蠢蠢欲動";
    show_game2.x=1000;
    show_game2.y=1140;
    this.parent.addChild(show_game2);
    
           

動态更改遊戲消息:

function message_content_chage(content:string){//實作替換消息内容
            message_position_chage(show_game2.text);
            show_game2.text=content;
        }
        function message_position_chage(content:string){//實作兩個消息框内容更疊
            show_game1.text=content;

        }
           

由于是雙人遊戲,需要處理對鍵盤按鍵的控制,不可避免的會出現同時按鍵,最後一次按鍵的行為有效,前一次失效的情況。

比如:玩家1按鍵向左移動,玩家2緊随其後按鍵向左移動,最終結果是玩家2移動,玩家1不動,這個問題需要解決。

我們可以采取一種别的處理方式,既然他對keydown事件的處理隻能傾聽最後一個,我們可以采取keydown和keyup結合的方式,利用一個布爾型數組存儲以各個按鍵的keycode值對應的下标的值,按鍵之後(keydown)将其設為true,松開鍵(keyup)設為false,将判斷分散到數組中,解決了沖突的問題。

var key_pressed={};//監聽數組,用來存儲鍵盤狀态
//通過監聽keyup執行雙人遊戲
document.addEventListener("keyup",function(e){//鍵盤擡起,不移動
    console.log(e.keyCode+"is up")
    key_pressed[e.keyCode]=false;
    
});
//通過監聽keyup執行雙人遊戲
document.addEventListener("keydown",function(e){//鍵盤按下,執行某些事件
    console.log(e.keyCode+"is down")
    key_pressed[e.keyCode]=true;
    
});
           

繼續閱讀