Developer’s Guide to an HTML5 Puzzle Game Engine – The New Stack


Enterprise software normally falls into one of four application types: Publish, Search, Run, and Chat. Fortunately, the Web excels in all of this. The same four elements are also needed to manage services or platforms that you want to maintain yourself or within your organization. This article is about a particular example, an “open source HTML5 puzzle game engine” that we can easily explore and then extract these principles. And at the same time, learn how to create cool little puzzle games.

“Increpare” (better known as Stephane Lavelle) wrote Brain teaser sometime ago. It describes both a script and a platform specializing in game rules for Sokoban-style tile games. Sokoban? You know, the game where you can only push boxes. This quirky set of puzzles is actually quite frustrating, but a good test of your planning and execution skills. As you can see in the Puzzlescript Gallerythere are many interesting variations of these little games.

Set game rules, levels and blocks

Let’s take a look at the Puzzlescript platform from a creator’s perspective; i.e. a potential publisher. All games are divided into levels, crossed by the player character who moves with the arrow keys, or “W”, “A”, “S” and “Z”. Every level is made up of (poorly) drawn blocky objects arranged in such a way as to progressively prevent you from accessing the victory condition. Completing a level takes you to the next level. Of course, the best way to absorb all of this quickly is to play any game. The only objects in the original Sokoban were walls, crates, and floors with dots.

So your job is to define your game rules, design the puzzle levels and draw the blocks.

To write yours Rules of the gameyou use jigsaw script. For example, the following rule considers that if a player moves towards a crate, the crate must itself move in the same direction:

This represents the standard push interaction in Sokoban. Read it as “replace the pattern on the left side (player moves into a square with stationary crate) with the right side (player moves into square, crate moves to next square)”. It is therefore effectively a Translation. You have to think about how the game engine checks all the activity about to happen, interprets every translation, and then redraws the game. If you’re a regular puzzle player, this will be familiar to you from modern hits like ” Baba is You”.

Let’s look at the code for a particular Puzzlescript game called Manic ammo (the author tells me he agrees with that). It appears to be a fanciful story of someone stuck in an ammunition bunker. Now click on the “hack” link at the bottom and you can see the screen is split into three windows.

The top right window lets you run the game as it is currently compiled. So if you click on it and press space, the game launches in the window. But our interest is in the left source code window. You can see the title “objects” and indeed there appears to be a long list of formatted data. You’ll quickly notice that this is a visual representation of the game’s 5×5 blocks, with a number code for their base colors. For example, the “Player” is composed of a black and pink head, with a yellow belly. What a gorgeous little person.

The rest of the list is clearly divided into titled sections, including “Rules”. There you will see a familiar Puzzlescript:

So you can see that a player can push a shell like a crate in our initial example.

The point of all this early access is to allow would-be creators to begin their journey by fiddling with existing games. For example, you could happily render the game unplayable by adding this line of code under the Rules. Rebuild the game and try it from the beginning:

Can you see what it does before running it? “Winconditions” is the only rule that must be satisfied to complete a level. This is the reason why the above hack is so disruptive.

This playful method of direct involvement in the application works very well. Simply uploading application code to GitHub and forcing people to clone it and run it locally is actually bad use of the web by comparison. Enabling low-friction methods of engagement (like adding a line of code and seeing what’s happening on the same page) helps turn experimenters into creators.

The Puzzlescript Platform

Writing small games using puzzlescript is certainly as good a test of development and design skills as any code dojo. However, this article is about the platform as a whole.

When developing and supporting an application or tool within an enterprise, you need to think in terms of Community of practice. A tool or app will only thrive once it has dedicated users, and users need to become advocates themselves. This means that you have to manage a forum, and at least guide it. Despite Puzzlescript’s age, you can probably see forum entries from the current month. Stephen is updating the platform, hopefully without breaking old games. There are many additions since my last use.

How does this platform work for research and execution? The gallery page is searchable visibly, by puzzle name or by author – maybe some tag metadata wouldn’t have gone wrong. Since each game can be represented as a link, other sites can organize the games as they wish. Having a single URL to edit or read is very efficient. This site categorizes puzzlescript games by size and challenge. Indeed the current list of games seems to be held in a json file, so deriving your own index is trivial. The games are also hosted on

But let’s appreciate how the platform emulates all of these enterprise targets. First, it lets you learn what Puzzlescript is, what a basic Sokoban puzzle is, and introduces what setting the rules can accomplish. It then allows the user to create their own puzzle, and it also archives existing puzzles. And there’s a forum for players to exchange tips and recommendations – as well as a place for formal author communication.

So, the platform quite directly covers content creators, designers, hackers, gamers, maintainers, and curators. Can you say that other platforms that support your tools, apps or services have delivered all facets in such an effective way?

Of course, the site itself is on Github, because it’s open source. So why not design a nice little puzzle game, while enjoying how a good full-stack platformer works in nature.

Source link


Comments are closed.