使用LayaAir H5遊戲引擎 開發的抽獎程序

演示地址

http://42.56.70.252:9090/video/prize/

源代碼下載

http://download.csdn.net/download/winnershili/10242259

抽獎畫面

這個抽獎程序的主要功能就是

1. 打開歡迎頁面 單擊進入抽獎程序

2. 規則是 被抽中的人員將無法繼續參加抽獎 每次點擊停止按鈕 會出現中獎者頭像

實現方法

國際慣例 首先加載資源 我用了一個 加載資源的類 將聲音和頭像加載進來 

class ResourceManager{

    /**小圖集合 */
    public static PACKAGE_RES:string = "res/atlas/comp.atlas";

    public static WELCOME_IMAGE:string = "comp/welcome.jpg";

    public static WELCOME_BG:string = "sound/welcome_bg.mp3";

    public static MAIN_BG:string = "sound/main_bg.mp3";

    public static MAIN_IMAGE:string = "comp/main_image.png";

    public static BTN_START:string = "comp/btn_start.png";

    public static BTN_STOP:string = "comp/btn_stop.png";

    public static SELECTED:string = "sound/selected.mp3";

    public static FACEX:string = "face/faceX.jpg";


    /**城市背景圖 */
    public static FACE_RES:Array<string> = 
    ["face/face01.png","face/face02.png","face/face03.png","face/face04.png",
    "face/face05.png","face/face06.png","face/face07.png","face/face08.png",
    "face/face09.png","face/face10.png","face/face11.png","face/face12.png",
    "face/face13.png","face/face14.png","face/face15.png"];


    public static getAllResource():Array<any>{
         let assets: Array<any> = [];
         assets.push({ url: ResourceManager.PACKAGE_RES, type: Laya.Loader.ATLAS });
         assets.push({ url: ResourceManager.FACE_RES, type: Laya.Loader.IMAGE });
         assets.push({ url: ResourceManager.WELCOME_IMAGE, type: Laya.Loader.IMAGE });
         assets.push({ url: ResourceManager.WELCOME_BG, type: Laya.Loader.SOUND });
         assets.push({ url: ResourceManager.MAIN_BG, type: Laya.Loader.SOUND });
         assets.push({ url: ResourceManager.SELECTED, type: Laya.Loader.SOUND });
         assets.push({ url: ResourceManager.MAIN_IMAGE, type: Laya.Loader.IMAGE });
         assets.push({ url: ResourceManager.BTN_START, type: Laya.Loader.IMAGE });
         assets.push({ url: ResourceManager.BTN_STOP, type: Laya.Loader.IMAGE });
         return assets;
    }

}

然後定義大頭像的類

這個類很簡單 就是現實一個圖片 

class Face extends Laya.Sprite{
    constructor(){
        super();
        
    }

    public init(res:string){
        this.loadImage(res);
    }

    public play(s:number){
        //this.timerOnce(s,this,this.start)  
    }

}

然後是大頭像下方的小頭像

小頭像應用到 時間線 等 緩動效果

class sFace extends Laya.Sprite{
    constructor(){
        super();
        
    }

    public init(res:string){
        this.loadImage(res);
        this.scale(50/600,50/600);
        this.alpha = 0;
    }

    /**小圖片的顯示 */
    public show(s:number){
        this.timerOnce(s,this,this.showStart)  
    }

    showStart(){
        this.timer.frameLoop(1,this,this.onShowLoop);
    }

    onShowLoop(){
   
        if(this.alpha>=1){
            this.timer.clear(this,this.onShowLoop);
        }
        this.alpha += 0.1;
    }
    

    public moveto(__x:number,__y:number){
        this.timerOnce(1000,this,this.movetoStart,[__x,__y])  
    }

    private movetoStart(__x:number,__y:number){
         Laya.Tween.to(this,{x:__x,y:__y},500);
    }

    public fly(__x:number,__y:number){
         Laya.Tween.to(this,{x:__x,y:__y},1000,Laya.Ease["elasticOut"]);
    }
}

主要抽獎窗口中 是大頭像不斷替換的過程 當按下停止時 就會顯示中獎人的頭像

class MainWindows extends Laya.Sprite{

    private background:Laya.Sprite;
    private animation:Laya.Animation; 
    private currentFrame:number;
    private main:Laya.Sprite;
    private imageArr:Array<string>;
    private face_list:Array<Face> = [];

    constructor(){
        super();
        this.init();
    }

    private init(){
        //播放動畫     
        this.background = new Laya.Sprite;
        this.background.loadImage(ResourceManager.FACEX);
        this.addChild(this.background);

        this.main = new Laya.Sprite;    
        this.addChild(this.main);

        this.currentFrame = 0;

        for(let i=0;i<ResourceManager.FACE_RES.length;i++){
            let s:Face = new Face();
            s.init(ResourceManager.FACE_RES[i]);
            this.face_list.push(s);
        }
    }

    private onLoop(){
        this.removeChildren();
        if(this.currentFrame>=this.face_list.length){
            this.currentFrame = 0;
        }
        this.addChild(this.face_list[this.currentFrame]);
        this.currentFrame++;
    }

    public play(){
        Laya.timer.loop(100,this,this.onLoop);
    }

    public stop(){
        Laya.timer.clear(this,this.onLoop);
        this.event("FrameStop",[this.currentFrame-1]);
        this.face_list.splice(this.currentFrame-1,1);
    }
}

最後 是將大頭像和和小頭像的列表顯示在 主頁面上

class Main extends Laya.Sprite {

    private mainWindows: MainWindows;
    private background: Background;
    private face_sprite: Laya.Sprite;
    private face_list: Array<sFace>;
    private face_list2: Array<sFace> = [];
    private playing: boolean;

    private btn_start:MyButton;
    private btn_stop:MyButton;

    constructor() {
        super(); this.init();
        Laya.SoundManager.playMusic(ResourceManager.MAIN_BG, 0);
    }

    init() {

        this.mainWindows = new MainWindows();
        this.background = new Background();
        this.face_list = new Array<sFace>();
        this.face_sprite = new Laya.Sprite;


        for (let i = 0; i < ResourceManager.FACE_RES.length; i++) {
            let s: sFace = new sFace();
            s.init(ResourceManager.FACE_RES[i]);
            s.scale(50 / 600, 50 / 600);
            this.face_list.push(s);
        }

        this.showAll();

        this.addChild(this.background);

        this.face_sprite.pos(50, 860);
        this.addChild(this.face_sprite);

        this.mainWindows.x = Laya.stage.width / 2 - 300;
        this.mainWindows.y = 50;
        this.addChild(this.mainWindows);
        this.mainWindows.on("FrameStop", this, this.onStop);
        //this.mainWindows.on(Laya.Event.CLICK, this, this.onClick)

        this.btn_start = new MyButton();
        this.btn_start.init(MyButton.BUTTON_TYPE_START);
        this.btn_start.pos(200,300)
        this.btn_start.size(225,225);
        this.btn_start.visible = false;
        this.addChild(this.btn_start);

        this.btn_stop = new MyButton();
        this.btn_stop.init(MyButton.BUTTON_TYPE_STOP);
        this.btn_stop.pos(1500,300)
        this.btn_stop.size(225,225);
        this.btn_stop.visible = false;
        this.addChild(this.btn_stop);

        this.btn_start.on(Laya.Event.CLICK,this,this.onStartClick);
        this.btn_stop.on(Laya.Event.CLICK,this,this.onStopClick);

        this.timerOnce(1000,this,this.onReady);

    }

    onReady(){
        this.btn_start.show();
    }

    onStop(currentFrame) {
        //獲取當前幀的小圖片 並從上邊一排的數組中移除
        let s: sFace = this.face_list.splice(currentFrame, 1)[0];
        //計算下一排的位置
        let __x = this.face_list2.length * 50;
        let __y = 80;
        //移動過去
        s.fly(__x, __y);
        //加入到下邊的數組
        this.face_list2.push(s);

        for (let i = currentFrame; i < this.face_list.length; i++) {
            let s = this.face_list[i];
            s.moveto(s.x - 50, s.y);
        }

        //聲音處理
        Laya.SoundManager.setMusicVolume(0);
        Laya.SoundManager.playSound(ResourceManager.SELECTED, 1);
    }


    showAll() {
        for (let i = 0; i < this.face_list.length; i++) {
            let s = this.face_list[i];
            s.pos(i * 50, 0);
            this.face_sprite.addChild(s);
            s.show(i * 30);
        }
    }

    onStartClick(){
        this.btn_start.visible = false;
        this.mainWindows.play();
        Laya.SoundManager.setMusicVolume(1);
        this.timerOnce(1000,this,this.onStopReady);
    }

    onStopClick(){
        this.btn_stop.visible = false;
        this.mainWindows.stop();
        this.timerOnce(2000,this,this.onReady);
    }

    onStopReady(){
        this.btn_stop.show();
    }

}

入口 就是加載完資源 顯示主頁面

// 程序入口
class GameMain{

    private assets: Array<any> = [];

    private welcome:Welcome;
    private main:Main;

    constructor(type:string)
    {
        Laya.init(1920,1080,Laya.WebGL);  //電腦
        Laya.Stat.show(0,0); 
        Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
        this.assets = ResourceManager.getAllResource();
        Laya.loader.load(this.assets,Laya.Handler.create(this,this.onLoaded));
    }

    onLoaded(){
        console.info("ok");

        this.welcome = new Welcome();
        this.welcome.on("APP_START",this,this.onStart);
        //this.welcome.pos(0,);
        Laya.stage.addChild(this.welcome);              
    }


    onStart(){
        Laya.stage.removeChildAt(0);
        this.main = new Main();
        Laya.stage.addChild(this.main);
    }
}

new GameMain(window.location.hash);

這裏省略了一些 按鈕的東西  大家可以上邊給出的源代碼查看