Game not iterating, not sure why

Question

I'm trying to make a browser game with pure javascript. I was using codesandbox.io for writing it at first, but the I decided I was done for the day and needed to check if it works in a browser. Lo and behold, it does not. I genuinely have no idea why it's not working.

All the code is supposed to do, is make a square jump. which it does do, however right when you let go of the up key, the page hangs, it won't even refresh. Doesn't crash the browser though. Anyways, here's my code.

class player {
  constructor(gameW, gameH) {
    this.gameH = gameH;

    this.width = 50;
    this.heigth = 50;

    this.maxUpV = 5;
    this.currV = 0;
    this.gravConst = 50;

    this.position = {
      x: 50,
      y: 150
    };
  }

  jumpUp() {
    this.currV = -this.maxUpV;
  }
  fall(falling) {
    while (this.position.y < 150) {
      this.currV = this.maxUpV;
    }
    return (falling = false);
  }

  draw(ctx) {
    ctx.fillStyle = "#F00";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.heigth);
  }

  update(deltaTime) {
    if (!deltaTime) {
      return;
    }

    this.position.y += this.currV;

    if (this.position.y + this.heigth > 200) {
      this.position.y = 150;
    }
  }
}

class input {
  constructor(Player) {
    this.falling = false;

    document.addEventListener("keydown", event => {
      if (event.keyCode === 38) {
        if (!Player.fall(this.falling)) {
          Player.jumpUp();
        }
      }
    });

    document.addEventListener("keyup", event => {
      if (event.keyCode === 38) {
        this.falling = true;
        Player.fall(this.falling);
      }
    });
  }
}



const GAME_WIDTH = 800;
const GAME_HEIGHT = 300;

var canvas = document.getElementById("gameScreen");
var ctx = canvas.getContext("2d");

var Player = new player(GAME_WIDTH, GAME_HEIGHT);

ctx.clearRect(0, 0, 800, 300);

ctx.fillRect(0, 200, 800, 200);
ctx.fillRect(400, 100, 50, 1);

Player.draw(ctx);

new input(Player);

var lastTime = 0;

function gameLoop(timeStamp) {
  var deltaTime = timeStamp - lastTime;

  lastTime = timeStamp;

  ctx.clearRect(0, 0, 800, 200);

  Player.update(deltaTime);
  Player.draw(ctx);

  requestAnimationFrame(gameLoop);
}

gameLoop();

Oh and also, when I was writing it in codesandbox.io, the classes were separate files that I imported into the main .js file. That gave me an error in the browser, so I just put everything in one file. I tried both Vivaldi and Firefox, to no avail.

Answer 1

I originally misread the question. Your code is locking up in your fall function. Once you hit the max height you were getting stuck in a loop waiting for the fall but never returning control to anywhere that could generate a fall. I'm having some difficulty understanding your max height validation.

The fall function will always return false.

 fall(falling) {
   while (this.position.y < 150) {
     this.currV = this.maxUpV;
   }
   return (falling = false);
 }

The return value of an assignment is the value assigned, so in this case your return value will always be false

I also had to modify the logic for the end button press

if (!Player.fall(this.falling)) {
  Player.jumpUp();
}

The conditional was basically always returning true and could be simplified.

I hope this helps!

class player {
  constructor(gameW, gameH) {
    this.gameH = gameH;

    this.width = 50;
    this.height = 50;

    this.maxUpV = 5;
    this.currV = 0;
    this.gravConst = 50;

    this.position = {
      x: 50,
      y: 150
    };
  }

  jumpUp() {
    this.currV = -this.maxUpV;
  }
  fall(falling) {
    if (this.position.y <150) {
       this.currV = this.maxUpV;
      return true
    }
    return false;
  }

  draw(ctx) {
    ctx.fillStyle = "#F00";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }

  update(deltaTime) {
    if (!deltaTime) {
      return;
    }

    this.position.y += this.currV;

    if (this.position.y + this.height > 200) {
      this.position.y = 150;
    }
  }
}

class input {
  constructor(Player) {
    this.falling = false;

    document.addEventListener("keydown", event => {
      if (event.keyCode === 38) {
        if (!this.falling) {
          Player.jumpUp();
        }
      }
    });

    document.addEventListener("keyup", event => {
      if (event.keyCode === 38) {
        this.falling = true;
        this.falling = Player.fall();
      }
    });
  }
}



const GAME_WIDTH = 800;
const GAME_HEIGHT = 300;

var canvas = document.getElementById("gameScreen");
var ctx = canvas.getContext("2d");

var Player = new player(GAME_WIDTH, GAME_HEIGHT);

ctx.clearRect(0, 0, 800, 300);

ctx.fillRect(0, 200, 800, 200);
ctx.fillRect(400, 100, 50, 1);

Player.draw(ctx);

new input(Player);

var lastTime = 0;

function gameLoop(timeStamp) {
  var deltaTime = timeStamp - lastTime;

  lastTime = timeStamp;

  ctx.clearRect(0, 0, 800, 200);

  Player.update(deltaTime);
  Player.draw(ctx);

  requestAnimationFrame(gameLoop);
}

gameLoop();

<canvas id="gameScreen" width=400 height=400></canvas>