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

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.public-domain-photos.com/free-stock-photos-4/drinks/bread-and-beer.jpg

http://www.raymondhill.net/puzzle-rhill/puzzle-rhill.php?puzzlePieces=10&puzzleComplexity=5&puzzleURL=http://www.public-domain-photos.com/free-stock-photos-4/drinks/bread-and-beer.jpg&puzzleRotate=20&puzzleVersion=2

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

• 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.)
• “Point Inclusion in Polygon Test”, by W. Randolph Franklin: An efficient algorithm to test whether a point lies inside a polygon.
• “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.