feat: Add level

src/Game.js

@@ -1,60 +1,57 @@
 import { init, initPointer, initInput, GameLoop, onPointer } from 'kontra';
-import { Player } from './Player';
-import { Saw } from './Saw';
+import { Level } from './Level';
 import { lineIntersection } from './utils';
-import { BACK_FORTH } from './sawBehavior';
 
 export class Game {
   canvas;
   context;
   player;
   saw;
+  level;
   constructor() {
     const game = this;
     let { canvas, context } = init();
     this.canvas = canvas;
     this.context = context;
     initPointer();
     initInput();
-    this.createPlayer();
-    this.createSaw();
+    this.addPointerListeners();
+
+    this.loadLevel('level1');
 
     let loop = GameLoop({
       update: function () {
-        game.player.update();
-        game.saw.update();
+        game.level.update();
         game.checkCollisions();
       },
       render: function () {
-        game.player.render(context);
-        game.saw.render(context);
+        game.level.render(game.context);
       },
     });
     loop.start(); // start the game
-    this.addPointerListeners();
   }
 
-  createPlayer() {
-    this.player = new Player(40, 40, this);
-  }
-  createSaw() {
-    this.saw = new Saw(100, 200, { behavior: BACK_FORTH });
+  loadLevel(levelId) {
+    this.level = new Level(levelId, { game: this });
   }
+
+  // TODO (johnedvard) Move collisions to own file?
   checkCollisions() {
-    const rope = this.player.rope;
+    const rope = this.level.player.rope;
     for (let i = 0; i < rope.length - 2; i++) {
-      if (
-        // TODO (johnedvard) add to y-axis if saw is up down
-        lineIntersection(
-          { x: this.saw.x - 5, y: this.saw.y },
-          { x: this.saw.x + 5, y: this.saw.y },
-          { x: rope[i].x, y: rope[i].y },
-          { x: rope[i + 1].x, y: rope[i + 1].y }
-        )
-      ) {
-        console.log('intersection happened at index: ', i);
-        this.player.cutRope(i);
-      }
+      this.level.saws.forEach((saw) => {
+        if (
+          // TODO (johnedvard) add to y-axis if saw is up down
+          lineIntersection(
+            { x: saw.x - 5, y: saw.y },
+            { x: saw.x + 5, y: saw.y },
+            { x: rope[i].x, y: rope[i].y },
+            { x: rope[i + 1].x, y: rope[i + 1].y }
+          )
+        ) {
+          this.level.player.cutRope(i);
+        }
+      });
     }
   }
 

src/Level.js

@@ -0,0 +1,33 @@
+import { Player } from './Player';
+import { Saw } from './Saw';
+import { BACK_FORTH } from './sawBehavior';
+
+export class Level {
+  player;
+  saws = [];
+  constructor(levelId, { game }) {
+    this.game = game;
+    this.createPlayer();
+    this.createSaw();
+  }
+
+  render(ctx) {
+    this.player.render(ctx);
+    this.saws.forEach((saw) => {
+      saw.render(ctx);
+    });
+  }
+
+  update() {
+    this.player.update();
+    this.saws.forEach((saw) => {
+      saw.update();
+    });
+  }
+  createPlayer() {
+    this.player = new Player(40, 40, { game: this.game });
+  }
+  createSaw() {
+    this.saws.push(new Saw(100, 200, { behavior: BACK_FORTH }));
+  }
+}

src/Player.js

@@ -10,9 +10,9 @@ export class Player {
   rope = []; // list of pointmasses
   pointMass; // used to attach to the end of the rope
   playerControls;
-  sprite = { render: () => {} }; // draw sprite on pointmass position
+  sprite = { render: () => {}, x: 0, y: 0 }; // draw sprite on pointmass position
 
-  constructor(x, y, game) {
+  constructor(x, y, { game }) {
     this.game = game;
     this.pointMass = new PointMass(x, y, { game, mass: 2 });
     this.createRope();
@@ -64,7 +64,7 @@ export class Player {
       p1.attachTo(p2);
       this.rope.push(p2);
     }
-    this.pointMass.x = this.rope[this.rope.length - 1];
+    // make player's pointmass attach to the rope
     this.rope[this.rope.length - 1].attachTo(this.pointMass);
     this.rope.push(this.pointMass);
   }

src/PlayerControls.js

@@ -26,6 +26,6 @@ export class PlayerControls {
   }
 
   initControls() {
-    onInput(['c'], () => this.player.cutRope(3));
+    onInput(['c'], () => this.player.cutRope(0));
   }
 }

src/assets/level/level1.js

@@ -0,0 +1,12 @@
+export default {
+  id: 'level1',
+  player: {
+    x: 400,
+    y: 400,
+  },
+  objects: {
+    saws: [],
+    bricks: [{ x: 400, y: 400 }],
+    goals: [{ x: 400, y: 800 }],
+  },
+};