HTML5 prototype of iOS game “Perfect Square!” – step 2: adding levels

Here we go with the second step of Perfect Square! game. In first step we saw how to create the basic prototype of the game in only 100 lines, this time we are going to add only 30 more lines but we will feature level progression and the main GUI.

In games like Perfect Square!, as well as Circle Path, you don’t actually progress through levels: you just have to make a successful move in level 1 – in this case make the square fall in its place – then you advance to level 2 where you have to make two successful moves, reaching level three where you have to make three successful moves and so on.

Try to play the game:

Press and hold to make the square grow, release to drop it. As you can see you can advance levels, although your progress is not saved yet.

And this is the source code, still uncommented but next time with the final prototype you will have the usual line-by-line comments:

I plan to complete the game with less than 200 lines, meanwhile download the source code.

  • I like it!And I have a problem in phaser:how to make the game scale to any mobile screen size (e.g. iPhone and Android)?This problem has puzzled me for a long time.Could you help me?Thanks!

    • Emanuele Feronato

      Sure, in next step all resolutions will be covered

  • Kevin Drum

    This may be a dumb question, but why did you not need “this.game = game;” when declaring playGame?

    • Emanuele Feronato

      game is a global variable, no need to do it.