Phaser3遊戲三角學應用--一隻跟隨屏幕點擊位置遊動的魚

資源圖:

代碼

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

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

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

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

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

    }, this);
}

更多遊戲教學：www.iFiero.com -- 爲遊戲開發深感自豪