HTML5 prototype of iOS game “Perfect Square!” – step 3: adding in-game instructions and scaling the game for any resolution

Here we are with the third step of Perfect Square! HTML5 prototype made with Phaser.

In first step the basics of the game have been built with only 100 lines of code.

In second step we added levels, and now we have new improvements such as a brief “how to play” section, saving player progression using localStorage and scaling the game to fill any kind of device and resolution.

Here you can see the same game running at 400×580 and at 300×580 working fine at both resolutions. You may have to click or tap on both games to make them start.

Other than that, you know the game: tap and hold the square to make it grow, release to make it fall, and make it land on the lower barrier.

This is the source code so far:

We are very close to the final game, then I’ll explain the code line by line, meanwhile download the project.

  • Thanks for your article.It took a long time to find it.Now I can run my game in different devices.Thank you very much!

  • Lukasz

    Hi,

    if I make similar game to Perfect Square! with some modification it will be ok to put it on Google play?

    • Emanuele Feronato

      sure!

  • keiyoumi

    Offer my knee.
    Can i put it on my poor sample website.

    • keiyoumi

      with your name,sry

      • Emanuele Feronato

        sure!