shooting bullets

Author: SandroMaglione

examples/space-invaders/src/components.ts

@@ -5,7 +5,9 @@ import { Sprite as _Sprite } from "pixi.js";
 export class Position extends Component("Position")<{
   x: number;
   y: number;
-}> {}
+}> {
+  static readonly initial = new this({ x: 400, y: 550 });
+}
 
 export class Collider extends Component("Collider")<{
   body: _Body;
@@ -20,9 +22,14 @@ export class Velocity extends Component("Velocity")<{
   vy: number;
   speed: number;
 }> {
-  static readonly init = new this({ vx: 0, vy: 0, speed: 6 });
+  static readonly idle = new this({ vx: 0, vy: 0, speed: 6 });
+  static readonly shootUp = new this({ vx: 0, vy: -10, speed: 6 });
 }
 
-export class Bullet extends Component("Bullet")<{}> {}
+export class Bullet extends Component("Bullet")<{
+  damage: number;
+}> {
+  static readonly default = new this({ damage: 10 });
+}
 
 export class Player extends Component("Player")<{}> {}

examples/space-invaders/src/constants.ts

@@ -0,0 +1,2 @@
+export const PLAYER_WIDTH = 40;
+export const PLAYER_HEIGHT = 20;

examples/space-invaders/src/input-manager.ts

@@ -14,9 +14,7 @@ export class InputManager {
     this.keyStates.set(event.code, false);
   }
 
-  public isKeyPressed(
-    keyCode: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight"
-  ): boolean {
+  public isKeyPressed(keyCode: "ArrowLeft" | "ArrowRight" | "Space"): boolean {
     return this.keyStates.get(keyCode) ?? false;
   }
 }

examples/space-invaders/src/main.ts

@@ -2,12 +2,14 @@ import { ECS, update } from "@typeonce/ecs";
 import Matter from "matter-js";
 import * as PIXI from "pixi.js";
 import { Collider, Player, Position, Sprite, Velocity } from "./components";
+import { PLAYER_HEIGHT, PLAYER_WIDTH } from "./constants";
 import { InputManager } from "./input-manager";
 import {
   MovementSystem,
   PhysicsSystem,
   PlayerInputSystem,
   RenderSystem,
+  ShootingSystem,
 } from "./systems";
 
 const app = new PIXI.Application();
@@ -22,27 +24,34 @@ const world = ECS.create(
       MovementSystem,
       RenderSystem,
       PhysicsSystem(engine),
-      PlayerInputSystem(inputManager)
+      PlayerInputSystem(inputManager),
+      ShootingSystem({ app, engine, inputManager })
     );
 
     const playerId = createEntity();
     const playerSprite = new PIXI.Sprite(PIXI.Texture.WHITE);
-    playerSprite.width = 40;
-    playerSprite.height = 20;
+    playerSprite.width = PLAYER_WIDTH;
+    playerSprite.height = PLAYER_HEIGHT;
+    playerSprite.anchor.set(0.5, 0);
     app.stage.addChild(playerSprite);
 
-    const playerBody = Matter.Bodies.rectangle(400, 550, 40, 20, {
-      isStatic: true,
-    });
+    const initialPosition = Position.initial;
+    const playerBody = Matter.Bodies.rectangle(
+      initialPosition.x,
+      initialPosition.y,
+      PLAYER_WIDTH,
+      PLAYER_HEIGHT,
+      { isStatic: true }
+    );
     Matter.World.add(engine.world, playerBody);
 
     addComponent(
       playerId,
-      Velocity.init,
-      new Position({ x: 400, y: 550 }),
+      Velocity.idle,
+      initialPosition,
+      new Player(),
       new Sprite({ sprite: playerSprite }),
-      new Collider({ body: playerBody }),
-      new Player()
+      new Collider({ body: playerBody })
     );
   }
 );

examples/space-invaders/src/systems.ts

@@ -1,13 +1,22 @@
 import { query, queryRequired, type SystemUpdate } from "@typeonce/ecs";
 import * as Matter from "matter-js";
+import * as PIXI from "pixi.js";
 
-import { Collider, Player, Position, Sprite, Velocity } from "./components";
+import {
+  Bullet,
+  Collider,
+  Player,
+  Position,
+  Sprite,
+  Velocity,
+} from "./components";
 import type { InputManager } from "./input-manager";
 
 const moving = query({ position: Position, velocity: Velocity });
 const physics = query({ position: Position, collider: Collider });
 const pixiRender = query({ position: Position, sprite: Sprite });
-const player = queryRequired({ player: Player, velocity: Velocity });
+const playerVelocity = queryRequired({ player: Player, velocity: Velocity });
+const playerPosition = queryRequired({ player: Player, position: Position });
 
 export const MovementSystem: SystemUpdate = ({ world, deltaTime }) => {
   moving(world).forEach(({ position, velocity }) => {
@@ -19,7 +28,7 @@ export const MovementSystem: SystemUpdate = ({ world, deltaTime }) => {
 export const PlayerInputSystem =
   (inputManager: InputManager): SystemUpdate =>
   ({ world }) => {
-    const { velocity } = player(world)[0];
+    const { velocity } = playerVelocity(world)[0];
     if (inputManager.isKeyPressed("ArrowLeft")) {
       velocity.vx = -velocity.speed;
     } else if (inputManager.isKeyPressed("ArrowRight")) {
@@ -45,3 +54,49 @@ export const PhysicsSystem =
       collider.body.position.y = position.y;
     });
   };
+
+export const ShootingSystem =
+  ({
+    app,
+    engine,
+    inputManager,
+  }: {
+    inputManager: InputManager;
+    app: PIXI.Application;
+    engine: Matter.Engine;
+  }): SystemUpdate =>
+  ({ world, addComponent, createEntity }) => {
+    const { position } = playerPosition(world)[0];
+    if (inputManager.isKeyPressed("Space")) {
+      const bulletPosition = new Position({
+        x: position.x,
+        y: position.y + 10,
+      });
+
+      const bulletSprite = new PIXI.Sprite(PIXI.Texture.WHITE);
+      bulletSprite.width = 5;
+      bulletSprite.height = 10;
+      bulletSprite.tint = 0xf5f5f5;
+      bulletSprite.anchor.set(0.5, 1);
+      bulletSprite.position.set(bulletPosition.x, bulletPosition.y);
+      app.stage.addChild(bulletSprite);
+
+      const bulletBody = Matter.Bodies.rectangle(
+        bulletPosition.x,
+        bulletPosition.y,
+        5,
+        10,
+        { isSensor: true }
+      );
+      Matter.World.add(engine.world, bulletBody);
+
+      addComponent(
+        createEntity(),
+        Bullet.default,
+        bulletPosition,
+        Velocity.shootUp,
+        new Sprite({ sprite: bulletSprite }),
+        new Collider({ body: bulletBody })
+      );
+    }
+  };