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