CODEWITHSUNDEEP
javascriptphysics
Marco
Marco

Reputation: 99

jumping code in javascript

I'm eleven and new to programming, and I'm making a simple platformer for a game comp at my school using javascript.

Right now I'm working on the code that makes the character jump. It's more complex than the character just going up and then down, because I want the movements to be fluent and look realistic. When the character jumps, it leaves the ground fast, then slows down as it goes higher, and when it reaches a certain point, it will start to fall slowly. It will speed up as it falls (probably by using some type of acceleration variable), and then hit the ground and stop completely.

I want the character to be able to move left and right in the air, and if the key is held, jump once, and then when the character hits the ground, if the key is still held, to jump again. (the in-game character should be able to jump quite high)

I've tried to do this already, but I had some hilarious errors happening.

Here's my (very broken) code:

    //movement (x)
    var maxSpeed = 12.5; 
    var xForce = 0;
    var kingXPos = 0;

    //movement (y)
    var yForce = 0;
    var kingYPos = 202;

    //LV design
    var floorHeight = 150;

var draw = function() {

//background and basics
    background(255, 0, 0);
    image(getImage("creatures/Winston"), kingXPos, kingYPos, 50, 50);

//level features (only the floor right now)
    fill(0, 0, 0);
    rect(0, 250, 400, floorHeight);

//right movement
        if (keyIsPressed && keyCode === RIGHT) {
    kingXPos = kingXPos + xForce;
    xForce = xForce + 0.25;
    if (xForce >= maxSpeed && keyIsPressed) {
      xForce = maxSpeed;
    }
  }

//left movement
  if (keyIsPressed && keyCode === LEFT) {
    kingXPos = kingXPos + xForce;
    xForce = xForce - 0.25;
    if (xForce <= -maxSpeed && keyIsPressed) {
      xForce = -maxSpeed;
    }
  }

//jump (not yet functional)
  if (keyTyped && keyCode === UP && kingYPos === floorHeight + 50) {
      kingYPos = kingYPos + yForce;
      yForce = yForce - 0.5;

  }

//other physics
  if (!keyIsPressed) {
    kingXPos = kingXPos + xForce;
    if (xForce > 0) {
      xForce = xForce - 0.25;
    } 
    else if (xForce < 0) {
      xForce = xForce + 0.25;
    }
  }
};

Upvotes: 2

Views: 9090

Answers (1)

slebetman
slebetman

Reputation: 113906

That's fairly impressive for someone just starting. You seem to have an intuitive understanding of geometry. However, there are some domain knowledge you may not be aware of due to how much education you've had.

In physics, the correct set of equations that describes motion is:

1. velocity = change_in_location / time

2. acceleration = change_in_velocity / time

Another thing you need to be aware of is that gravity is a form of acceleration. Specifically it is a downward acceleration of 9.8m/s/s

So rewriting all of the above:

new_location = (velocity * time) + old_location

new_velocity = (acceleration * time) + old_velocity

If you assume a constant time animation loop you can assume that time = 1. So that simplifies it to:

new_location = velocity + old_location

new_velocity = acceleration + old_velocity

This is enough to simulate gravity. Since gravity is just an acceleration:

gravity = SOME_NUMBER; // tune this to get the gravity you want

kingYPos = kingYPos + kingYVelocity;

kingYVelocity = kingYVelocity + gravity;

To jump just give the object an instant boost in velocity:

// jump:
kingYVelocity = -SOME_OTHER_NUMBER; // negative because "up"

Note: Domain knowledge is knowledge outside of programming that a programmer must understand in order to solve a particular problem. For example, a programmer who writes an accounting software should have some knowledge of accounting. In practice, not all programmers in the industry make the effort to acquire domain knowledge because sometimes there's a systems analyst/consultant writing the requirements for the software. But when you write your own software you have no choice but to acquire some domain knowledge.

Upvotes: 7

Related Questions