用EC5/EC6自定義class的區別及用法 -- Phaser3網頁遊戲框架

 

custom class

EC6 自定義class

class Brain extends Phaser.GameObjects.Sprite { constructor (scene, x, y) { super(scene, x, y); this.setTexture('brain'); this.setPosition(x, y); } preUpdate (time, delta) { super.preUpdate(time, delta); this.rotation += 0.01; } } 

EC5 自定義class

var Bunny = new Phaser.Class({ Extends:Phaser.GameObjects.Sprite, initialize:function Bunny(scene,x,y,speed){ Phaser.GameObjects.Sprite.call(this,scene); this.setTexture('bunny'); this.setPosition(x, y); this.setScale(0.3); this.speed = speed; }, preUpdate(time,delta){ this.rotation += (0.01+ this.speed * 0.0001) ; } }); 

完整代碼：

var Bunny = new Phaser.Class({ Extends:Phaser.GameObjects.Sprite, initialize:function Bunny(scene,x,y,speed){ Phaser.GameObjects.Sprite.call(this,scene); this.setTexture('bunny'); this.setPosition(x, y); this.setScale(0.3); this.speed = speed; }, preUpdate(time,delta){ this.rotation += (0.01+ this.speed * 0.0001) ; } }); var config = { type: Phaser.AUTO, width: 600, height: 480, parent: 'phaser-example', scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload (){ //http://www.ifiero.com/uploads/ifiero-logo_512x512.png // this.load.image('bunny', 'http://www.ifiero.com/images/ifiero-logo_512x512.png'); this.load.setBaseURL('http://labs.phaser.io'); this.load.image('bg', 'assets/pics/purple-dots.png'); this.load.image('bunny', 'assets/sprites/bunny.png'); } function create (){ this.add.image(0, 0, 'bg').setOrigin(0).setScale(0.8); this.add.existing(new Bunny(this, 150, 150,100)); this.add.existing(new Bunny(this, 250, 250,200)); this.add.existing(new Bunny(this, 350, 350,300)); } 

更多遊戲教學:www.iFIERO.com -- 爲遊戲開發深感自豪