Learn how to make a complete commercial cross-platform HTML5 game: Globez fully commented source code released

It’s time to seriously learn HTML5 game development and in order for you to get the most knlowledge, I am going to give you some awesome tools, something you won’t find elsewhere.

I got some interesting revenue with my Flash Globez game which has also been ported to iOS, so I decided to sell the AS3 source code. A lot of readers got the source code and published their own games, but most of all learned how to create a full commercial Flash game.

Now, in HTML5 days, my Globez game got a new life with Sea Life Vs Mines which is being published by FGL and Christmas Quest, my Christmas 2014 game with 100 levels.

As you can see, it’s a game concept which you can easily turn into a more complex puzzle game rather than a quick drag and match arcade.

Today’s good news is I made a special HTML5 version of Globez game made with Phaser where every single line is completely commented in order for you to master HTML5 game development learning on an actual full game made with one of the best frameworks.

This is the game you are going to create, playable from your mobile device from this link:

If you are a long term reader of the blog, you should know I comment every single line of the code I publish, but just to give you an idea, this is an excerpt:

addTile: function(row, col){

     /*
     
     We have to generate a random number to decide which color to assign to
     the newly created globe
     
     Phaser has a nice way to generate random integer numbers. Just use
     
     game.rnd.between(0, game.global.tileTypes - 1)
     
     and you will have an integer number between 0 and game.global.tileTypes-1
     
     To achieve the same result with pure JavaScript, you would have to write
     
     Math.floor(Math.random()*game.global.tileTypes)
     
     */
     
	var randomTile = game.rnd.between(0, game.global.tileTypes - 1);
	
	/*
	
	determining globe x and y position according to tile size and offset
	
	*/
	
	var tileXPos = game.global.offsetX + col*game.global.tileSize + game.global.tileSize / 2;
	var tileYPos = game.global.offsetY + row*game.global.tileSize + game.global.tileSize / 2;
	
	/*
	
	adding the globe itself. Look. This is not an image. It's a sprite.
	
	What's the difference between an image and a sprite?
	
	The difference between an image and a sprite is that you cannot animate
	or add a physics body to an image
	
	Actually, this game could be done using images only, but I wanted you
	to know there are also sprites, and in more complex situations you may
	want to use sprites rather than images
	
	I would suggest to use images for logos, menus and screens, and sprites
	for the game itself
			
	*/
	
	var theTile = game.add.sprite(tileXPos, tileYPos, "tiles");
	
	/*
	
	assigning the randomly chosen frame to the sprite
	
	*/
	
	theTile.frame = randomTile;
	
	/*
	
	we don't want all globes to look the same, so we are rotating it a bit
	by a random angle. This will improve how the game looks
	
	*/
	
	theTile.angle = game.rnd.between(-20, 20);
	
	/*
	
	placing the anchor point in the center of the sprite. Notice everything you
	learned about images applies to sprites too
	
	*/
	
	theTile.anchor.setTo(0.5);
	
	/*
	
	placing the globe in tile array
	
	*/
	
	tileArray[row][col] = theTile;
	
	/*
	
	and finally adding it to tileGroup group
	
	*/
	
     tileGroup.add(theTile);
}

Did you find this code clear enough? The whole game is explained this way, and you will learn, among other things, how to:

* create and manage game states
* preload graphic assets, fonts and sounds
* show a loading bar
* create particle cascades and explosions
* add images and sprites
* manage group of images and sprites
* create animation tweens
* handle sprite sheets, also known as texture atlases
* create and trigger buttons
* handle click and finger inputs
* manage timed events
* play sounds
* scale the game to fit on any device
* cross-platform: create once, play everywhere
* pass variables through states
* use bitmap fonts
* and above all… create a complete game, from boot scene to game over scene

The game works with the latest version of Phaser, 2.5.0 at the moment, and will be updated to be up and running with each future version of Phaser.

This is an awesome opportunity for you to learn from an actual complete game, which comes in three tiers. Thanks to the experience made selling the AS3 version of the game, I am able to give you the best offer according to your needs.

If you are an experienced developer and simply want a game source code to edit and adapt it to fit your needs, you can have the uncommented source code at $9.99 only.

If you want the fully explained source code, as I recommend, you can have the full commented code at $19.99 only.

Finally, since I receive a lot of emails from people asking me to have a look at their source codes, I made another offer: while I really can’t look at someone else code, I can assist you in the making of a game if you start from my source code. With the top tier of the game, at $149.99, you get the fully commented source code and I will assist you through the creation of your game, with priority emails or by other means which we will define. I will dedicate up to five hours to your project, and since it’s an experimental offer, I may be ending it soon if I see there are too much requests, since my priority is to give you the proper support as quickly as possible – I know you want your game published FAST.

Anyway, no matter which tier will you choose, you will enormously support the blog by purchasing this source code, so here it s a recap of the offers:

[pricing_table columns=”3″] [pricing_table_column title=”Uncommented source code” currency=”$” price=”9.99″][icon_list][icon_list_item type=”check”]Full source code[/icon_list_item][icon_list_item type=”times” style=”color: red;”]Comments to explain the code line by line[/icon_list_item][icon_list_item type=”times” style=”color: red;”]Up to 5 hours of support to create your game[/icon_list_item][/icon_list]





[/pricing_table_column] [pricing_table_column featured=”true” featured_sub=”Featured” title=”Commented source code” currency=”$” price=”19.99″][icon_list][icon_list_item type=”check”]Full source code[/icon_list_item][icon_list_item type=”check”]Comments to explain the code line by line[/icon_list_item][icon_list_item type=”times” style=”color: red;”]Up to 5 hours of support to create your game[/icon_list_item][/icon_list]





[/pricing_table_column] [pricing_table_column title=”Supported source code” currency=”$” price=”149.99″][icon_list][icon_list_item type=”check”]Full source code[/icon_list_item][icon_list_item type=”check”]Comments to explain the code line by line[/icon_list_item][icon_list_item type=”check”]Up to 5 hours of support to create your game[/icon_list_item][/icon_list]





[/pricing_table_column] [/pricing_table]

Now there’s no excuse for you not to learn how to create HTML5 games. Moreover, everyone buying any of these packages will have a lifetime 10% discount on every future source code I will release.

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