Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

        // 三角函数 得出鱼要旋转的角度

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

}