Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 3.14 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 6 comments

  1. Earthwormjeff

    on November 24, 2013 at 10:55 am

    Hello,
    I was wondering if you ever did work on a sokoban level generator ?
    Thanks for your great tutorials !

  2. Add a virtual pad to play your HML5 games made with PuzzleScript on mobile devices - Emanuele Feronato

    on November 27, 2013 at 6:20 pm

    [...] week I showed you BWBan a game created with PuzzleScript and I told you I was looking for a way to add mobile control to [...]

  3. How to add interlevel ads to your PuzzleScript HTML5 games - Emanuele Feronato

    on December 3, 2013 at 6:30 pm

    [...] really like PuzzleScript engine because it allowed me to create an 80 levels Sokoban game in a few minutes, then I was able to add mobile controls to play it on mobile [...]

  4. From PuzzleScript (or any other HTML5 game) to native iOS (or any other mobile device) using FREE Adobe PhoneGap Cloud service - Emanuele Feronato

    on December 6, 2013 at 7:45 pm

    [...] am going to test the service with BWBan game made with PuzzleScript with the jQuery virtual pad I [...]

  5. PuzzleScript HTML5 game ported to iOS with swipe control - Emanuele Feronato

    on December 13, 2013 at 7:19 pm

    [...] a PuzzleScript enthusiast I managed to create a Sokoban game, add a virtual pad to play it on mobile devices, try to monetize it with interlevel ads and port it [...]

  6. New game released on the App Store: play BWBan, a game made with PuzzleScript - Emanuele Feronato

    on December 23, 2013 at 5:24 pm

    […] Create HTML5 tile based games like Sokoban in a quick with PuzzleScript: the very first step in the creation of a game is… creating the game! And this what I explain in this step. […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×