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 -- 为游戏开发深感自豪

转载于:https://www.cnblogs.com/apiapia/p/9962952.html