Build a 2D Platformer in the Browser (HTML5 Canvas)

<canvas id="game" width="800" height="600"></canvas>
<script src="game.js"></script>

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

function update() {
    // 1. Update Physics
    player.y += player.velocity_y;
    player.velocity_y += GRAVITY; // 0.5
    
    // 2. Clear Screen
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 3. Draw Player
    ctx.fillStyle = 'red';
    ctx.fillRect(player.x, player.y, player.width, player.height);
    
    requestAnimationFrame(update);
}

const player = { x: 100, y: 100, velocity_y: 0, width: 30, height: 30 };
const GRAVITY = 0.5;

requestAnimationFrame(update);

function checkCollision(rect1, rect2) {
  if (rect1.x < rect2.x + rect2.width &&
      rect1.x + rect1.width > rect2.x &&
      rect1.y < rect2.y + rect2.height &&
      rect1.y + rect1.height > rect2.y) {
      return true; // Collision!
  }
  return false;
}