keyPressed() function not rendering jump smoothly

Question

I just started using p5.js, I like the simplicity but there's one thing I can not grasp.

I set up the following Fiddle:

function Player(location, width, height, speed, weight) {
    this.pos = location;
    this.width = width;
    this.height = height;
    this.velocity = speed;
    this.mass = weight;
    this.grav = new p5.Vector(0, this.mass * 10);
}

function Wall(location, width, height) {
    this.pos = location;
    this.width = width;
    this.height = height;
}

var p1 = new Player(new p5.Vector(-100, 0), 50, 70, new p5.Vector(0, 0), 1);
var wall1 = new Wall(new p5.Vector(100, -100), 50, 50);
var collision = false;
var jump = new p5.Vector(0, -10);

function setup() {
    createCanvas(1000, 500);
    background(100);
}

function draw() {
    // Set zero-point
    translate(-p1.pos.x * 0.95 + 100, height - p1.height);

    // Apply gravity if p1 is not touching object
    if (p1.pos.y > 0) {
        // Do not apply p1.grav
        collision = true;
    } else {
        p1.pos.add(p1.grav);
        collision = false;
    }

    noStroke();
    fill(55, 37, 73);
    background(100);
    rect(p1.pos.x, p1.pos.y, p1.width, p1.height);
    rect(wall1.pos.x, wall1.pos.y, wall1.width, wall1.height);

    if (p1.pos.x < -p1.width * 2) {
        p1.velocity.x = 10;
        p1.pos.add(p1.velocity.x);
    } else {
        if (keyIsDown(LEFT_ARROW)) {
            p1.velocity.x = 5;
            p1.pos.sub(p1.velocity.x);
        } else if (keyIsDown(RIGHT_ARROW)) {
            p1.velocity.x = 5;
            p1.pos.add(p1.velocity.x);
        }
    }
}

function keyPressed() {
    if (key == ' ') {
        p1.pos.y += jump.y;
    }
}

So the final keyPressed() function is where the problem lies. Whenever the user presses space, I want the Player to "jump", basically adding a y-velocity to the object. The state it is in right now is simplified, it basically sets the position to whatever jump.y is. (It doesn't seem to be working right now, which is rather odd, because it did before.) That problem is resolved.

Anyways, that is not the main issue. The main issue is that (when it did work), the jump would be not animated at all, and basically just changed the position of the p1 object, as I described before (and how it should work as the code is right now), but I ultimately want the jump to be a much nicer animation, similar to the "walking" animation, which is rather smooth.

I already tried replacing p1.pos.y += jump.y; with something like

p1.velocity.y = jump.y;
p1.pos.y += p1.velocity.y;

but I got similar results.

I think this might be because the draw() function is repetitive, and the keyPressed() function isn't. I also tried putting the function inside of draw() but this didn't work.

I'm really lost here.

EDIT: Made an MCVE

Answer 1

You need a few things:

Step 1: If you want stuff to fall, you're going to need gravity. You can think of gravity as acceleration downwards, which in your code would be decreasing velocity.y by some constant. Of course, you also have to actually add this velocity.y to the player movement. Right now you only ever add velocity.x.

Step 2: If you want stuff to stop falling, you're going to need some logic that stops the player's downward movement. This could be as simple as checking the player's Y position, or you might get more advanced and check against game objects. In any case you're going to have to implement something that stops you from falling off the screen.

Step 3: Once you have those two things, you can fix your keyPressed() function by simply setting the velocity.y value to some value. You might also want a check in here to prevent the player from jumping in the air.

The moral of the story is: you have to break your problem down into smaller steps, and then work on one of those steps at a time. If you get stuck, post an MCVE and we'll go from there. Good luck.