How do you code jumping in a javascript game?

Viewed 576

I am writing a game in javascript for the first time most of my code is not efficient. I am stuck on how to code a jumping method for my cube(the character for my game). The jump works but the player can double jump. The double jump occurs on the way down if the user presses the jump key again. I have tried setting a variable which will be modified when the player is on the ground and if it is true then your only allowed to jump but it hasn't worked. Here is the code:

    //setting screen up
const canvas = document.getElementById('canvas');
const c = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;

//ground
gHeight =  canvas.height/1.3
function ground(){
    c.fillStyle = 'white';
    c.fillRect(0,gHeight,canvas.width,canvas.height-gHeight);
}
//player
class Player{
    constructor(x,y,w,h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = 'rgb(92,168,255)';
        this.l = false;
        this.r = false;
        this.speed = 10
        this.hp = 100;
        this.jump = false;
        this.jumpC = 0;
    }
    draw(){
        c.fillStyle = this.color;
        c.fillRect(this.x,this.y,this.w,this.h);
    }
    update(){
        this.draw();
        //gravity
        if(this.y < gHeight - this.h){
            this.y += 5;
        }
        //movement
        if(this.l == true){
            this.x -= this.speed;
        }
        if(this.r == true){
            this.x += this.speed;
        }
        //jump
        if(this.jump == true){
            this.y -= 10;
            this.jumpC += 5;
        }
        if (this.jumpC >= 100){
            this.jump = false;
            this.jumpC = 0;
        }
    }
}
var player = new Player(100, 100,50,50);
//main loop
var animationId;
function animate(){
    c.fillStyle = 'rgba(0,0,0,0.7)';
    c.fillRect(0,0, canvas.width, canvas.height);
    animationId = requestAnimationFrame(animate);
    
    //drawing the ground
    ground();
    //drawing the player
    player.update();
    //ending game
    if(player.hp == 0){
        cancelAnimationFrame(animationId);
    }
}
//keypress
addEventListener('keydown', (event)=>{
    if(event.keyCode == 37) {
        player.l = true;
    }
    if(event.keyCode == 39) {
        player.r = true;
    }
    if(event.keyCode == 38 && player.jump == false){
        player.jump = true;
    }
});
//keyup
addEventListener('keyup', (event)=>{
    if(event.keyCode == 37 ) {
        player.l = false;
    }
    if(event.keyCode == 39) {
        player.r = false;
    }
});
animate();

tell me if more info is needed

1 Answers

After the jump make it impossible to jump until the player reaches the ground.

if(event.keyCode == 38 && player.jump == false){ player.jump = true; }

I would add another comparison in this if like this:

if(event.keyCode == 38 && player.jump == false && player.isOnGround()){ player.jump = true; } To check if the user landed

Related