Javascript: How To Calculate Offsets For A Boundary Of A Moving Sprite When It's Speed Is Relative To Time?

I am current running into a bit of a math conundrum that has stumped me for days. I am building a JavaScript game and attempting to create boundary coordinates to manage the pathin

Solution 1:

First, you're delta time calculations aren't complete.

var now = Date.now();
var delta = now - lastUpdate;
lastUpdate = now;
update(delta / 1000);

If you now request update() to be invoked via requestAnimationFrame, the number passed as a parameter will be the number of miliseconds passed between the last and the current frame. So if the screen refresh rate is 60hz it's roughly 16.6ms.

This value alone though isn't meaningful - you need to compare it against a target value.

Say we want to achieve a framerate of 30fps - equal to ~33.3ms. If we take this value and divide it from the 16.6ms above, we get roughly 0.5. This makes complete sense. We want 30fps, the monitor refreshes at 60hz, so everything should move at half the speed.

Let's modify your main() function to reflect that:

var main = function() {
   var targetFrameRate = 30;
   var frameTime = 1000 / targetFrameRate;
   var now = Date.now();
   var delta = now - lastUpdate;
   lastUpdate = now;
   update(delta / frameTime);
   render();
   requestAnimationFrame(main);
 };

Second problem is the update() function itself. Let's have a look at the following block:

if (direction === 0) {
  obj.x += obj.speed * modifier;
  ctx.clearRect(obj.x - 7, 9, 17, 17);
  ctx.fillRect(obj.x, 60, 15, 15);
}

That means, wherever obj currently is, move it to the right by some amount. We are missing the boundary check at this point. You need to check if it would leave the bounds if we would move it to the right. In case it does, just move it next to the bounds.

Something like this:

var maxX=100;
 if (direction === 0) {
   var speed = obj.speed * modifier;
   if (obj.x + obj.width + speed > maxX) {
     direction = 1;
     obj.x = maxX - obj.width;
   } else {
     obj.x += speed;
   }
 }

Solution 2:

Maintain correct speed during collision frame

I notice that the object is always moving, which means the given answer does not correctly solve the problem.

An object should not slow down between frames if it has a constant speed

The illustration shows an object moving

• At top how far it would move without interruption.
• At center the point of collision. Note that there is still a lot of distance needed to cover to maintain the same speed.
• At bottom the object is moved left the remaining distance such the total distance traveled matches the speed.

To maintain speed the total distance traveled between frames must remain the same. Positioning the object at the point of collision reduces the distance traveled and thus the speed of the object during the collision frame can be greatly reduced

The correct calculation is as follows

const directions = {
     LEFT: 0,
     RIGHT: 1,
 };
 const rightWallX = 100;
 const leftWallX = 0;

 if (obj.direction === directions.RIGHT) {
     obj.x = obj.x + obj.speed;
     const remainDist = (rightWallX - obj.width) - obj.x;
     if (remainDist <= 0) {
         obj.direction = directions.LEFT;
         obj.x = (rightWallX - obj.width) + remainDist;
     }
 } elseif (obj.direction === directions.LEFT) {
     obj.x = obj.x - obj.speed;
     const remainDist = leftWallX - obj.x;
     if (remainDist >= 0) {
         obj.direction = directions.RIGHT;
         obj.x = leftWallX + remainDist;
     }
 }