5 January 2017

Introduction

Clickmazes.com

A long while ago, I discovered the above site, and I was greatly intrigued by all its wonderful plank puzzles (and much more!). However, all the mazes on the site are powered by Java Applets, which unfortunately have become out of favor with web standards and are almost impossible to run these days. However, I still love these puzzles, so I decided to re-implement the applet using HTML5 and JavaScript to (hopefully) give these puzzles some new life.

Plank puzzle concept and maze designs were originally conceived by Andrea Gilbert. The original JAVA applet was programmed by Graham Rogers. My HTML5 implementation copies that design, though 100% of the code here is my own.

To play: use your mouse to pick up and drop the planks to navigate across the screen from left to right. You can only pick up planks connected to where you are (highlighted in yellow), and you can only place planks into gaps that are the same size.

The following puzzles can be downloaded online from Think Fun.

About the implementation: notable differences between HTML5 and Java versions

Color scheme: I chose to use blue instead of green, although this is configurable at the top of plankpuzzles.js
Plank highlighting: Instead of highlighting the stumps that are within reach, the HTML version highlights the planks instead; all yellow planks can be moved, but brown planks are out of reach.
Saving/Loading: I changed the interface, hopefully making it more intuitive to use.
Loading: Now loads the exact position that was saved; no need to push redo to get back to the last move
Hex Swamps: Currently unimplemented; it will take some extra work (writing different draw/pick up/drop code) to add them.
Secret Puzzle Codes: This is not implemented; the feature in the old applet was hackable (likewise for an HTML5 version) making it obsolete, and I don't know how the codes were generated to begin with.
Puzzle Names: Can be anything. If too long, the window will clip the name with an ellipsis; on hover full name will show

Embedding the puzzles in webpages

The plank puzzle window is easily embedded as a block element in any web page using the following html

    <x-plank-puzzle-window height='450' width='450'></x-plank-puzzle-window>

The height and width attributes specify the height and width of the rectangle used to render the puzzle and controls. They can be set to any value, although for best results, it should be a reasonably large rectangle; bigger is better.

To specify the puzzle(s), add x-plank-puzzle elements inside the x-plank-puzzle-window

    <x-plank-puzzle-window height='450' width='450'>
        <x-plank-puzzle name='Puzzle Name' fmt='1' positions="###" nodes='###'></x-plank-puzzle>
</x-plank-puzzle-window>

The HTML 5 implementation is based from and designed to be interchangeable with the "Plank format 1" of the older Java applet; the "positions" and "nodes" attributes are the same values given

Both custom elements depend on two HTML linkable files: plankpuzzles.css and plankpuzzles.js. In order for the puzzles to successfully load, the javaScript file must either be included below all instances of x-plank-puzzle-window or the function PlankPuzzles.appInitialize() must be called after the HTML body has loaded.