HTML5 mobile game template featuring splash screen, level select with swipe based scrolling and web storage

Emanuele Feronato Construct2, Game design, HTML5, iPhone, Javascript

Welcome to the post with the longest title of the blog, but what I wasn’t able to describe what I am about to show you in a shorter way.

Since I am quite satisfied of my first HTML5 game worDrop, I decided to make things serious with HTML5 game development and I think you should do the same.

The template I am about to show you is made with Construct2 and features:

* A title screen
* Full tap/mouse control
* Level select screen scrollable with swipes
* Level progress locally saved

That is, you only need to create the game engine itself and design levels.

This is what you’ll get:

Tap the screen to begin, you can then swipe left/right to select levels, then play the “game”, solve a couple of levels and try to reload the page to see if your progress has been saved.

To play it with your mobile devices, point it to

Now, let me show you how it’s done:


The main menu is a 480×320 layout with a couple of texts

We only have to load previously saved progress and detect if the player tapped the screen

playableLevel: the highest level playable, set by default at 1 since at the beginning you can only play the first level

Event 1: detects when a touch ends (the player tapped the screen) and sends the player to level select layout

Event 2: loads the previously saved highest playable level, if it exists


Level select layout is the core of the example, it’s made by 480*3 = 1440×320 pixels and features three sets of levels which can be selected by swiping on the screen and played by tapping the level thumbnail

We have some events in this layout, let’s see them:

levelSelected: the level number the player will select

scrollSpeed: scrolling speed, according to swipe direction

Event 1: at the beginning of the layout, we set to semi-transparent the levels which cannot be played. Every level has a local variable called level which is compared with playableLevel

Event 2: if the player touches the screen with a speed greater than 1000 pixels/second (that’s what I call a swipe) and scrollSpeed variable is still at zero meaning the layout is not already scrolling…

Event 3: checking if the touch angle is between 30 and -30, meaning the player swiped from left to right so we have to scroll left

Event 4: checking if the touch angle is between 150 and -150, meaning the player swiped from right to left so we have to scroll right

Event 5: if scrollSpeed variable is different than zero, then scroll the layout by its value.

Event 6: if current scroll position is 240, 720 or 1200 (dont’ ask them why I had to use the second or condition, it seems some kind of but, anyway it won’t work without it), that is we are on easy, medium or hard level set then set scrollSpeed variable to zero

Event 7: if the touch ended (a tap), and we are touching a level thumbnail and scrollSpeed variable is zero (not a swipe) and it’s a level we can play, then set levelSelected variable to level thumbnail local variable and move onto Game Level layout


This is the awesome game I made: clicking on Win button you will win the level, clicking on Lose button you will lose!! Try to beat all levels!!

The event sheet here is way simpler than before:

Event 1: sets the title of the level

Event 2: if the player wins the level we update playableLevel variable and save it to web storage, to use it next time the game loads

Event 3: if the player does not win, we simply show the level select layout

And now you can create your HTML5 level based game with a professional looking level selection screen.

Download the project.

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 11

  1. Jared

    Construct 2 makes designing games so much more enjoyable. This template looks really nice. I will probably use it in a physics game I have been working on in C2.

  2. MC

    Thanks for the template, here are some suggestions:
    – Add a “Next Screen” button on each Levelmap Screen
    – When you complete a level, it sends you to the first screen of the levelmap even if you completed a level in the second/third level

  3. Danic Filip

    Greetings Emanuele!

    Thanks for the regular, awesome content! I was wondering if you could give me some advice about Construct2. Namely, will purchasing a the full personal license allow me to optimize my games for Android, iOS and/or mobile devices in general using the included tools or will I need to do some coding myself?

    On the subject of coding – does Construct 2 have the ability to allow me to edit/write code like Stencyl does?


    Filip Danic

  4. Post
    Emanuele Feronato

    Danic, in C2 you can’t act directly on the code, but you can code your own plugin which basically is a code snippet… so I would say in the end you CAN use your own code, it’s just a bit less intuitive than Stencyl

  5. Jonathan Alphonso

    I’ve been pretty hesitant to move away from flash and to HTML5 for game development. The demand right now though is so high that it would be stupid not to. Construct2 seems neat so far, this template will help for sure.

  6. Pingback: Upcoming HTML5 game: Blocks Feel Love - Emanuele Feronato

  7. Andrew Wooldridge

    Thanks so much for this! I’m a die hard HTML5 developer, but finding that Construct2 is a great tool for designing games quickly and still having the flexibility to go into the javascript with plugins if I wanted to. What is the license for this code snippet? Can it be used in commercial games?

    1. Post
  8. Jesus Alberto Ochoa Portillo

    OMG!!!! you are a genius!!!
    i have a question, what happen if i want to use a different level?
    because in your “code” says that always the player “Goes to -the same game layout” but what is it need to do to change different layout?
    Thanks (sorry for my bad english)

  9. Jesus Alberto Ochoa Portillo

    forget what i asked you, I know how to make it , just add another layout and compare the variable in the new object, please do not post my last question, I’m going to look very silly. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *