fish

fish

資源圖:

fish-136x80.png

undersea-bg.png

代碼

var config = {
    type: Phaser.AUTO,
    parent: 'iFiero', // game id; html中為 <div id="iFiero"></div>
    width: 500,
    height: 380,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

// 初始化代碼
function init() {

}

function preload() {
    this.load.image('bg', 'assets/undersea-bg.png');
    //this.load.image('arrow', 'assets/sprites/arrow.png');
    this.load.spritesheet('fish', 'assets/fish-136x80.png', {
        frameWidth: 136,
        frameHeight: 80
    });
}


function create() {
    this.add.image(0, 0, 'bg').setOrigin(0).setScale(0.65);

    // this.arrow =  this.add.image(250, 200, 'arrow', Phaser.Math.Between(0, 5));
    this.fish = this.add.image(0, 80, 'fish', 0).setScale(0.7);

    this.input.on('pointerdown', function (pointer) {

        // 三角函數(shù) 得出魚要旋轉(zhuǎn)的角度
        this.fish.rotation = Math.atan2(pointer.y - this.fish.y, pointer.x - this.fish.x);

        // 判斷魚是否需要反轉(zhuǎn):點(diǎn)擊的位置和魚頭相同=>不反轉(zhuǎn)
        if ((pointer.x > this.fish.x)) {
            console.log("點(diǎn)擊的位置和魚頭相同=>不反轉(zhuǎn)");
            this.fish.flipY = false;
        }

        // 判斷魚是否需要反轉(zhuǎn):點(diǎn)擊的位置和魚頭相反=>反轉(zhuǎn)
        if ((pointer.x < this.fish.x)) {
            console.log("點(diǎn)擊的位置和魚頭相反=>反轉(zhuǎn)");
            this.fish.flipY = true;
        }

        // 讓魚移動(dòng)到點(diǎn)擊的位置
        this.tweens.add({
            targets: this.fish,
            x: pointer.x,
            y: pointer.y,
            duration: 3000,
            ease: 'Power2',
        });

    }, this);
}

更多游戲教學(xué)：www.iFiero.com -- 為游戲開發(fā)深感自豪