Get the full commented source code of

HTML5 Suika Watermelon Game

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

This is going to be one the posts with the longest title I ever published, but there’s really a lot to talk about because Richard Davey himself, the mind behind the awesome Phaser framework, released a package with 5 royalty-free game templates, with full commented source code, PSD files and guide to use them in your own commercial projects. montage It’s an incredible opportunity to learn how to create games with Phaser or just to reskin them and sell to your clients or publish as brand new games on various marketplaces. Let’s have a look at the games included in the package: * Black Jack – The famous casino card game. * Coloring Book – A free-form coloring app, great for making kids apps. * Jigsaw – A powerful jigsaw template, easily cut any image up, to any size. * Sliding Puzzle – The classic puzzle game, easily customised and solvable. * Word Search – A powerful word search template, with flexible word selection. Along with the games, you will also receive the PSD files and a 10 pages guide which explains how to make your games run on a web server and shows how games are organised into folders. This is how each game is structured: As you can see, it’s very easy to figure out what is the content of each folder, but most of all I want you to have a quick look at the source code. This is BlackJack’s startRound function: 
/**
     * This starts a new round going.
     * 
     * It removes all of the cards (if visible) and swaps in the betting UI
     * and text fields, unless you've run out of money!
     */
    startRound: function () {

        this.cardsGroup.removeAll(true, true);

        if (this.bet > this.money)
        {
            this.bet = this.money;
        }

        this.turn = BlackJack.PLAYER;

        this.hitButton.alpha = 1;
        this.standButton.alpha = 1;
        this.doubleDownButton.alpha = 1;

        if (this.money === 0)
        {
            this.moneyText.text = "You are bankrupt!";

            this.playButton.visible = false;
            this.upButton.visible = false;
            this.downButton.visible = false;
            this.betText.visible = false;
        }
        else
        {
            this.moneyText.text = "Bank $" + this.money;
            this.betText.text = "Bet $" + this.bet;
        }

        this.betGroup.visible = true;
        this.playGroup.visible = false;

    }
As you can see, the function is commented, and each variable has a proper name to let you quickly understand its role in the game. You’ll also get two Phaser plugins: A powerful flood fill routine that extends the BitmapData class (as used in the Colouring Book template), and a flexible Jigsaw piece cutting plugin, where you can easily use just the plugins to cut out shapes, with their own stroke thickness. This package is a must have even if you are an experienced developer: having five game templates ready to go is always an opportunity to save development time, and the way each game source code is structured allows an enormous space for customisation. Get your 5 royalty-free game templates and start building your own game! Please understand these are not tutorials. Although the code is well commented, a basic level of Phaser experience is expected to get the most from them. If you are an absolute beginner, you should also have From null to full HTML5 cross platform game or Interphase #1 to get you started with Phaser.

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