Jigsaw Puzzle by Raymond Hill (a programming/learning experiment with HTML5 <canvas>)

• Click on a piece to move it, click again to release it • Left and right arrows (or alternatively 'A' or 'D', or mousewheel) to rotate a piece • Up and down arrows (or alternatively 'W' or 'S') to send a piece behind or on top of other pieces • Space bar to toggle on/off visibility of non-composite pieces • 'E' to toggle on/off visibility of non-edge pieces • 'Q' to maximize, minimize or restore preview tile

Your browser doesn't support the HTML5 <canvas> element technology, and/or Javascript is disabled.

This Jigsaw Puzzle game was created using:

• HTML5 <canvas> element
• Javascript

Therefore, your browser needs to support the above technologies to display properly the current page. See Wikipedia for information on which browsers support the HTML5 <canvas> technology. I tested only on Firefox 3.0.10 on Windows XP and Ubuntu Linux 9.04. I will continue to add features to this little canvas game as part of my ongoing curiousity with the <canvas> tag.

Thumbnail preview

Related: Persuading Microsoft to Implement Canvas

URL of image used for above puzzle: http://www.publicdomainpictures.net/pictures/1000/velka/1-1193219450.jpg

http://www.raymondhill.net/puzzle-rhill/puzzle-rhill.php?puzzlePieces=16&puzzleComplexity=1&puzzleURL=http://www.publicdomainpictures.net/pictures/1000/velka/1-1193219450.jpg&puzzleRotate=24&puzzleVersion=4

Cut	ClassicStraightTenonWave
Bed size	pixels × pixels
Bed margin	pixels
Suggested number of pieces	[4-1000], this number is used as a guide only, restrictions may apply
Complexity of puzzle pieces	[0-9], where 0=regularly shaped pieces; 1=slightly irregularly shaped pieces; 9=very irregularly shaped pieces
URL of picture to use	pick one at one of these general collections of public domain images
Number of steps per 360°	[1-90], where 1=no rotation, 4=4 steps per 360° (90° per step); 12=12 steps per 360° (30° per step); 90=90 steps per 360° (4° per step); etc.

• Calling drawImage() using an HTMLCanvasElement as the source is significantly faster than when using an HTMLImageElement as the source. This holds true for createPattern().
• Cool HTML5 <canvas> cheat sheet!

• “SoundManager 2”, by Scott Schiller: An excellent library that brings audio functionality to Javascript.
• “Calculating the area and centroid of a polygon”, by Paul Bourke: For his code snippets on how to calculate the centroid of a polygon (necessary to be able to rotate pieces properly.)
• “Event properties / Mouse position”, by Peter-Paul Koch: For his code snippet on how to correctly detect mouse coordinates.
• Sound effects:
  • The Freesound Project's “klick - 01.wav”, by Marcus Horndt
  • The Freesound Project's “klick - 02.wav”, by Marcus Horndt
  • The Freesound Project's “applause_5sec.wav”, by Mirko Horstmann
  • The Freesound Project's “applause_5sec.wav”, by Mirko Horstmann
  • The Freesound Project's “Applause 9s.mp3”, by J.Zazvurek

Jigsaw Puzzle-rhill by Raymond Hill is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License. You are free to use or reuse all or portion of this work for non-commercial purpose as long as you link back to the current page. If you're planning to derive revenue from all or significant portion of this software (e.g., by running any advertisements on the page, selling anything, etc.), you'll need to ask the express permission of the author.