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,
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 .
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 .
Comments
Post a Comment