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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers