Create HTML5 tile based games like Sokoban in a quick with PuzzleScript

What an incredible tool I found today… I am always been a fan of Sokoban game, if you are an old time reader of the blog you should remember at least the creation of a Sokoban game with jQuery, the complete Flash Sokoban game in less than 2KB, the Flash 3D Sokoban prototype with Flare3D and the 3D Sokoban Prototype with Unity.

Today I want you to play this tricky 80 levels Sokobam game called BWBan, because it’s a black and white Sokoban I made in less than an hour (most of it spent to split the code and adjust the levels) with PuzzleScript, an open-source HTML5 puzzle game engine which can help you to make basic retro tile-based games in a few minutes.

The engine has just a few features, but you’ll have everything you need to create your simple games, along with basic graphics and sounds, in a quick.

Then, it should be up to you to try and improve them to add at least mobile device control. That’s what I am trying to do at the moment.

One interesting thing is PuzzleScript will generate the whole game in a single file, with no links to external libraries such as jQuery.

First things first, play the game:

Then, look at the code I had to write in the editor:

Let’s look at the interesting lines:

Lines 1-3: Defining game name, author and website

Lines 5-6: Defining background and text color

Now look how I create an object, in the example the background tile:

Line 12: Object name

Line 13: Object colors

Lines 14-18: Color map of the 5×5 object. 0 means color #999999 and 1 means #888888.

Unfortunately you can only create 5×5 objects

Every other object is created in the same way, look at the Target (lines 20-26) which represents crate target, we have only one color (#222222) and some transparent tiles (marked with .)

Another piece of the code allows us to create the legend of the game, assigning symbols to objects. There symbols will be used to create levels later in the script.

Lines 59-65: every item in the game is defined, from walls to crates

Line 67: basically this line says: look, we have two kinds of crate: the crate itself and the crate on the target. We’ll group them under TheCrate variable.

We do not have sounds in the game, anyway you have a random sound generator to create something like 8 bit sounds using ADSR Envelope.

Now it’s time to create the collision layers, that is telling what should collide with what.

Line 77: the background does not collide with anything

Line 78: same thing for the target

Line 79: player, walls and crates collide

Time for the most important thing, game rules! There are only three rules:

Line 85: if the player moves towards a crate, he pushes it

Line 86: a crate on the target must show CrateOnTarget texture

Line 87: a crate outside the target must show Crate texture

Before we start coding the levels, one last thing: win condition

Line 93: a level is completed when all crates are on the target

From line 99 we start coding the levels and the message to display before every level

As you can see, that was really simple to create with PuzzleScript

Sokoban levels in this game are courtesy of Martí Homs.