feat: Add heart pickups

src/Goal.js

@@ -61,8 +61,6 @@ export class Goal {
         {
           x: this.x,
           y: this.y,
-          scaleX: this.scale,
-          scaleY: this.scale,
           width: this.width,
           height: this.height,
         },

src/Heart.js

@@ -0,0 +1,68 @@
+import heart from 'data-url:./assets/img/heart.png';
+
+import { emit, Sprite } from 'kontra';
+import { HEART_PICKUP } from './gameEvents';
+import { isBoxCollision } from './utils';
+
+export class Heart {
+  scale = 4;
+  width = 8;
+  height = 8;
+  x;
+  y;
+  sprite;
+
+  constructor(x, y, { level }) {
+    this.level = level;
+    this.x = x;
+    this.y = y;
+    this.createSprite();
+  }
+  update() {
+    if (!this.sprite) return;
+    this.sprite.update();
+    this.checkCollision();
+  }
+
+  render(_ctx) {
+    if (!this.sprite) return;
+    this.sprite.render();
+  }
+
+  createSprite() {
+    const image = new Image();
+    image.src = heart;
+    image.onerror = function (err) {
+      console.log(err);
+    };
+    image.onload = () => {
+      this.sprite = Sprite({
+        x: this.x,
+        y: this.y,
+        anchor: { x: 0.5, y: 0.5 },
+        width: 8,
+        height: 8,
+        image: image,
+        scaleX: this.scale,
+        scaleY: this.scale,
+      });
+    };
+  }
+
+  checkCollision() {
+    if (
+      isBoxCollision(
+        {
+          x: this.x - (this.width * this.scale) / 2,
+          y: this.y - (this.height * this.scale) / 2,
+          width: this.width * this.scale,
+          height: this.height * this.scale,
+        },
+        this.level.player.sprite
+      )
+    ) {
+      this.sprite = null;
+      emit(HEART_PICKUP, { heart: this });
+    }
+  }
+}

src/Level.js

@@ -1,7 +1,5 @@
-import { emit, on, off } from 'kontra';
-
-import { GOAL_COLLISION, LEVEL_COMPLETE } from './gameEvents';
 import { Goal } from './Goal';
+import { Heart } from './Heart';
 import { Player } from './Player';
 import { Saw } from './Saw';
 import { BACK_FORTH } from './sawBehavior';
@@ -10,6 +8,7 @@ export class Level {
   player;
   saws = [];
   goals = [];
+  hearts = [];
   isLevelLoaded = false;
   levelId = -1;
   constructor(levelId, { game }) {
@@ -19,6 +18,7 @@ export class Level {
       this.createPlayer(levelData);
       this.createSaws(levelData);
       this.createGoals(levelData);
+      this.createHearts(levelData);
       this.isLevelLoaded = true;
     });
   }
@@ -38,10 +38,15 @@ export class Level {
 
   render(ctx) {
     if (!this.isLevelLoaded) return;
-    this.player.render(ctx);
+
+    // TODO (johnedvard) Add to same array if pressing for space
     this.saws.forEach((saw) => {
       saw.render(ctx);
     });
+    this.hearts.forEach((heart) => {
+      heart.render(ctx);
+    });
+    this.player.render(ctx);
     this.goals.forEach((goal) => {
       goal.render(ctx);
     });
@@ -57,6 +62,9 @@ export class Level {
     this.goals.forEach((goal) => {
       goal.update();
     });
+    this.hearts.forEach((heart) => {
+      heart.update();
+    });
   }
   createGoals(levelData) {
     levelData.g.forEach((g) => {
@@ -71,9 +79,15 @@ export class Level {
   }
   createSaws(levelData) {
     levelData.s.forEach((saw) => {
+      // TODO (johnedvard) Add actual saw behaviour
       this.saws.push(new Saw(saw.x, saw.y, { behavior: BACK_FORTH }));
     });
   }
+  createHearts(levelData) {
+    levelData.h.forEach((heart) => {
+      this.hearts.push(new Heart(heart.x, heart.y, { level: this }));
+    });
+  }
 
   // TODO (johnedvard) Move collisions to own file?
   checkCollisions() {

src/gameEvents.js

@@ -1,3 +1,4 @@
 export const GOAL_COLLISION = 'gc';
 export const ARCADIAN_ADDED = 'aa';
 export const LEVEL_COMPLETE = 'lc';
+export const HEART_PICKUP = 'hp';

src/level/level1.json

@@ -3,5 +3,6 @@
   "r": 7,
   "s": [],
   "b": [{ "x": 400, "y": 400 }],
-  "g": [{ "x": 368, "y": 700 }]
+  "g": [{ "x": 368, "y": 700 }],
+  "h": [{ "x": 550, "y": 200 }]
 }