javascript ---- Phaser做引擎小游戏

场景：
1.loading场景
2.游戏准备场景(三个)
3.游戏场景
4.游戏结束场景（失败 + 成功）
5.抽奖场景
6.调取简历

重点：
1.碰撞检测
2.位置固定

var state1btn = document.getElementById("state1Btn");
var state1 = document.getElementById("state1");
var state2 = document.getElementById("state2");
var state3 = document.getElementById("state3");
var state4 = document.getElementById("state4");
var state5 = document.getElementById("state5");
var start = document.getElementById("start");
var gameWin_state = document.getElementById("gameWin");
var gameOverState = document.getElementById("gameOver");
var clockTime = document.getElementById("clockTime");
var aginBtn = document.getElementById("aginBtn");
var finish = document.getElementById("finish");
var gametime =  document.getElementById("gametime");


game=new Phaser.Game("100%","100%",Phaser.CANVAS,"Phaser")
game.state.add("load",load_state);
game.state.add("mask",mask_state);
game.state.add("play",play_state);
game.state.add("gameOver",gameOver_state);
screenW = document.body.clientWidth;
screenH = document.body.clientHeight;


//试试运气
state1btn.onclick=function(){
    state1.style.display="none";
    state2.style.display="block";
    setTimeout(function(){  
        state2.style.display="none";
        state3.style.display="block";
    },3000)

    setTimeout(function(){  
        state3.style.display="none";
        state4.style.display="block";

    },6000)

    setTimeout(function(){  
        state4.style.display="none";    
        phaser.style.display="block";
        game.state.start("load");
    },8000)

}


//初始化场景
function load_state(){
    this.preload=function(){
        game.load.image("loading","img/loading.jpg");
    },
    this.create=function(){
        game.stage.setBackgroundColor("1e1c10")
        game.state.start("mask");

    }
}

//load_state
function mask_state(){
    var progressText;

    //初始化
    this.init=function(){
        this.loadGif =game.add.image(game.world.centerX,game.world.centerY,'loading');
        this.loadGif.width = screenW;
        this.loadGif.height = ( 364 /640 )*screenW;;
        this.loadGif.anchor={x:0.5,y:0.5}; 
        progressText=game.add.text(game.world.centerX,game.world.centerY+120,"0%",{fill:"#ffffff",fontSize:"16px"});
        progressText.anchor={x:0.5,y:0.5};

    },

    //加载资源
    this.preload=function(){ 
        game.load.image('loadruler','img/ruler.png');   
        game.load.image('loadbg','img/world.jpg');   
        game.load.image('loadqy','img/qy.png');
        game.load.image("loadnet","img/net.png");
        game.load.image('bg','img/world.jpg');   
        game.load.spritesheet('qy','img/qy.png');
        game.load.spritesheet("fish1","img/fish1.png");
        game.load.spritesheet("fish10","img/fish10.png");
        game.load.spritesheet("fish2","img/fish2.png");
        game.load.spritesheet("fish20","img/fish20.png");
        game.load.spritesheet("fish3","img/fish3.png");
        game.load.spritesheet("fish30","img/fish30.png");
        game.load.image("button","img/button.png"); 
        game.load.image("net","img/net.png");   
        game.load.image('gameoverbg','img/bg6.jpg');   
        game.load.image("restartpng","img/aginBtn.png");
        game.load.image("giveuppng","img/giveupBtn.png");   
        game.load.image("blackbg","img/blackbg.png");   

        game.load.onFileComplete.add(function(progress){
            progressText.text=progress + "%";

        })
    },

    //构建场景
    this.create=function(){ 
        gameW = screenW;
        gameH = ( 6166/640 )*screenW;
        game.world.setBounds(0,0,gameW,gameH);
        game.stage.setBackgroundColor("0xffffff")  //设置舞台背景色 16进制
        game.physics.startSystem(Phaser.Physics.ARCADE);




        //背景
        this.loadbg = game.add.image(0, 0, 'loadbg');
        this.loadbg.width = gameW;
        this.loadbg.height = gameH;

        //屈原
        this.loadqy=game.add.image(0,gameH-screenW,'loadqy'); 
        this.loadqy.width = screenW;
        this.loadqy.height = screenW;
        this.loadqy.anchor.set(0,0.5); 

        //网
        this.loadnet = game.add.image(0,gameH-((2000/640 )*screenW)-(screenW/2)-40, 'loadnet');
        this.loadnet.width = screenW;
        this.loadnet.height = ( 2000/640 )*screenW;


        //遮罩
        this.blackbg = game.add.image(0, 0, 'blackbg');
        this.blackbg.width = gameW;
        this.blackbg.height = gameH;

        //规则
        this.ruler = game.add.image(0, gameH-screenW, 'loadruler');
        this.ruler.width = screenW;
        this.ruler.height =  ( 274/640 ) * screenW;
        this.ruler.inputEnabled=true;
        this.ruler.events.onInputDown.add(this.playgame, this); 

        //跟随目标
        game.camera.follow(this.loadqy);

    },
    this.playgame = function(){ 
        game.state.start("play");
        start.style.display="block";
        game.state.start("play");
        setTimeout(function(){                  
            start.style.display="none";
        },3000)

    }

}


//play_state
function play_state(){

    var counter = 0;




    //加载资源
    /*
    this.preload=function() { 
        game.load.image('bg','img/world.jpg');   
        game.load.spritesheet('qy','img/qy.png');
        game.load.spritesheet("fish1","img/fish1.png");
        game.load.spritesheet("fish10","img/fish10.png");
        game.load.spritesheet("fish2","img/fish2.png");
        game.load.spritesheet("fish20","img/fish20.png");
        game.load.spritesheet("fish3","img/fish3.png");
        game.load.spritesheet("fish30","img/fish30.png");
        game.load.image("button","img/button.png"); 
        game.load.image("net","img/net.png");   

    },
    */

    //构建场景
    this.create=function(){ 
        screenW = document.body.clientWidth;
        screenH = document.body.clientHeight;
        gameW = screenW;
        gameH = ( 6166/640 )*screenW;
        game.world.setBounds(0,0,gameW,gameH);
        game.stage.setBackgroundColor("0xffffff")  //设置舞台背景色 16进制

        game.physics.startSystem(Phaser.Physics.ARCADE);

        //背景
        this.bg = game.add.image(0, 0, 'bg');
        this.bg.width = gameW;
        this.bg.height = gameH;

        //屈原
        this.qy=game.add.sprite(0,gameH-screenW,'qy'); 
        this.qy.width = screenW;
        this.qy.height = screenW;
        this.qy.anchor.set(0,0.5);  

        //开启屈原物理系统
        game.physics.arcade.enable(this.qy);

        //网
        this.netY = -((2000/640)*screenW-(screenW/2.76))
        this.net = game.add.image(0,gameH-((2000/640 )*screenW)-(screenW/2)-40, 'net');
        this.net.width = screenW;
        this.net.height = ( 2000/640 )*screenW;

        //时间
        game.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);

        //鱼
        this.fish1=game.add.sprite(800,screenH,'fish1');
        this.fish1.width = screenW;
        this.fish1.height = ( 554/640 )*screenW;
        this.fish2=game.add.sprite(0,gameH/2,'fish2');
        this.fish2.width = screenW;
        this.fish2.height = ( 511/640 )*screenW;
        this.fish3=game.add.sprite(0,gameH-screenH-(screenH/2),'fish3');
        this.fish3.width = screenW;
        this.fish3.height = ( 434/640 )*screenW;

        this.fish10=game.add.sprite(0,screenH,'fish10');
        this.fish10.width = screenW;
        this.fish10.height = ( 554/640 )*screenW;   

        this.fish20=game.add.sprite(0,gameH/2,'fish20');
        this.fish20.width = screenW;
        this.fish20.height = ( 511/640 )*screenW;

        this.fish30=game.add.sprite(0,gameH-screenH-(screenH/2),'fish30');
        this.fish30.width = screenW;
        this.fish30.height = ( 434/640 )*screenW;

        //鱼动画
        game.add.tween(this.fish3).to({ x: 400 }, 4000, Phaser.Easing.Linear.None, true, 0, 2000,false);
        game.add.tween(this.fish1).to({ x: -400 }, 4000, Phaser.Easing.Linear.None, true, 0, 1000,false);

        //开启鱼物理系统
        game.physics.arcade.enable(this.fish3);
        game.physics.arcade.enable(this.fish2);
        game.physics.arcade.enable(this.fish1);

        //手指点击事件
        game.input.onDown.add(this.saveUp, this); 

        //跟随目标
        game.camera.follow(this.qy);        
    },
    this.update=function(){
        //运动
        this.qy.y += 1;
        this.net.y += 1;

        //碰撞检测
        fish3flash = game.physics.arcade.overlap(this.qy, this.fish3, this.cashfish3, null ,this);
        fish2flash = game.physics.arcade.overlap(this.qy, this.fish2, this.cashfish2, null ,this);
        fish1flash = game.physics.arcade.overlap(this.qy, this.fish1, this.cashfish1, null ,this);

        //游戏失败
        if(this.qy.y>gameH){
            game.paused = true;
            this.qy.y = this.qy.y;
            counter = 0;
            gameOver();

        }

        //超出时间游戏失败
        if(counter > 30){
            game.paused = true;
            this.qy.y = this.qy.y;
            counter = 0;
            gameOver();     
        }


        if(fish3flash){ 
            this.fish30.alpha = 1
        }else{
            this.fish30.alpha = 0
        }

        if(fish2flash){ 
            this.fish20.alpha = 1
        }else{
            this.fish20.alpha = 0
        }

        if(fish1flash){ 
            this.fish10.alpha = 1
        }else{
            this.fish10.alpha = 0
        }

    },
    this.render=function(){
        /*
        game.debug.text("Time until event: " + game.time.events.duration.toFixed(0), 32, 32);
        game.debug.text("Next tick: " + game.time.events.next.toFixed(0), 32, 64);
        */
    },  
    this.saveUp = function(){
        start.style.display="none";
        this.qy.y-=20;
        this.net.y-=20;

        if(this.qy.y<0){
            game.paused = true;//游戏结束/胜利
            this.qy.y = -100;
            this.net.y = this.netY-100;
            gameWin();
            gametime.innerHTML = counter + 's';         
        }       
    },

    this.updateCounter = function(){
        counter++;
        clockTime.innerHTML = counter + 's';
    }



}

//游戏失败重置
function gameOver(){
    setTimeout(function(){
        game.paused = false;        
        clockTime.innerHTML = '0s'
        game.state.start("gameOver");
    })

    game.state.start("gameOver");
}



//游戏失败场景
function gameOver_state(){
    /*
    this.preload=function() { 
        game.load.image('gameoverbg','img/bg6.jpg');   
        game.load.image("restartpng","img/aginBtn.png");
        game.load.image("giveuppng","img/giveupBtn.png");

    },
    */

    this.create=function() {
        //背景
        screenW = document.body.clientWidth;
        screenH = document.body.clientHeight;
        var gameoverbgH = game.cache.getImage('gameoverbg').height;
        this.gameoverbg = game.add.image(0, 0, 'gameoverbg');
        this.gameoverbg.width = screenW;
        this.gameoverbg.height = (gameoverbgH*screenW)/640;

        //按钮-再救一次
        this.restartbtn= game.add.image(screenW/8,screenH/2.5, 'restartpng');
        this.restartbtn.width = screenW*0.33;
        this.restartbtn.height = (game.cache.getImage('restartpng').height*screenW)/640;
        this.restartbtn.inputEnabled=true;
        this.restartbtn.events.onInputDown.add(this.restart, this); 

        //按钮-不救了
        this.giveupbtn= game.add.image(screenW*0.595, screenH/2.5, 'giveuppng');
        this.giveupbtn.width = screenW*0.28;
        this.giveupbtn.height = (game.cache.getImage('giveuppng').height*screenW)/640;
        this.giveupbtn.inputEnabled=true;
        this.giveupbtn.events.onInputDown.add(this.giveup, this);   
    },  

    this.restart = function(){
        game.state.start("play");
        start.style.display="block";
        setTimeout(function(){                  
            start.style.display="none";
        },3000)

    },  

    this.giveup= function(){
        window.location.href="login.html";  

    }
}


//游戏成功
function gameWin(){
    setTimeout(function(){

        phaser.style.display="none";
        gameWin_state.style.display="block";    
    },2000) 
    setTimeout(function(){
        window.location.href="login.html";  
    },5000)         
}

动画tween
http://phaser.io/examples/v2/tweens/tween-from

/*
 * bounceDown
 */
this.create=function(){ 
    fish = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
    fish.anchor.set(0.5);
    game.add.tween(fish).from( { y: -200 }, 2000, Phaser.Easing.Bounce.Out, true);
}

“`