Canvas Tutorial: Halma Board Game

By Xah Lee. Date: . Last updated: .

Here's a sample demo of a game using HTML Canvas.

This is a one-person version of the game halma.

The goal is to move all the pieces to the opposite corner, with minimum steps.

Click a circle to select, then click a empty square to move to.

There are 2 ways to move:

The code is at

The code is written by Mark Pilgrim. Licensed under http://creativecommons.org/licenses/by/3.0/.

Canvas Topic

  1. Canvas vs SVG
  2. Learn Canvas in 10 Minutes
  3. Canvas Tutorial: Halma Board Game
  4. HTML Canvas Demo: Raycaster
  5. HTML Canvas Reference
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc