diff --git a/public/assets/img/bullet.png b/public/assets/img/bullet.png new file mode 100644 index 0000000..a0a67b1 Binary files /dev/null and b/public/assets/img/bullet.png differ diff --git a/src/classes/Bullet.ts b/src/classes/Bullet.ts new file mode 100644 index 0000000..afaa0b5 --- /dev/null +++ b/src/classes/Bullet.ts @@ -0,0 +1,25 @@ +import Phaser from 'phaser' + +export default class Bullet extends Phaser.Physics.Arcade.Sprite { + constructor(scene, x, y) { + super(scene, x, y, 'bullet'); + } + + fire(x, y) { + this.body.reset(x, y); + + this.setActive(true); + this.setVisible(true); + + this.setVelocityY(-300); + } + + preUpdate(time, delta) { + super.preUpdate(time, delta); + + if (this.y <= -32) { + this.setActive(false); + this.setVisible(false); + } + } +} diff --git a/src/classes/Bullets.ts b/src/classes/Bullets.ts new file mode 100644 index 0000000..5c559c6 --- /dev/null +++ b/src/classes/Bullets.ts @@ -0,0 +1,24 @@ +import Phaser from 'phaser' +import Bullet from './Bullet' + +export default class Bullets extends Phaser.Physics.Arcade.Group { + constructor(scene: Phaser.Scene) { + super(scene.physics.world, scene); + + this.createMultiple({ + frameQuantity: 5, + key: 'bullet', + active: false, + visible: false, + classType: Bullet + }); + } + + fireBullet(x: number, y: number) { + let bullet = this.getFirstDead(false); + + if (bullet) { + bullet.fire(x, y); + } + } +} diff --git a/src/classes/Ship.ts b/src/classes/Ship.ts index 8cbe230..b334477 100644 --- a/src/classes/Ship.ts +++ b/src/classes/Ship.ts @@ -1,4 +1,5 @@ import Phaser from 'phaser' +import Bullets from './Bullets' export default class Ship extends Phaser.Physics.Arcade.Sprite { readonly acceleration = 5 @@ -7,6 +8,8 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite { readonly colliderRadiusRatio = 0.43 readonly wrapMargin = 10 + bullets?: Bullets + constructor(scene: Phaser.Scene) { super( scene, @@ -25,6 +28,8 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite { this.setDamping(true) this.setDrag(this.dragForce) this.body.setCircle(this.width * this.colliderRadiusRatio) + + this.bullets = new Bullets(scene) } preUpdate(time, delta) { @@ -35,6 +40,8 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite { const keyLeft = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A) const keyRight = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D) + const keyShoot = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE) + const vec = new Phaser.Math.Vector2(0, 0) if (keyUp.isDown) vec.y = -this.acceleration @@ -42,7 +49,10 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite { if (keyRight.isDown) vec.x = this.acceleration if (keyLeft.isDown) vec.x = -this.acceleration + if (keyShoot.isDown) this.bullets.fireBullet(this.x, this.y); + this.body.velocity.add(vec) this.scene.physics.world.wrap(this, this.wrapMargin) } + } diff --git a/src/scenes/DefaultScene.ts b/src/scenes/DefaultScene.ts index 76e8ec8..052800e 100644 --- a/src/scenes/DefaultScene.ts +++ b/src/scenes/DefaultScene.ts @@ -2,38 +2,39 @@ import Phaser from 'phaser' import Ship from '../classes/Ship' export default class DefaultScene extends Phaser.Scene { - player?: Ship + player?: Ship - constructor() { - super('default-scene') - } + constructor() { + super('default-scene') + } - preload() { - this.load.image('sky', 'assets/img/nebula10.png') - this.load.image('logo', 'assets/img/phaser3-logo.png') - this.load.image('ship', 'assets/img/ship.png') - this.load.spritesheet('particles', 'assets/img/boom.png', { frameWidth: 192, frameHeight: 192 }) - } + preload() { + this.load.image('sky', 'assets/img/nebula10.png') + this.load.image('logo', 'assets/img/phaser3-logo.png') + this.load.image('ship', 'assets/img/ship.png') + this.load.image('bullet', 'assets/img/bullet.png') + this.load.spritesheet('particles', 'assets/img/boom.png', { frameWidth: 192, frameHeight: 192 }) + } - create() { - this.add.image(400, 300, 'sky') + create() { + this.add.image(400, 300, 'sky') - const particles = this.add.particles('particles', 21) + const particles = this.add.particles('particles', 21) - const emitter = particles.createEmitter({ - speed: 300, - scale: { start: 1, end: 0 }, - blendMode: 'ADD', - }) + const emitter = particles.createEmitter({ + speed: 300, + scale: { start: 1, end: 0 }, + blendMode: 'ADD', + }) - const logo = this.physics.add.image(400, 100, 'logo') + const logo = this.physics.add.image(400, 100, 'logo') - logo.setVelocity(100, 200) - logo.setBounce(1, 1) - logo.setCollideWorldBounds(true) + logo.setVelocity(100, 200) + logo.setBounce(1, 1) + logo.setCollideWorldBounds(true) - emitter.startFollow(logo) + emitter.startFollow(logo) - this.player = new Ship(this) - } + this.player = new Ship(this) + } }