feat: Use levelData to create level

src/Game.js

@@ -22,39 +22,19 @@ export class Game {
     let loop = GameLoop({
       update: function () {
         game.level.update();
-        game.checkCollisions();
       },
       render: function () {
         game.level.render(game.context);
       },
     });
+
     loop.start(); // start the game
   }
 
   loadLevel(levelId) {
     this.level = new Level(levelId, { game: this });
   }
 
-  // TODO (johnedvard) Move collisions to own file?
-  checkCollisions() {
-    const rope = this.level.player.rope;
-    for (let i = 0; i < rope.length - 2; 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);
-        }
-      });
-    }
-  }
-
   addPointerListeners() {
     onPointer('down', () => {
       this.isDragging = true;

src/Level.js

@@ -5,11 +5,13 @@ import { BACK_FORTH } from './sawBehavior';
 export class Level {
   player;
   saws = [];
+  isLevelLoaded = false;
   constructor(levelId, { game }) {
     this.game = game;
     this.loadLevel(levelId).then((levelData) => {
-      this.createPlayer();
-      this.createSaws();
+      this.createPlayer(levelData);
+      this.createSaws(levelData);
+      this.isLevelLoaded = true;
     });
   }
 
@@ -28,22 +30,50 @@ export class Level {
   }
 
   render(ctx) {
+    if (!this.isLevelLoaded) return;
     this.player.render(ctx);
     this.saws.forEach((saw) => {
       saw.render(ctx);
     });
   }
 
   update() {
+    if (!this.isLevelLoaded) return;
+    this.checkCollisions();
     this.player.update();
     this.saws.forEach((saw) => {
       saw.update();
     });
   }
-  createPlayer() {
-    this.player = new Player(40, 40, { game: this.game });
+  createPlayer(levelData) {
+    this.player = new Player({
+      levelData,
+      game: this.game,
+    });
+  }
+  createSaws(levelData) {
+    levelData.s.forEach((saw) => {
+      this.saws.push(new Saw(saw.x, saw.y, { behavior: BACK_FORTH }));
+    });
   }
-  createSaws() {
-    this.saws.push(new Saw(100, 200, { behavior: BACK_FORTH }));
+
+  // TODO (johnedvard) Move collisions to own file?
+  checkCollisions() {
+    const rope = this.player.rope;
+    for (let i = 0; i < rope.length - 2; i++) {
+      this.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.player.cutRope(i);
+        }
+      });
+    }
   }
 }

src/Player.js

@@ -13,10 +13,17 @@ export class Player {
   sprite = { render: () => {}, x: 0, y: 0 }; // draw sprite on pointmass position
   scale = 4;
 
-  constructor(x, y, { game }) {
+  constructor({ game, levelData }) {
     this.game = game;
-    this.pointMass = new PointMass(x, y, { game, mass: 2 });
-    this.createRope();
+    const ropeLength = levelData.r;
+    const startX = levelData.p.x;
+    const startY = levelData.p.y;
+    this.pointMass = new PointMass(
+      startX,
+      startY + ropeLength * RESTING_DISTANCE,
+      { game, mass: 2 }
+    );
+    this.createRope({ startX, startY, ropeLength });
     this.createSprite();
     this.playerControls = new PlayerControls(this);
   }
@@ -51,15 +58,15 @@ export class Player {
     };
   }
 
-  createRope() {
-    const anchor = new PointMass(this.game.canvas.width / 2, 100, {
+  createRope({ startX, startY, ropeLength }) {
+    const anchor = new PointMass(startX, startY, {
       isAnchor: true,
       game: this.game,
     });
     this.rope.push(anchor);
-    for (let i = 1; i < 8; i++) {
+    for (let i = 1; i < ropeLength; i++) {
       const p1 = this.rope[this.rope.length - 1];
-      const p2 = new PointMass(this.game.canvas.width / 2, i * 25 + 100, {
+      const p2 = new PointMass(startX, i * RESTING_DISTANCE + startY, {
         game: this.game,
       });
       p1.attachTo(p2);

src/static/level/level1.json

@@ -1,12 +1,10 @@
 {
-  "id": "level1",
-  "player": {
+  "p": {
     "x": 400,
-    "y": 400
+    "y": 200
   },
-  "objects": {
-    "saws": [],
-    "bricks": [{ "x": 400, "y": 400 }],
-    "goals": [{ "x": 400, "y": 800 }]
-  }
+  "r": 7,
+  "s": [],
+  "b": [{ "x": 400, "y": 400 }],
+  "g": [{ "x": 400, "y": 800 }]
 }