Get the full commented source code of

HTML5 Suika Watermelon Game

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

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.setDefaultProperties();

        // this method will add audio to the game
        this.addAudio();

        /*  we are using ARCADE physics in this game.
            the physics engine will handle collisions, overlaps, velocities and motions  */
        game.physics.startSystem(Phaser.Physics.ARCADE);

        /*  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.defineGroups();

        // this method will create a particle emitter to be used when the player collects a coin
        this.createParticles();

        // this method will create a fixed overlay where we'll place the score
        this.createOverlay();

        // this method will create the menu
        this.createMenu();

        // this method will define the tweens to be used in game
        this.defineTweens();

        // this method will draw the level
        this.drawLevel();

        /*  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
GET THE SOURCE CODE WITH PAYPAL
or GET THE SOURCE CODE WITH GUMROAD Get on Gumroad
I hope you’ll enjoy studying the source code as much as I enjoyed writing it.

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