'Gravity' not working properly in Javascript/HTML5 game

Question

I'm writing a simple game with javascript/html5, and I'm trying to implement "gravity".

The code I have is sort of like this:

gravity = 4; acceleration = 1.1; function gameLoop() { gravity = gravity*acceleration; if (characterPositionY < 600) characterPositionY = characterPositionY + gravity; setTimeout(gameLoop,1000/30); }

The figure "600" is the bottom of the screen, the "ground", if you will, where the player should stop falling.

Unfortunately, since the gravity makes the character fall by at least 4 pixels (and increasing) in each loop cycle... the character will often stop past, or before the ground. Like this, for example:

[1] characterPositionY is 590

-add 4-

[2] characterPositionY is 594

-add 4-

[3] characterPositionY is 598

-add 4-

[4] characterPositionY is 602

...past the ground.

I've never really made any games before, and I'm just making it all up as I go along. There are probably much better ways to go about this.

Your physics formula is wrong. Simplifying a little, gravity is a constant downward force which therefore adds a constant increase to velocity in each timestep. Thus the equation should read something more like "downward_speed += gravity_acceleration". gravity_acceleration would be about 10 metres per second - converting that to pixels per timestep is down to you. — Kylotan
– Kylotan, Commented Nov 23, 2009 at 11:14

Paul · Accepted Answer · 2009-11-22 13:51:47Z

5

Change your test to something like:

if (characterPositionY + gravity < 600) characterPositionY = characterPositionY + gravity; else characterPositionY = 600;

answered Nov 22, 2009 at 13:51

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mattbasta Over a year ago

You could also use the min function: characterPositionY = min(characterPositionY + gravity, 600); It takes up less code and one less operation on the CPU.

Erkan Haspulat · Accepted Answer · 2009-11-22 13:50:58Z

function gameLoop(){ gravity = gravity*acceleration; if (characterPositionY < 600-gravity) characterPositionY = characterPositionY + gravity; setTimeout(gameLoop,1000/30); }

Maybe this would help?

MiffTheFox · Accepted Answer · 2009-11-22 13:53:48Z

 if (characterPositionY < 600) { characterPositionY = characterPositionY + gravity; if (characterPositionY > 600) characterPositionY = 600; }

user216482 · Accepted Answer · 2009-11-22 15:04:16Z

gravity = 0; /* rate of change of position due to grav*/ acceleration = .4; /* rate of change of grav*/ function gameLoop(){ if (characterPositionY < 600)/* above ground*/ { gravity = gravity + acceleration; /*increase speed of drop*/ characterPositionY = characterPositionY + gravity; /*apply speed to position*/ } if (characterPositionY >= 600)/*at or below ground*/ { characterPositionY = 600; /*set on ground if character has 'clipped' through*/ gravity = 0; /*touching the ground has stopped Y movement due to gravity*/ } setTimeout(gameLoop,1000/30); }

The gravity var really represents gravity's contribution to Y movement. Consider renaming it to something like fallSpeed.

Also, note that the var ,acceleration, is added to gravity. This more accurately represents constant acceleration. You might also consider renaming acceleration to gravAcceleration.

I hope this helps.

Collectives™ on Stack Overflow

'Gravity' not working properly in Javascript/HTML5 game

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related