Building a Simple HTML5 Action Game Using Canvas and JavaScript

If you’ve ever wanted to create your own browser-based action game, HTML5 gives you everything you need — no plugins, no engines, no installations.
In this guide, we’ll walk through how to build a simple action game using HTML5 Canvas and pure JavaScript, similar to what powers many titles on GamH5.

1. Setting Up the Game Canvas

Start with a simple HTML structure:

<canvas id="gameCanvas" width="480" height="320"></canvas>
<script src="game.js"></script>

The <canvas> element provides a blank drawing surface where all game logic, graphics, and animations will happen.

In your game.js file, get the canvas context:

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

2. Drawing the Player and Environment

You can represent your player as a simple rectangle for now:

const player = { x: 200, y: 250, width: 40, height: 40, speed: 4 };

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

Add a background and clear the screen every frame:

function clear() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

3. Handling Player Movement

Action games are all about responsive controls.
Let’s capture keyboard input:

const keys = {};

window.addEventListener('keydown', e => keys[e.key] = true);
window.addEventListener('keyup', e => keys[e.key] = false);

function movePlayer() {
  if (keys['ArrowLeft']) player.x -= player.speed;
  if (keys['ArrowRight']) player.x += player.speed;
  if (keys['ArrowUp']) player.y -= player.speed;
  if (keys['ArrowDown']) player.y += player.speed;
}

4. Adding Enemies and Collisions

Now we’ll introduce a few moving enemies:

const enemies = [
  { x: 100, y: 0, width: 40, height: 40, speed: 2 },
  { x: 300, y: -150, width: 40, height: 40, speed: 3 }
];

function drawEnemies() {
  ctx.fillStyle = '#00ff00';
  enemies.forEach(e => {
    e.y += e.speed;
    if (e.y > canvas.height) e.y = -40;
    ctx.fillRect(e.x, e.y, e.width, e.height);
  });
}

And a simple collision check:

function isColliding(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

5. Running the Game Loop

Combine everything into a smooth game loop using requestAnimationFrame():

function update() {
  clear();
  movePlayer();
  drawPlayer();
  drawEnemies();

  enemies.forEach(e => {
    if (isColliding(player, e)) {
      alert('Game Over!');
      document.location.reload();
    }
  });

  requestAnimationFrame(update);
}

update();

Congratulations — you’ve built your first HTML5 Action Game! 🚀

6. Expanding Your Game

Once you’ve got the basics running, consider adding:

Sprite-based animations for smoother movement
Touch controls for mobile browsers
Scoring and level systems using localStorage
Sound effects via the Web Audio API

These features are exactly what make GamH5’s Action Games feel polished and modern — lightweight, responsive, and instantly playable.

7. Final Thoughts

HTML5 Canvas provides everything you need to build fast, responsive action games without any external libraries.
Whether you’re experimenting with simple movement or planning to launch your own browser title, the web remains one of the most open and accessible gaming platforms available.

Inspired by the instant-play design philosophy behind GamH5 — Action Games.

⚡ Explore More from the HTML5 Action Games Series

Continue your journey through the world of browser-based action gaming:

Why HTML5 Action Games Are Perfect for Instant Play
Discover why instant-play HTML5 technology is redefining the action genre.
Building a Simple HTML5 Action Game Using Canvas and JavaScript
Step-by-step tutorial for creating your first responsive HTML5 action game.
Optimizing HTML5 Action Games for Mobile Devices
Learn techniques to boost performance and touch responsiveness across screens.
The Evolution of Browser Action Games — From Flash to HTML5
Explore how the web transformed from Flash plugins to modern, open-standards gaming.