当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 15:30:26 HTML5

资源映射:代码varconfig={type:Phaser.AUTO,parent:'iFiero',//游戏id;

inhtmlwidth:500,height:380,scene:{preload:preload,create:create}};vargame=newPhaser.Game(config);//初始化代码functioninit(){}functionpreload(){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});}functioncreate(){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;}//判断鱼是否需要Reverse:点击位置与鱼头相反=>reverseif((pointer.x反向");这。fish.flipY=true;}//让鱼移动到点击位置this.tweens.add({targets:this.fish,x:pointer.x,y:pointer.y,duration:3000,ease:'Power2',});},this);}更多游戏教育:www.iFiero.com--以游戏开发为荣