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

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

        // 三角函数 得出鱼要旋转的角度
        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 -- 为游戏开发深感自豪