Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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

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 http://www.emanueleferonato.com/stuff/mobiletemplate/.

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

MAIN MENU LAYOUT

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

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

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 3.11 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 11 comments

  1. Jared

    on August 23, 2013 at 7:25 pm

    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

    on August 23, 2013 at 8:55 pm

    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

    on August 26, 2013 at 5:39 am

    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?

    Thanks,

    Filip Danic

  4. Emanuele Feronato

    on August 27, 2013 at 11:09 pm

    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. ielts

    on August 28, 2013 at 2:22 pm

    fantastic
    tanx admin

  6. Jonathan Alphonso

    on August 30, 2013 at 6:04 pm

    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.

  7. Upcoming HTML5 game: Blocks Feel Love - Emanuele Feronato

    on September 3, 2013 at 6:05 pm

    [...] by the evil GreyBlock, and BraveBlock the hero must rescue her), a level select screen you can download at this post, coins to collect, boss fights, all kind of weird platforms, particle effects and some other [...]

  8. Andrew Wooldridge

    on September 3, 2013 at 6:24 pm

    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?

  9. Emanuele Feronato

    on September 3, 2013 at 6:42 pm

    Use it as you want, remember me if you get millionaire :)

  10. Jesus Alberto Ochoa Portillo

    on November 24, 2013 at 12:01 pm

    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)

  11. Jesus Alberto Ochoa Portillo

    on November 24, 2013 at 12:53 pm

    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

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×