Ask For Game Task Online Flash and HTML5 games with tutorials by Srdjan Susnic

How to make Pick Up Sticks game in HTML5 with no programming skills – Part 1

In this tutorial series I will show you how to make my the most played flash game Pick Up Sticks in HTML5 with no programming skills.

To do that, I will use Construct 2. It is a visual HTML5 game development tool and to successfully make this tutorial you must know to work with it. But even if you don't know how to use Construct2 you can learn it very fast by reading official tutorials and manual. It's really very easy and you don't need to write any line of source code!

Let's start making game by opening Construct2 and creating a new .capx project named Pick Up Sticks!

A tree structure of our first project is shown on the next image:

So we have a game layout bounded by an event game sheet. Layouts can consist of multiple layers which can be used to easily arrange objects on top of others, but for now we have only one layout with only one layer in this project example.

The size of our layout is 320x480 pixels and it is defined under layout properties. On the layout properties we are also choosing the event sheet which runs for that layout.

There are also added two objects to the project: a Mouse for a game control, and a Stick sprite object divided in two frames which consist very simple images of two differently colored sticks.

To add Mouse object right click on Object types in Projects window, select Insert New Object and choose Mouse from the opened dialog. Similarly, to add Stick object choose Sprite from the Insert New Object dialog and give it 'Stick' name when inserted it.

Now, we must add some sprite images to the Stick object from files saved somewhere on your disk. Right click on the previously inserted Stick object in Projects window and select Edit Animation to open Image Editor. Here you can several options to load images from a file so you can do that as you like the most! I usually load all frames from one previously created image (see the image below) using Import Sprite Strip option from the right menu in Animation Frames window.

After loading all sprite images to the frames of the Stick object we can use it in our game, but firstly we have to place it on the game layout! For our purpose we will place the Stick object somewhere outside of the game layout so that we don't see it when the game starts, but we will later create a pile of stick instances from it.

Next, let's see the properties of the Stick sprite object:

Currently, the most important properties for us are Layer, Position, Size and Z instance variable (it is manually added by add/edit option to store Z-depth of each created stick instance - this will be used later to detect which stick is currently placed on the top of the pile).

Finally, let's see the event game sheet. All game logic and events are placed here:

And here is the result of our first project. Click on the sticks to pick them all!

The complete .capx project you can download here!