Spent a little time the past few days putting together this simple browser game using pure JS and the Canvas API. It was extremely easy to get started, I was up and drawing images to canvas within a couple minutes. The game logic itself was the only somewhat complicated part, but even so it isn't anything too dramatic. You've all probably played this game at some point in your lives:

After putting together the basic gameplay, I went ahead and tested it in the few browsers I had on hand. To my surprise, it worked fine out of the box until I tried zooming in. Turns out I used a property for mouse coordinates that didnt scale properly, so I had to run a search for the correct one. Then I got my first taste of browser inconsistencies, as some browsers called it layerX / layerY and others called it offsetX / offsetY. Luckily in JS this is a trivial problem to account for:

My original plan for this game was to try something different. I was gonna include all the built in levels pre-solved and have the game shuffle them into a new puzzle every time they're loaded. It seemed simple enough and at the very least worthy of experimentation. Well, I had finished the shuffle feature finally and just needed to add levels. I searched the net for packs of levels but I soon realized finding a significant amount pre-solved was out of the question. I did however happen upon a goldmine of levels (Im talking thousands) in a ripe format just waiting to be picked. So rather shamelessly, I converted them to my json format and they're now the default levels of my version. I decided to keep the initial shuffle enabled to add some spice and stay more in line with my initial idea, so there's still an element of surprise. I also decided to add a manual shuffle button which can be used to mix the board up if you're stuck in a rut. And don't worry, I made sure it never shuffled into a immediately winnable state :P

On top of the shuffle, I decided not to have a specified level order. There's no "next" level, you just click Random and it pulls up a fresh puzzle for ya. Which makes this a devilishly addicting timewaster since there's no telling which level of the thousands is waiting for you next. It also makes it easy to pick up anywhere without worrying about playing the same few levels over again.

Anyway, enough blabbering from me. Go ahead and give it a try:

Click here to play!

It should work no problem in any of the latest desktop browsers. Unfortunately I haven't got around to fixing it on mobile, as the touch API differs enough from the mouse API that I'll have to spend a good amount of time reworking and debugging it. Hopefully it's not as painful as I'm anticipating ;)

Finally, if I get the time I'll work on converting these levels to my format. Supposedly they're the most difficult configurations for this game, and I'd love to have an "insane mode" level pack ;)

Edit: Insane mode

Cheers!