HTML5 Diamond Digger Saga prototype made with Phaser

Some days ago I showed you how Diamond Digger Saga is basically based upon flood fill algorithm, now it’s time to make a working HTML5 prototype made with Phaser.

First, let’s have a look at what we are going to build:

Click on a globe to remove all its adjacent globes and make new globes fall from the top.

You can also play it with your mobile devices pointing to this link.

Once the player clicks on a tile – remember you can have gems, balls, fruits, animals, but they all are tiles – flood fill algorithm is called to remove all contiguous tiles of the same color.

When a tile is removed, it leaves a hole in the game board. holesBelow function calculates how many empty tiles there are under a given tile, so we can tween it to its new position. Also, new tiles has to be placed, making them fall from the top. Another tween handles this situation.

Here is the source code:

Next time we will see how to create water like in the original game, but all in all it’s just another flood fill so you should be able to do it by yourself. If you can’t don’t worry because next step will come next week. Meanwhile you can download the source code of the entire project.

  • Eagllus

    I like the game concept,
    but was wondering why you made every function available in the global scope?

    Would it not have been better to place the functions within {preload:onPreload, create:onCreate}?

  • Eagllus

    I think you miss a var before theTile.
    Later in the code you do have a var before it.

    function onCreate(){
    for(i=0;i<fieldSize;i++){
    tileArray[i]=[];
    for(j=0;j<fieldSize;j++){
    var randomTile = Math.floor(Math.random()*tileTypes)
    theTile=game.add.sprite(j*tileSize+tileSize/2,i*tileSize+tileSize/2,"tiles");

  • SadiQ

    Nice. You should also only allow the click to register when the tween has finished moving the pieces :)
    How about some more advanced stuff, like making sure that the player will always get “stuck” at a certain point/level? (that should be an interesting algorithm)

  • Pingback: HTML5 Diamond Digger Saga prototype made with Phaser – adding dirt and water - Emanuele Feronato()

  • y2

    How about some more advanced stuff, like making sure that the player will always get “stuck” at a certain point/level?

  • Pingback: ??Phaser?????????????? | Phaser??()

  • nice game