Talking about Diamond Digger Saga game, Game development, HTML5, Javascript and Phaser.
Are you playing King‘s Diamond Digger Saga?
I am going to create a prototype of the game during next days, but everything is built upon flood fill algorithm I already explained in this post.
I am showing you the same thing I made with AS3 built with Phaser which yesterday released 2.1 version.
Click on a white space to fill the tiles with flood fill algorithm. You can check the theory behind this concept in the original post, and here you can find the full source code:
<!doctype html>
<html>
<head>
<script src="phaser.min.js"></script>
<style>
body{margin:0}
</style>
<script type="text/javascript">
window.onload = function() {
var game = new Phaser.Game(540,540,Phaser.CANVAS,"",{preload:onPreload, create:onCreate});
var fillMap = []; // array containing the map
fillMap[0] = [1, 1, 1, 1, 1, 1, 1, 1, 1];
fillMap[1] = [1, 0, 0, 0, 1, 0, 0, 0, 1];
fillMap[2] = [1, 0, 0, 0, 1, 0, 0, 0, 1];
fillMap[3] = [1, 0, 0, 1, 0, 0, 0, 0, 1];
fillMap[4] = [1, 1, 1, 0, 0, 0, 1, 1, 1];
fillMap[5] = [1, 0, 0, 0, 0, 1, 0, 0, 1];
fillMap[6] = [1, 0, 0, 0, 1, 0, 0, 0, 1];
fillMap[7] = [1, 0, 0, 0, 1, 0, 0, 0, 1];
fillMap[8] = [1, 1, 1, 1, 1, 1, 1, 1, 1];
var tileSize = 60; // tile width, in pixels
var colors = [0xFFFFFF,0x000000,0xFF0000]; // colors to tint tiles according to their value
function onPreload() {
game.load.image("tile", "tile.png");
}
function onCreate() {
for (i=0; i<9; i++) {
for (j=0; j<9; j++) {
var tile = game.add.sprite(j*tileSize,i*tileSize,"tile");
var value = fillMap[j][i]
tile.tint=colors[value];
fillMap[j][i]={
v:value,
t:tile
}
}
}
game.input.onDown.add(fill);
}
function fill(){
var col = Math.floor(game.input.worldX / tileSize);
var row = Math.floor(game.input.worldY / tileSize);
floodFill(row,col);
}
function floodFill(row,col){
if(fillMap[col][row].v==0){
fillMap[col][row].v=2;
fillMap[col][row].t.tint=colors[2];
floodFill(row+1,col);
floodFill(row-1,col);
floodFill(row,col+1);
floodFill(row,col-1);
}
}
};
</script>
</head>
<body>
</body>
</html>
Both water movement and gem selection in Diamond Digger Saga can be managed by floodFill function.
You can download the full project and wait for the prototype.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.