Help I m lost in my code [Bejeweled like]

[Chrome]

Hello everyone

I m an Phaser newbie. I m discovering day by day the possibilities offered by the Phaser engine. My project that I m building currently is an Bejeweled like but it lacks of animation for the moment.
I can't manage to implement the animations of the blocks/tiles before destroying them when there is a match of same block type. I would like to share the project with you and get some insights on my code.

I cant find ways to refactor my code. Adding animations seems impossible at this stage. I tried several stuff but because of how I build up my game, it just loop endlessely.
You can find my project joined in description. 

Here is what I m currently doing ( or thinking doing )

• Load several stages
• Once in the playStage, initiate a grid of X*X tiles
• For each spot, generate a Tile. A tile is a random selected sprite with input option. it is saved in an multidimesional array to find it back.
• While thereAreChangesInTheGrid(Deletion, adding or moving tiles) we are going to check for possible matches in the grid
• Checkmatches does the following: Iterate over the whole grid, pushing each tile to a sameColorBlocks array. Why? Because each block is a potential match.
  While iterating over the grid, each spot needs to check if there are same color neighbhours around him. If the computer found a neighbhour, propagate the search to this new neighbhour. That one is pushed to the sameColorBlocks array.
• Still in checkMatches; after doing the propagateSearch, we have found all possible color neighbhours. If there are more then 3( could be any value) We delete them. It is a match.
• To delete a tile. Iterate over the whole grid and find the tile corresponding to the sameColorBlockArray. 
• Once we found all matching colors we can execute TileDown(). TileDown can do two things. Push a tile down or generating a new one depending on his situation in the grid
• If we did all this do checkmatches again. Else there is no more matches so we can go out of the loop
• Score is being updated

Next part of the game in development is the switchBlock functionality. it is still not finished but it does the job.

 

How I see it is adding the fade out animations in the deleteTileFromTileGrid() function. 

this.add.tween(theTile).to({
                                alpha: 0
                            }, 1000, Phaser.Easing.Linear.None, true, 0, 1000, true);

While this animation is going on, I delay the destroying and nullyfing of the tile in the tileGrid with something like

game.time.events.add(Phaser.Timer.SECOND * 1, this.destroyThis, this, theTile);


destroyThis: function (theTile) {

        theTile.destroy();
    }

The game.time.method.... would be executed in the deleteTileFromTileGrid function.  But I think I m having issues in other functions like checkMatches() because they are running a Do while loop, looking for changes in the grid (deletion/adding/moving in the grid).

Like I said, I would like to get some insights on my code because Im getting frustrated as hell the way I organized my code but I dont know where to start. Also, where would you place the animations? It seems the impossible step to achieve because of the way I coded this project.

The play.js file can you find here 

https://gist.github.com/anonymous/2bf44e5009edc0bc83ae all the other files are in the zip

Thanks guys

Chrome

 

 

 

 

CandyCrush.zip

[gca]

I'm pretty noob with Phaser also, I'd say we have +- the same experience and for disclosure, I haven't checked your source code.

Given this, here are my two cents.

Use the onComplete callback, instead of a timer.

Also, I'd add a propriety to each tile upon creation (tile.alive = true), change it to false when the combo is done and use an if condition (if(tile.alive)) in helper functions like checkMatches() etc.

 

Hope it helps!