Superbox by harrystevens

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="scene"></div>
  <script src="scene.js"></script>
  <script src="player.js"></script>
  <script>
    let left = 0, right = 0, up = 0;

    const myScene = new Scene;
    myScene.init("#scene");

    const myPlayer = new Player;
    myPlayer.init({width: 100, height: 100, y: myScene.height});

    myScene.addPlayer(myPlayer);

    function tick(){
      requestAnimationFrame(tick);
      myScene.movePlayer({left, right, up});
      myScene.draw();
    }
    tick();

    addEventListener("keydown", e => {
      if (e.code === "ArrowLeft") { left = 1; right = 0; }
      if (e.code === "ArrowRight") { right = 1; left = 0; }
      if (e.code === "ArrowUp") up = 1;
    });
    addEventListener("keyup", e => {
      if (e.code === "ArrowLeft") left = 0;
      if (e.code === "ArrowRight") right = 0;
      if (e.code === "ArrowUp") up = 0;
    });
  </script>
</body>
</html>

player.js

class Player {
  init(opts){
    this.width = opts && opts.width ? opts.width : 20;
    this.height = opts && opts.height ? opts.height : 20;
    this.x = opts && opts.x ? opts.x : 0;
    this.y = opts && opts.y ? opts.y : 0;
    this.vy = 0;
    this.agility = opts && opts.agility ? opts.agility : 5;
    this.jumpPower = opts && opts.jumpPower ? opts.jumpPower : 20;
    this.jumping = 0;
  }
}

scene.js

class Scene {
  init(elem, opts){
    this.elem = elem;

    this.gravity = opts && opts.gravity ? opts.gravity : 1.5;

    this.sel = document.querySelector(this.elem);
    this.canvas = document.createElement("canvas");
    this.canvas.style.background = "lightblue";
    this.context = this.canvas.getContext("2d");
    this.sel.appendChild(this.canvas);

    this.resize();
  }

  addPlayer(player){
    this.player = player;
  }

  movePlayer(dirs){
    if (!this.player) {
      console.error("You need to add a player with scene.addPlayer(player) before trying to move it.");
      return null;
    }

    if (dirs.right){
      this.player.x += Math.min(this.player.agility, this.width - (this.player.x + this.player.width));
    }

    if (dirs.left){
      this.player.x -= Math.min(this.player.agility, this.player.x);
    }

    if (dirs.up && !this.player.jumping){
      this.player.jumping = true;
      this.player.vy = this.player.jumpPower;
    }

    if (this.player.jumping){
      this.player.vy -= this.gravity;
      this.player.y -= this.player.vy;

      if (this.player.y - this.player.height < 0){
        this.player.y = this.player.height;
        this.player.vy = 0;
      }

      if (this.player.y >= this.height){
        this.player.y = this.height;
        this.player.vy = 0;
        this.player.jumping = false;
      }
    }

  }

  resize(){
    this.width = innerWidth;
    this.height = innerHeight;
  }

  draw(){
    this.resize();
    this.canvas.width = this.width;
    this.canvas.height = this.height;

    this.context.clearRect(0, 0, this.width, this.height)
    
    if (this.player){
      this.context.fillStyle = "steelblue";
      this.context.fillRect(this.player.x, this.player.y - this.player.height, this.player.width, this.player.height);
    }
  }
}