feat: Add goal/grave and box collision

src/Goal.js

@@ -0,0 +1,52 @@
+import { Sprite } from 'kontra';
+
+import { isBoxCollision } from './utils';
+import grave from './assets/img/grave-4x-mini.png';
+
+export class Goal {
+  level;
+  sprite;
+  scale = 2;
+  constructor(x, y, { level }) {
+    this.x = x;
+    this.y = y;
+    this.level = level;
+    this.createSprite();
+  }
+  update() {
+    this.checkCollision();
+    if (this.sprite) {
+      this.sprite.update();
+    }
+  }
+  render() {
+    if (this.sprite) {
+      this.sprite.render();
+    }
+  }
+
+  checkCollision() {
+    if (isBoxCollision(this.sprite, this.level.player.sprite)) {
+      console.log('collided');
+    }
+  }
+
+  createSprite() {
+    const image = new Image();
+    image.src = grave;
+    image.onerror = function (err) {
+      console.log(err);
+    };
+    image.onload = () => {
+      this.sprite = Sprite({
+        x: this.x,
+        y: this.y,
+        width: 32,
+        height: 32,
+        image: image,
+        scaleX: this.scale,
+        scaleY: this.scale,
+      });
+    };
+  }
+}

src/Level.js

@@ -1,16 +1,19 @@
+import { Goal } from './Goal';
 import { Player } from './Player';
 import { Saw } from './Saw';
 import { BACK_FORTH } from './sawBehavior';
 
 export class Level {
   player;
   saws = [];
+  goals = [];
   isLevelLoaded = false;
   constructor(levelId, { game }) {
     this.game = game;
     this.loadLevel(levelId).then((levelData) => {
       this.createPlayer(levelData);
       this.createSaws(levelData);
+      this.createGoals(levelData);
       this.isLevelLoaded = true;
     });
   }
@@ -34,6 +37,9 @@ export class Level {
     this.saws.forEach((saw) => {
       saw.render(ctx);
     });
+    this.goals.forEach((goal) => {
+      goal.render();
+    });
   }
 
   update() {
@@ -43,6 +49,14 @@ export class Level {
     this.saws.forEach((saw) => {
       saw.update();
     });
+    this.goals.forEach((goal) => {
+      goal.update();
+    });
+  }
+  createGoals(levelData) {
+    levelData.g.forEach((g) => {
+      this.goals.push(new Goal(g.x, g.y, { level: this }));
+    });
   }
   createPlayer(levelData) {
     this.player = new Player({

src/Player.js

@@ -51,6 +51,8 @@ export class Player {
         x: this.pointMass.x,
         y: this.pointMass.y,
         anchor: { x: 0.5, y: 0.5 },
+        width: 8,
+        height: 8,
         image: image,
         scaleX: this.scale,
         scaleY: this.scale,

src/Saw.js

@@ -58,7 +58,6 @@ export class Saw {
       this.sprite = Sprite({
         x: this.x,
         y: this.y,
-        anchor: { x: 0.5, y: 0.5 },
         image: image,
         scaleX: this.scale,
         scaleY: this.scale,

src/level/level1.json

@@ -1 +1,7 @@
-{"p":{"x":400,"y":200},"r":7,"s":[],"b":[{"x":400,"y":400}],"g":[{"x":400,"y":800}]}
+{
+  "p": { "x": 400, "y": 200 },
+  "r": 7,
+  "s": [],
+  "b": [{ "x": 400, "y": 400 }],
+  "g": [{ "x": 368, "y": 700 }]
+}

src/utils.js

@@ -3,6 +3,16 @@ import { Vector } from 'kontra';
 export const scaleToFit = () => {
   // TODO (johnedvard) listen for window resize, debounce, and scale to fit mac height and width whilst keeping aspect ratio
 };
+export const isBoxCollision = (sprite1, sprite2) => {
+  // TODO (johnedvard) also incorporate anchor
+  if (!sprite1 || !sprite2) return false;
+  return (
+    sprite1.x < sprite2.x + sprite2.width * sprite2.scaleX &&
+    sprite1.x + sprite1.width * sprite1.scaleX > sprite2.x &&
+    sprite1.y < sprite2.y + sprite2.height * sprite2.scaleY &&
+    sprite1.height * sprite1.scaleY + sprite1.y > sprite2.y
+  );
+};
 export const lineIntersection = (p1, p2, p3, p4) => {
   const d = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x);
   if (d == 0) return null; // parallel lines