Consistent frame rate for all elements

asteroids.js

@@ -68,7 +68,7 @@ export const makeAsteroid = (state, getLanderPosition, onLanderCollision) => {
     onImpact
   );
 
-  const draw = () => {
+  const draw = (deltaTime) => {
     if (!impact) {
       const landerPosition = getLanderPosition();
       const impactXPadding = LANDER_WIDTH;
@@ -84,9 +84,9 @@ export const makeAsteroid = (state, getLanderPosition, onLanderCollision) => {
         onImpact(asteroidPosition, asteroid.getVelocity());
       }
 
-      asteroid.draw();
+      asteroid.draw(deltaTime);
     } else {
-      impact.draw();
+      impact.draw(deltaTime);
     }
   };
 

index.js

@@ -106,16 +106,16 @@ const animationObject = animate((timeSinceStart, deltaTime) => {
     bonusPointsManager.draw();
 
     if (sendAsteroid && timeSinceStart > asteroidCountdown) {
-      asteroids.forEach((a) => a.draw());
+      asteroids.forEach((a) => a.draw(deltaTime));
     }
 
     if (randomConfetti.length > 0) {
-      randomConfetti.forEach((c) => c.draw());
+      randomConfetti.forEach((c) => c.draw(deltaTime));
     }
 
     lander.draw(timeSinceStart, deltaTime);
   } else {
-    toyLander.draw();
+    toyLander.draw(deltaTime);
 
     toyLanderControls.drawTouchOverlay();
   }

lander/confetti.js

@@ -73,13 +73,13 @@ export const makeConfetti = (state, amount, passedPosition, passedVelocity) => {
     );
   });
 
-  const draw = () => {
+  const draw = (deltaTime) => {
     if (!hasPlayedAudio) {
       audio.playConfetti();
       hasPlayedAudio = true;
     }
-    confettiPieces.forEach((e) => e.draw());
-    twirlPieces.forEach((e) => e.draw());
+    confettiPieces.forEach((e) => e.draw(deltaTime));
+    twirlPieces.forEach((e) => e.draw(deltaTime));
   };
 
   return { draw };

lander/explosion.js

@@ -24,7 +24,7 @@ export const makeExplosion = (
     );
 
   return {
-    draw: () => smallExplosionChunks.forEach((e) => e.draw()),
+    draw: (deltaTime) => smallExplosionChunks.forEach((e) => e.draw(deltaTime)),
   };
 };
 
@@ -121,11 +121,11 @@ export const makeLanderExplosion = (state, position, velocity, angle) => {
     32
   );
 
-  const draw = () => {
-    noseCone.draw();
-    chunk1.draw();
-    chunk2.draw();
-    randomPieces.draw();
+  const draw = (deltaTime) => {
+    noseCone.draw(deltaTime);
+    chunk1.draw(deltaTime);
+    chunk2.draw(deltaTime);
+    randomPieces.draw(deltaTime);
   };
 
   return { draw };

lander/lander.js

@@ -445,11 +445,12 @@ export const makeLander = (state, onGameEnd) => {
       drawTrajectory(state, _position, _angle, _velocity, _rotationVelocity);
     }
 
-    if (_flipConfetti.length > 0) _flipConfetti.forEach((c) => c.draw());
+    if (_flipConfetti.length > 0)
+      _flipConfetti.forEach((c) => c.draw(deltaTime));
 
-    if (_gameEndConfetti) _gameEndConfetti.draw();
+    if (_gameEndConfetti) _gameEndConfetti.draw(deltaTime);
 
-    if (_gameEndExplosion) _gameEndExplosion.draw();
+    if (_gameEndExplosion) _gameEndExplosion.draw(deltaTime);
 
     if (!gameEndData || (gameEndData && gameEndData.landed)) _drawLander();
 

lander/toylander.js

@@ -1,4 +1,5 @@
 import { randomBetween, randomBool } from "../helpers/helpers.js";
+import { INTERVAL } from "../helpers/constants.js";
 
 export const makeToyLander = (
   state,
@@ -43,13 +44,15 @@ export const makeToyLander = (
     onRightRotation();
   };
 
-  const draw = () => {
+  const draw = (deltaTime) => {
+    const deltaTimeMultiplier = deltaTime / INTERVAL;
+
     if ((_engineOn && _rotatingLeft) || (_engineOn && _rotatingRight)) {
       onEngineAndRotation();
     }
 
-    if (_rotatingRight) _rotationVelocity += 0.01;
-    if (_rotatingLeft) _rotationVelocity -= 0.01;
+    if (_rotatingRight) _rotationVelocity += deltaTimeMultiplier * 0.01;
+    if (_rotatingLeft) _rotationVelocity -= deltaTimeMultiplier * 0.01;
     _angle += (Math.PI / 180) * _rotationVelocity;
 
     // Move to top left of the lander and then rotate at that origin

particle.js

@@ -1,5 +1,5 @@
-import { GRAVITY } from "./helpers/constants.js";
-import { randomBetween, randomBool } from "./helpers/helpers.js";
+import { GRAVITY, INTERVAL } from "./helpers/constants.js";
+import { randomBool } from "./helpers/helpers.js";
 
 export const makeParticle = (
   state,
@@ -27,15 +27,19 @@ export const makeParticle = (
   let headingDeg = Math.atan2(velocity.y, velocity.x) * (180 / Math.PI);
   let stopped = false;
 
-  const update = () => {
+  const update = (deltaTime) => {
+    const deltaTimeMultiplier = deltaTime / INTERVAL;
+
     velocity.x = startVelocity.x + Math.cos((headingDeg * Math.PI) / 180);
-    velocity.y += GRAVITY;
-    rotationVelocity += rotationDirection ? 0.1 : -0.1;
+    velocity.y += deltaTimeMultiplier * GRAVITY;
+    rotationVelocity += rotationDirection
+      ? deltaTimeMultiplier * 0.1
+      : deltaTimeMultiplier * -0.1;
     rotationAngle = (rotationAngle + rotationVelocity) * friction;
 
     let prospectiveNextPosition = {
-      x: position.x + velocity.x,
-      y: position.y + velocity.y,
+      x: position.x + deltaTimeMultiplier * velocity.x,
+      y: position.y + deltaTimeMultiplier * velocity.y,
     };
 
     if (prospectiveNextPosition.y >= landingData.terrainHeight) {
@@ -61,8 +65,8 @@ export const makeParticle = (
         if (countSimilarCoordinates(positionLog) > 3) stopped = true;
 
         prospectiveNextPosition = {
-          x: position.x + velocity.x,
-          y: position.y + velocity.y,
+          x: position.x + deltaTimeMultiplier * velocity.x,
+          y: position.y + deltaTimeMultiplier * velocity.y,
         };
 
         // Provide the point just prior to collision so particles reflect off
@@ -86,8 +90,8 @@ export const makeParticle = (
     position.y = prospectiveNextPosition.y;
   };
 
-  const draw = () => {
-    if (!stopped) update();
+  const draw = (deltaTime) => {
+    if (!stopped) update(deltaTime);
 
     CTX.save();