HTML5 Platformer Game - Create Your Own Jumping Adventure

<script>
  // Get canvas element
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // Set up game variables
  let score = 0;
  let isJumping = false;
  let position = 0;
  let gravity = 0.2;
  let jumpForce = 8;

  // Create player
  const player = {
    x: 50,
    y: 0,
    width: 40,
    height: 40,
    color: 'blue',
    draw: function() {
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  };

  // Create platforms
  const platforms = [
    { x: 0, y: 550, width: 100, height: 10 },
    { x: 150, y: 450, width: 100, height: 10 },
    { x: 300, y: 350, width: 100, height: 10 },
    { x: 450, y: 250, width: 100, height: 10 },
    { x: 600, y: 150, width: 100, height: 10 }
  ];

  // Event listeners
  document.addEventListener('keydown', keyDown);
  document.addEventListener('keyup', keyUp);

  // Key down function
  function keyDown(e) {
    if (e.keyCode === 32) {
      if (!isJumping) {
        isJumping = true;
        position = -jumpForce;
      }
    }
  }

  // Key up function
  function keyUp(e) {
    if (e.keyCode === 32) {
      isJumping = false;
    }
  }

  // Update function
  function update() {
    ctx.clearRect(0, 0, 800, 600);

    // Update player position
    player.y += position;
    position += gravity;

    // Check platform collision
    platforms.forEach(platform => {
      let direction = collisionCheck(player, platform);

      if (direction === 'left' || direction === 'right') {
        player.x -= position;
      } else if (direction === 'bottom') {
        position = 0;
      } else if (direction === 'top') {
        position = 0;
        score++;
      }
    });

    // Draw player and platforms
    player.draw();
    platforms.forEach(platform => {
      ctx.fillStyle = 'grey';
      ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
    });

    // Draw score
    ctx.fillStyle = 'red';
    ctx.font = '18px sans-serif';
    ctx.fillText('Score: ' + score, 25, 25);

    // Loop update function
    requestAnimationFrame(update);
  }

  // Check collision function
  function collisionCheck(character, platform) {
    let vectorX = (character.x + (character.width / 2)) - (platform.x + (platform.width / 2));
    let vectorY = (character.y + (character.height / 2)) - (platform.y + (platform.height / 2));

    let halfWidths = (character.width / 2) + (platform.width / 2);
    let halfHeights = (character.height / 2) + (platform.height / 2);

    let collisionDirection = null;

    if (Math.abs(vectorX) < halfWidths && Math.abs(vectorY) < halfHeights) {
      let offsetX = halfWidths - Math.abs(vectorX);
      let offsetY = halfHeights - Math.abs(vectorY);

      if (offsetX < offsetY) {
        if (vectorX > 0) {
          collisionDirection = 'left';
        } else {
          collisionDirection = 'right';
        }
      } else {
        if (vectorY > 0) {
          collisionDirection = 'top';
        } else {
          collisionDirection = 'bottom';
        }
      }
    }

    return collisionDirection;
  }

  // Call update function
  update();
</script>