Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Globe game, Game development, HTML5, Javascript, Monetize and Phaser.

With the latest release of Phaser 2.5.0 it’s time to update the Globez HTML5 game available for download. One of the things I love the most when I self-publish my products is I can support old time customers releasing free updates, as well as mantain up to date products for new customers. Globez is one of the games I made I love the most, not only bacause I got some interesting revenue with my first Flash version which has also been ported to iOS, but also because a lot of games have been created starting from the AS3 source code, making readers learn how to create a full commercial Flash game. With the increasing interest of HTML5 games, I used my HTML5 Globez engine to create Sea Life Vs Mines which was published by FGL and Christmas Quest, my Christmas 2014 game with 100 levels. And my latest game, Drawsum, was also created with this engine. 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 And there is a special bonus for you loyal readers, if you get the game before July 15, 2016, you’ll get the free update with Drawsum source code before the end of July. This also applies to old customers, no matter the tier you choose.
[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] A special thank you to all readers who will support the blog as well as the ones who already supported it.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.