Talking about Sokoban game, Game development, HTML5 and Javascript.
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:
title BWBan author Emanuele Feronato homepage emanueleferonato.com background_color #222222 text_color #dddddd ======== OBJECTS ======== Background #999999 #888888 11111 11111 11011 11111 11111 Target #222222 ..... .0.0. ..0.. .0.0. ..... Wall #555555 Player #cccccc #ffffff #000000 .222. .000. 22122 .222. .2.2. Crate #666666 #777777 00000 01110 01110 01110 00000 CrateOnTarget #666666 #777777 #555555 00000 02120 01210 02120 00000 ======= LEGEND ======= . = Background # = Wall @ = Player $ = Crate * = CrateOnTarget and Target O = Target + = Player and Target TheCrate = Crate or CrateOnTarget ======= SOUNDS ======= ================ COLLISIONLAYERS ================ Background Target Player, Wall, Crate, CrateOnTarget ====== RULES ====== [ > Player | TheCrate ] -> [ > Player | > TheCrate ] late [ Crate Target ] -> [ CrateOnTarget Target ] late [ CrateOnTarget no Target ] -> [ Crate ] ============== WINCONDITIONS ============== All Target on TheCrate ======= LEVELS ======= message Level 01/80 ######## #..##### #..##### #......# ##@O#$.# #...#..# #...#### ######## message Level 02/80 ####### ##....# ##$.O.# #..@..# #.$#O.# #..#### ####### message Level 03/80 (... and so on)
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.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.