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
  9. Web Dev Blog