使用LayaAir H5游戏引擎 开发的抽奖程序

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/winnershili/article/details/79270484

演示地址

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


这里省略了一些 按钮的东西  大家可以上边给出的源代码查看 
展开阅读全文

没有更多推荐了,返回首页