fix: add frame factor calculations

js/config.js

@@ -29,11 +29,11 @@ const CONFIG = {
     gameOverDelay: 10000,
   },
   speed: {
-    slowEnemyCrossTimeStart: 120,
+    slowEnemyCrossTimeStart: 240,
-    slowEnemyCrossTimeCap: 20,
+    slowEnemyCrossTimeCap: 30,
     slowEnemyCrossTimeCapWave: 50,
-    fastEnemyCrossTimeStart: 60,
+    fastEnemyCrossTimeStart: 120,
-    fastEnemyCrossTimeCap: 10,
+    fastEnemyCrossTimeCap: 15,
     fastEnemyCrossTimeCapWave: 50,
     bossCrossTime: 60,
     projectileCrossTime: 0.43,

js/enemy.js

@@ -112,9 +112,9 @@ class Enemy {
   }
 
   update() {
-    this.y += this.speed;
+    this.y += this.speed * frameFactor;
-    this.pulse += 0.05;
+    this.pulse += 0.05 * frameFactor;
-    if (this.flashTimer > 0) this.flashTimer--;
+    if (this.flashTimer > 0) this.flashTimer -= frameFactor;
   }
 
   draw() {

js/game.js

@@ -230,7 +230,7 @@ function update() {
   if (gameState !== "playing") return;
 
   if (wavePauseActive) {
-    wavePauseTimer--;
+    wavePauseTimer -= frameFactor;
     if (wavePauseTimer <= 0) {
       wavePauseActive = false;
       waveEnemiesLeft = getEnemiesPerWave();
@@ -239,7 +239,7 @@ function update() {
       }
     }
   } else if (waveEnemiesLeft > 0) {
-    spawnTimer++;
+    spawnTimer += frameFactor;
     const spawnInterval = CONFIG.game.waveInterval / getEnemiesPerWave();
     if (spawnTimer >= spawnInterval) {
       spawnEnemy();
@@ -248,7 +248,7 @@ function update() {
     }
   }
 
-  waveTimer++;
+  waveTimer += frameFactor;
   if (waveTimer >= CONFIG.game.waveInterval && !wavePauseActive && waveEnemiesLeft <= 0) {
     wave++;
     waveTimer = 0;
@@ -283,7 +283,7 @@ function update() {
   }
 
   if (shakeTimer > 0) {
-    shakeTimer--;
+    shakeTimer -= frameFactor;
     shakeAmount *= 0.9;
   }
 }
@@ -329,7 +329,8 @@ function draw() {
   ctx.restore();
 }
 
-function loop() {
+function loop(timestamp) {
+  calcDt(timestamp);
   update();
   draw();
   if (gameLoopStarted) {

js/intro.js

@@ -83,27 +83,30 @@ function runIntro() {
     ctx.restore();
   }
 
-  function introLoop() {
+  function introLoop(timestamp) {
-    frame++;
+    calcDt(timestamp);
+    const prevFrame = Math.floor(frame);
+    frame += frameFactor;
+    const curFrame = Math.floor(frame);
 
     if (frame <= I.fadeInFrames) {
       textAlpha = Math.min(1, frame / I.fadeInFrames);
     }
 
-    if (frame === I.shot1Frame) shots.push({ progress: 0, trail: [], done: false });
+    if (prevFrame < I.shot1Frame && curFrame >= I.shot1Frame) shots.push({ progress: 0, trail: [], done: false });
-    if (frame === I.shot2Frame) shots.push({ progress: 0, trail: [], done: false });
+    if (prevFrame < I.shot2Frame && curFrame >= I.shot2Frame) shots.push({ progress: 0, trail: [], done: false });
-    if (frame === I.shot3Frame) shots.push({ progress: 0, trail: [], done: false });
+    if (prevFrame < I.shot3Frame && curFrame >= I.shot3Frame) shots.push({ progress: 0, trail: [], done: false });
 
     for (let s of shots) {
       if (s.done) continue;
-      s.progress = Math.min(1, s.progress + I.shotSpeed);
+      s.progress = Math.min(1, s.progress + I.shotSpeed * frameFactor);
 
       const x = shooterX + (lTargetX - shooterX) * s.progress;
       const y = shooterY + (lTargetY - shooterY) * s.progress;
 
       s.trail.push({ x, y, life: 1 });
       if (s.trail.length > I.trailMax) s.trail.shift();
-      for (let t of s.trail) t.life -= I.trailDecay;
+      for (let t of s.trail) t.life -= I.trailDecay * frameFactor;
       s.trail = s.trail.filter((t) => t.life > 0);
 
       if (s.progress >= 1) {

js/particle.js

@@ -10,9 +10,9 @@ class Particle {
     this.size = S.particleSizeMin + Math.random() * (S.particleSizeMax - S.particleSizeMin);
   }
   update() {
-    this.x += this.vx;
+    this.x += this.vx * frameFactor;
-    this.y += this.vy;
+    this.y += this.vy * frameFactor;
-    this.life -= this.decay;
+    this.life -= this.decay * frameFactor;
     this.vx *= S.particleDamping;
     this.vy *= S.particleDamping;
   }

js/projectile.js

@@ -36,12 +36,12 @@ class Projectile {
     if (this.trail.length > S.projectileTrailLength) this.trail.shift();
 
     for (let t of this.trail) {
-      t.life -= S.projectileTrailDecay;
+      t.life -= S.projectileTrailDecay * frameFactor;
     }
     this.trail = this.trail.filter((t) => t.life > 0);
 
-    this.x += this.vx;
+    this.x += this.vx * frameFactor;
-    this.y += this.vy;
+    this.y += this.vy * frameFactor;
 
     if (this.isHit && this.target && !this.hit) {
       const dx = this.target.x - this.x;

js/utils.js

@@ -1,3 +1,15 @@
+let frameFactor = 1;
+let _lastTime = 0;
+
+function calcDt(timestamp) {
+  if (!_lastTime || !timestamp) {
+    frameFactor = 1;
+  } else {
+    frameFactor = Math.min((timestamp - _lastTime) / (1000 / 60), 6);
+  }
+  _lastTime = timestamp || performance.now();
+}
+
 function crossTimeToSpeed(crossTimeSec) {
   const playH = H - S.removeZone;
   return playH / (crossTimeSec * 60);
@@ -191,7 +203,7 @@ function drawGrid() {
   ctx.strokeStyle = CONFIG.colors.primaryGrid;
   ctx.lineWidth = 1;
   const gridSize = S.gridSize;
-  bgOffset = (bgOffset + S.gridSpeed) % gridSize;
+  bgOffset = (bgOffset + S.gridSpeed * frameFactor) % gridSize;
   for (let x = 0; x <= W; x += gridSize) {
     ctx.beginPath();
     ctx.moveTo(x, 0);