17 September 2015

Blokky - A color matching game

A while back i read up on data structures like stacks , queues and graphs  and wanted to try them out as a mini project , in 7-8 hours spanning over 2 days , I had made Blokky .



 It's a simple game with simple mechanics , you click the group of a color and the group vanishes , the level ends when u have no valid moves left , if the number of blokky(the color blocks) left after u have no moves left is smaller than the level you're on , then u are allowed to progress to the next level.Each level adds another color to the palette , so the game gets progressively more challenging however there is the ability to undo your moves at the cost of half your current score , redo is free though.


Regarding the use of data structures , here is a brief abstract of how they're being used,

  • Stacks

    There are two stacks being used here "undostack" and "redostack" which are both basically 3D arrays , used to store the state of the game board , which is a 2D array.

    Note : because JavaScript makes a shallow copy of the 2D arrays when directly assigning , I had to go with iterating over each row and then using "array.slice()" method , resulting in a deep copy of the arrays.
  • Queues

    There is only one queue that is used for searching for the connected blocks of the same color , this  pretty much Breadth first Search in Graphs  , the queue is used to store all the unvisited
    and connected nodes , meanwhile a "checked" array keeps track of already checked nodes

    Note: because "indexOf" method doesn't work well with objects(arrays of arrays) unless the reference is the same , I had to manually search for the elements using a custom function "already()" which uses a linear search to check for the element's existence in the array.

    Considering that we were dealing with small data sets in each of the arrays , using a linear search didn't slow the game down much.  
Other things that I used were Purecss for quick styling , and a css class based color system.
the colors as you may have noticed are from google's material palette

All things said and done, this was a fun little project which taught me a lot about data structures and also the tiny peculiarities of JavaScript . if you would like to play the game  you can Play it here , if you wanna look at the source code its Available  here .