Phaser3遊戲三角學應用--一隻跟隨螢幕點選位置遊動的魚
阿新 • • 發佈:2018-12-21
資源圖:
程式碼
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); }