Simple HTML Platformer

To create a simple platformer game using HTML, CSS, and JavaScript, follow these steps:

Step 1: Set Up the HTML Structure

Create an HTML file with the basic structure. Add a container div for the game canvas and include the necessary scripts and stylesheets.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple HTML Platformer</title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <div id='container'>
      <canvas id='canvas'></canvas>
    </div>
    <script src='game.js'></script>
  </body>
</html>

Step 2: Style the Canvas

Add some basic styles to the container and canvas elements to position them on the page and set their dimensions.

#container {
  position: relative;
  width: 600px;
  margin: 0 auto;
  border: 1px solid black;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px;
  background-color: lightblue;
}

Step 3: Set Up the Game Loop

Create a JavaScript file for the game code. Set up the game loop to update the game state and render the canvas.

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

var gameLoop = function() {
  // Update game state

  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw game objects

  // Request next animation frame
  requestAnimationFrame(gameLoop);
};

// Start the game loop
requestAnimationFrame(gameLoop);

Step 4: Add Player Controls

Add event listeners for player input to move the player character.

var player = {
  x: 50,
  y: 300,
  width: 50,
  height: 50,
  speed: 5
};

var keysDown = {};

document.addEventListener('keydown', function(event) {
  keysDown[event.keyCode] = true;
});

document.addEventListener('keyup', function(event) {
  delete keysDown[event.keyCode];
});

var updatePlayer = function() {
  if (38 in keysDown) { // Up arrow
    player.y -= player.speed;
  }
  if (40 in keysDown) { // Down arrow
    player.y += player.speed;
  }
  if (37 in keysDown) { // Left arrow
    player.x -= player.speed;
  }
  if (39 in keysDown) { // Right arrow
    player.x += player.speed;
  }
};

var drawPlayer = function() {
  ctx.fillStyle = 'red';
  ctx.fillRect(player.x, player.y, player.width, player.height);
};

var gameLoop = function() {
  updatePlayer();

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlayer();

  requestAnimationFrame(gameLoop);
};

requestAnimationFrame(gameLoop);

Step 5: Add Platforms and Collisions

Add platform objects to the game and check for collisions between the player and the platforms.

var platforms = [
  { x: 0, y: 350, width: 400, height: 50 },
  { x: 500, y: 250, width: 100, height: 50 },
  { x: 250, y: 150, width: 100, height: 50 }
];

var checkCollisions = function() {
  platforms.forEach(function(platform) {
    if (player.x < platform.x + platform.width &&
        player.x + player.width > platform.x &&
        player.y < platform.y + platform.height &&
        player.y + player.height > platform.y) {
      // Collision detected, move player back to previous position
      player.x -= player.speedX;
      player.y -= player.speedY;
    }
  });
};

var updatePlayer = function() {
  player.speedX = 0;
  player.speedY = 0;

  if (38 in keysDown) { // Up arrow
    player.speedY = -player.speed;
  }
  if (40 in keysDown) { // Down arrow
    player.speedY = player.speed;
  }
  if (37 in keysDown) { // Left arrow
    player.speedX = -player.speed;
  }
  if (39 in keysDown) { // Right arrow
    player.speedX = player.speed;
  }

  // Move player and check collisions
  player.x += player.speedX;
  player.y += player.speedY;
  checkCollisions();
};

var drawPlatforms = function() {
  ctx.fillStyle = 'green';
  platforms.forEach(function(platform) {
    ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
  });
};

var drawPlayer = function() {
  ctx.fillStyle = 'red';
  ctx.fillRect(player.x, player.y, player.width, player.height);
};

var gameLoop = function() {
  updatePlayer();

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlatforms();
  drawPlayer();

  requestAnimationFrame(gameLoop);
};

requestAnimationFrame(gameLoop);

Step 6: Add Collectibles and Scoring

Add collectible objects to the game and check for collisions between the player and the collectibles. Keep track of the player's score.

var score = 0;

var collectibles = [
  { x: 100, y: 300, width: 50, height: 50 },
  { x: 400, y: 200, width: 50, height: 50 },
  { x: 300, y: 100, width: 50, height: 50 }
];

var checkCollisions = function() {
  platforms.forEach(function(platform) {
    if (player.x < platform.x + platform.width &&
        player.x + player.width > platform.x &&
        player.y < platform.y + platform.height &&
        player.y + player.height > platform.y) {
      // Collision detected, move player back to previous position
      player.x -= player.speedX;
      player.y -= player.speedY;
    }
  });

  collectibles.forEach(function(collectible, index) {
    if (player.x < collectible.x + collectible.width &&
        player.x + player.width > collectible.x &&
        player.y < collectible.y + collectible.height &&
        player.y + player.height > collectible.y) {
      // Collision with collectible detected, remove collectible and increase score
      collectibles.splice(index, 1);
      score++;
    }
  });
};

var drawCollectibles = function() {
  ctx.fillStyle = 'gold';
  collectibles.forEach(function(collectible) {
    ctx.fillRect(collectible.x, collectible.y, collectible.width, collectible.height);
  });
};

var drawScore = function() {
  ctx.fillStyle = 'black';
  ctx.font = 'bold 24px sans-serif';
  ctx.fillText('Score: ' + score, 10, 30);
};

var gameLoop = function() {
  updatePlayer();

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlatforms();
  drawCollectibles();
  drawPlayer();
  drawScore();

  if (collectibles.length === 0) {
    // All collectibles collected, end the game
    alert('Game over! Final score: ' + score);
  } else {
    requestAnimationFrame(gameLoop);
  }
};

requestAnimationFrame(gameLoop);

Step 7: Customize and Enhance

Customize and enhance the game with additional features, such as sound effects, animations, and different game modes. Have fun and be creative!

Simple HTML Platformer Game Tutorial: Create Your Own 2D Platformer

Simple HTML Platformer Game Tutorial: Create Your Own 2D Platformer