资源图:
代码
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 – 为游戏开发深感自豪