HTML5 Diamond Digger Saga prototype made with Phaser – adding dirt and water

If you followed me last week, I published an HTML5 Diamond Digger Saga prototype made with Phaser which is mostly based on flood fill algorithm.

While in the first post I only showed how to remove and replace diamonds, now it’s time to see how to create dust and water tiles. Obviously, water behavior too is managed by flood fill algorithm. I am going to use Phaser in this example too.

This is what we are going to do now:

You can also play with your mobile device at this link.

You should know how to play: click/tap on a gem to remove it and all contiguous gems of the same color. Removing a gem will also remove the dirt below the gem, if any, to make water flow.

Here it is the source code, with new lines highligthed:

Let’s have a look at the new lines:

Lines 19-21: declaration of new variables to use: groundArray to store ground information, and two groups to properly manage display list. Gems will always stay on top of the ground.

Lines 25-26: preloading new graphic assets

Lines 32-33: adding the groups. Notice tile group is added after ground group, to make it stay in front of the stage.

Line 42: now gems are placed on the proper group

Lines 44-49:placing random dirt tiles

Lines 52-57: choosing a random tile on the first row, removing the dirt if any, then add water. waterFill function will perform flood fill with water and dirt.

Lines 77-90: flood fill algorithm applied to water

Lines 97-103: removing the dirt if under a gem we are removing. If the dirt we just removed is next to a water tile, we need to perform another flood fill

Lines 112-126: simple function to detect if there’s water next to a given tile

And this is the entire Diamond Digger Saga prototype. I must admit I did not play it that much, so if you want me to add some extra feature, just leave a comment and explain how should it work. Meanwhile you can download the full source code.

  • COOL!

  • laxmi

    Nice work, awesome !
    you are my guru

  • thank you for sharing…

  • Can I change the colors of the blocks of this? Where do I need to change the code within this above mnentioned code?

  • nice work, thanks

  • nice post thanks admin veryy code