From 0a6795e975b5c01371aa3cb261a1777b88c3c520 Mon Sep 17 00:00:00 2001 From: Edwin Date: Wed, 12 Jul 2023 22:06:03 -0400 Subject: [PATCH] Consistent frame rate for all elements --- asteroids.js | 6 +++--- index.js | 6 +++--- lander/confetti.js | 6 +++--- lander/explosion.js | 12 ++++++------ lander/lander.js | 7 ++++--- lander/toylander.js | 9 ++++++--- particle.js | 26 +++++++++++++++----------- 7 files changed, 40 insertions(+), 32 deletions(-) diff --git a/asteroids.js b/asteroids.js index e216539..97ffd67 100644 --- a/asteroids.js +++ b/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); } }; diff --git a/index.js b/index.js index ea2d856..f3d0d2a 100644 --- a/index.js +++ b/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(); } diff --git a/lander/confetti.js b/lander/confetti.js index 38e0cb0..174b7a7 100644 --- a/lander/confetti.js +++ b/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 }; diff --git a/lander/explosion.js b/lander/explosion.js index 1a10c41..08de8d0 100644 --- a/lander/explosion.js +++ b/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 }; diff --git a/lander/lander.js b/lander/lander.js index 44f6fb3..6718f11 100644 --- a/lander/lander.js +++ b/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(); diff --git a/lander/toylander.js b/lander/toylander.js index 45930c1..b3fe8bc 100644 --- a/lander/toylander.js +++ b/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 diff --git a/particle.js b/particle.js index 988be5e..d757303 100644 --- a/particle.js +++ b/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();