Learn to create HTML5 cross platform games using Phaser – “Ladderz” game completely commented source code available

One of the most effective ways to learn is learning from real world examples which are somehow related to the topic you are studying. When I started studying programming, the most exciting project to learn from was… a phonebook. How can someone learn game development by making a phonebook? That’s why I always focused on the “no boring theory” concept and jumped straight to the point: game development. With the experience of more than 200 Phaser tutorials, as well as two books (From null to full HTML5 cross platform game and Create HTML5 vertical endless runner cross platform games) today I am publishing the completely commented source code of Ladderz game, a HTML5 endless platformer based on “Mike Dangers” series, with a lot of improvements. Have a look at the game, or play directly with your mobile device at this link.
Just click or tap to jump. The game features 5 different enemy types: spikes, fire, arrows, killable monsters (by jumpimg on their back) and invincible monsters. As well as coins to collect. Studying and playing with this source code will allow you to learn on a real-world working example, covering, among other things, now to: * Create a Phaser project * Detect and force for a certain screen orientation – portrait in this case * Preload graphics and sounds * Use bitmap fonts * Wait for and handle player input * Create frame-by-frame animations * Create animations using tweens * Use ARCADE Physics engine to manage sprites movement and collision * Play sounds * Recycle resources to save memory using object pooling * Use particle to generate sparkling effects * Handle and save high scores and game data * Adapt the game to various screen resolutions * Create custom listeners and signals There’s no doubt you will learn a lot from this game, or you can just reskin it as you prefer and publish on game portals or even sell it to your customers. But it’s not over: after the launch at a special price, the game will be updated with a whole new scene allowing to spend coins to get new hero skins, and such update will be free for all existing customers. Let me show you a sample of the source code, so you can make an idea on what you are about to get:
// in playGame you can find the game itself
var playGame = function(game){}
playGame.prototype = {

    /*  create method is automatically executed once the state has been created.
        we will use to set up the game and wait for player interaction  */
    create: function(){

        /*  using a ternary operator to save into savedData variable the object inside local storage, or new object with both "score" and "coins" values to zero.
            basically we check if localStorage.getItem(gameOptions.localStorageName) is null (no saved data)
            in this case savedData will become the object {score : 0, coins: 0}
            if localStorage.getItem(gameOptions.localStorageName) is NOT null, savedData will become the object created by
            decoding the JSON string saved  */
        this.savedData = localStorage.getItem(gameOptions.localStorageName) == null ? {score : 0, coins: 0} : JSON.parse(localStorage.getItem(gameOptions.localStorageName));

        /*  each game starts with some default properties such as the score at zero, the lives at three
            and so on, which are defined in this case by setDefaultProperties method  */

        // this method will add audio to the game

        /*  we are using ARCADE physics in this game.
            the physics engine will handle collisions, overlaps, velocities and motions  */

        /*  we have to define world bounds.
            a game has only one world: the abstract place in which all game objects live.
            world is not bound by stage limits and can be any size.
            "setBounds" updates the size of this world, and the four arguments are respectively:
            x coordintate of the top left most corner of the world, in pixels.
            y coordintate of the top left most corner of the world.
            width of the game world in pixels.
            height of the game world in pixels  */
        game.world.setBounds(0, - 3 * gameOptions.floorGap, game.width, game.height + 3 * gameOptions.floorGap);

        /*  this method will create the groups required by the game
            a group is a container for display objects including sprites and images.
            we will also use groups to check for collisions  */

        // this method will create a particle emitter to be used when the player collects a coin

        // this method will create a fixed overlay where we'll place the score

        // this method will create the menu

        // this method will define the tweens to be used in game

        // this method will draw the level

        /*  this is a listener which waits for a pointer - mouse or finger - to be pressed down
            then fire the callback function this.handkeTap.
            the "this" in the second argument is the context used in the function.  */
        game.input.onDown.add(this.handleTap, this);
As you can see, each line is really explained as in-depth as possible. Getting the source code not only will make you learn HTML5 game development faster, but also will support the blog and will grant you a big discount on my next products. You can get the game both with paypal and Gumroad
I hope you’ll enjoy studying the source code as much as I enjoyed writing it.

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

// 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
// Stairs
// 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