This tutorial is an introduction to Puzzle Script. Puzzle Script is a free to use program that runs in a web page and is used to create puzzle games. It’s most well known for creating block pushing puzzle games. In this tutorial you will make a game, learning the basic functions of Puzzle Script. The next tutorial will begin covering programming.
First let’s look at some examples. At the top of the screen, go to ‘Load Example’ and select the first one, ‘Basic’. Now click ‘Run’.
You will notice there is now a game screen. Click within the game and press ‘Enter’ on your keyboard.
Play the game. Your goal is to push the orange crates onto the black square targets. When each target has a crate on it, you pass. You can press ‘Z’ on the keyboard to undo, or ‘R’ to restart the level.
Make Your First Game
Now we’re going to make some levels. I’ll design one with you, and then I encourage you to experiment by creating more. Click on ‘Level Editor’ in the top menu.
If you don’t see the level editor screen, click ‘Run’ and start the game. Once you’re inside a level, press the ‘Level Editor’ button again. It will now allow you to edit the level you were just in.
Make a New Level
Up top are your game objects. Left click will draw the selected object. Right click will draw the ‘background’ object. Left clicking the edge of the map will increase the mapsize – right clicking will decrease the size.
To pass a level you need to have a crate on all of the targets, so every level needs to have a minimum of:
- 1 crate
- 1 target
- 1 player
For now, turn everything to grass with the Right Click. Then, left click the left edge of the level to make it bigger, and finally draw a level that looks like mine below.
Add It To The Level List
When a level is finished, we add it to our level list. In the level editor, click the white ‘S’ next to the game object list to save your design.
Underneath your level editor it should say there was a successful compilation and have a grid of funny symbols, as below.
Those funny symbols represent the level you just designed. Each symbol is a different object. On the left hand side of the screen, scroll down until you see LEGEND. You should see an explanation for each of the symbols:
. = Background
# = Wall
P = Player
* = Crate
@ = Crate and Target
O = Target
Everything on the left hand side of the screen is the game’s code, split into different sections such as OBJECTS and LEGEND. Scroll down to LEVELS. What you see are the levels that came with the example.
To add a new level, create a new blank line at the bottom of the levels. Then, copy the symbols you generated for your level and paste them in. Your level is now added.
Test it. After making a new level, you have to press the ‘Run’ button again at the top of the screen to reload the game with the new level. Sometimes it doesn’t work as expected, so you have to press the ‘Rebuild’ button, then try pressing ‘Run’ again.
Saving And Loading The Game
Try making some new levels. When you are ready to save your game, scroll up to the top of the code and type in your own title, author name and homepage; then click the ‘Save’ button.
A limited number of saves get stored under the ‘Load’ menu on the computer you’re using. There is, however, a ‘Share’ button at the top of the screen. Clicking this generates a message with two web links.
One is a link to the source code of your project. The other is a link to a playable version of the game that you can share with your friends. I recommend periodically creating a new link to your source code and saving it in a text document somewhere so that you have a permanently stored version of your project.
You can also export the game as a html5 file which can be uploaded to games portals such as itch.io, Kongregate or Newgrounds. Just press ‘Export’ and upload the downloaded html file to the games portal.
Follow this blog for more tutorials on Puzzle Script, games development and updates on my projects.