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

Read all posts about "" game

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 www.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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers