made balls update-able

game/levels.js

@@ -9,10 +9,14 @@ function updateHTMLElementPosition(element, x, y) {
     element.style.left = left + 'px';
     element.style.transform = 'translateX(-50%)';
 }
+function setupLevel(gameState) {
+    gameState.gameObjectsToUpdate = [];
+}
 let description1 = document.getElementById("description1");
 let description2 = document.getElementById("description2");
 // TUTORIAL BEGIN
 function initLevel1(engine, gameState) {
+    setupLevel(gameState);
     new Goal(200, 300, engine, gameState);
     gameState.dropCoords = [450, 600];
 
@@ -24,6 +28,7 @@ function initLevel1(engine, gameState) {
     new GoodPlatform(400, 625, 500, 625, engine);
 }
 function initLevel2(engine, gameState) {
+    setupLevel(gameState);
     new Goal(200, 600, engine, gameState);
     gameState.dropCoords = [450, 50];
     new BadPlatform(350, 300, 550, 300, engine);
@@ -34,6 +39,7 @@ function initLevel2(engine, gameState) {
 // TUTORIAL END
 // LEVELS BEGIN
 function initLevel3(engine, gameState) {
+    setupLevel(gameState);
     description1.innerText = ``;
     description2.innerText = ``;
     new Goal(350, 550, engine, gameState);
@@ -42,17 +48,20 @@ function initLevel3(engine, gameState) {
     new BadPlatform(450, 500, 450, 649, engine)
 }
 function initLevel4(engine, gameState) {
+    setupLevel(gameState);
     new Goal(700, 600, engine, gameState);
     gameState.dropCoords = [450, 50];
     new BadPlatform(550, 200, 550, 700, engine);
 }
 function initLevel5(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [100, 400];
     new BadPlatform(400, 300, 400, 800, engine);
     // new Slingshot(300, 500, engine, gameState);
     new Goal(800, 400, engine, gameState);
 }
 function initLevel6(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [800, 400];
     let mp = new MovingPlatform(500, 300, 600, 300, engine, 0, 10);
     gameState.gameObjectsToUpdate.push(mp);
@@ -61,29 +70,34 @@ function initLevel6(engine, gameState) {
     new Goal(200, 400, engine, gameState);
 }
 function initLevel7(engine, gameState) {
+    setupLevel(gameState);
     new Goal(700, 300, engine, gameState);
     gameState.dropCoords = [100, 100];
     new BadPlatform(500, 0, 500, 400, engine);
     new BadPlatform(500, 400, 800, 400, engine);
 }
 function initLevel8(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [100, 400];
     // new BouncyPlatform(200, 600, 300, 600, engine);
     new BadPlatform(600, 0, 600, 150, engine);
     new BadPlatform(600, 250, 600, 800, engine);
     new Goal(700, 500, engine, gameState);
 }
 function initLevel9(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [200, 500];
     // new Slingshot(300, 550, engine, gameState);
     // new BouncyPlatform(500, 400, 500, 300, engine);
     new Goal(100, 100, engine, gameState);
 }
 function initLevel10(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [200, 600];
     new Goal(700, 100, engine, gameState);
 }
 function initLevel11(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [700, 100];
     // new BouncyPlatform(200, 600, 300, 700, engine);
     new Goal(500, 400, engine, gameState);
@@ -92,6 +106,7 @@ function initLevel11(engine, gameState) {
     new BadPlatform(600, 350, 600, 500, engine);
 }
 function initLevel12(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [100, 100];
     new Goal(700, 700, engine, gameState);
     new BadPlatform(0, 200, 600, 200, engine);
@@ -106,6 +121,7 @@ function initLevel12(engine, gameState) {
     new BadPlatform(600, 600, 1000, 600, engine);
 }
 function initLevel13(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [100, 100];
     new Goal(700, 700, engine, gameState);
     new BadPlatform(200, 0, 200, 200, engine);
@@ -118,6 +134,7 @@ function initLevel13(engine, gameState) {
     new BadPlatform(500, 600, 500, 1000, engine);
 }
 function initLevel14(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [700, 100];
     new Goal(100, 400, engine, gameState);
     new BadPlatform(500, 0, 500, 100, engine);
@@ -130,13 +147,15 @@ function initLevel14(engine, gameState) {
     new BadPlatform(400, 600, 400, 1000, engine);
 }
 function initLevel15(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [700, 100];
     new Goal(150, 100, engine, gameState);
     new BadPlatform(250, 0, 250, 400, engine);
     new BadPlatform(250, 400, 500, 400, engine);
     new BadPlatform(50, 0, 50, 400, engine);
 }
 function initLevel16(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [400, 100];
     new Goal(400, 700, engine, gameState);
     // left side
@@ -151,6 +170,7 @@ function initLevel16(engine, gameState) {
     new BadPlatform(500, 400, 400, 500, engine);
 }
 function initLevel17(engine, gameState) {
+    setupLevel(gameState);
     gameState.dropCoords = [600, 100];
     new BadPlatform(150, 200, 800, 200, engine);
     new BadPlatform(150, 200, 150, 400, engine);

game/objects/ball.js

@@ -1,9 +1,9 @@
 import { GameObject, CATEGORY_MOUSE, CATEGORY_DEFAULT, relativeX, relativeY } from "./gameObject.js";
 
-const DOT_SIZE = 20;
+const DOT_SIZE = 30;
 
 export class Ball extends GameObject {
-
+    #engine
     constructor(x, y, engine) {
         super();
         x = relativeX(x);
@@ -25,5 +25,9 @@ export class Ball extends GameObject {
         // add it to the physics world
         Matter.Composite.add(engine.world, bod);
         this.bod = bod;
+        this.#engine = engine;
+    }
+
+    update() {
     }
 }

index.html

@@ -69,7 +69,7 @@
 }
 
 function dropBall() {
-    new Ball(gameState.dropCoords[0], gameState.dropCoords[1], engine);
+    gameState.gameObjectsToUpdate.push(new Ball(gameState.dropCoords[0], gameState.dropCoords[1], engine));
     lastBallDrop = Date.now();
 }