If you are looking for a Rust project, you are probably looking for Connect 4 computer instead.
For this project, I just wanted to make a simple 2048 clone and polish it as much as I could as an addition to my collection of time wasting sites.
To start off with, I wrote a simple console implementation of the project. When moving the tiles, we iterate through them all, and only merge once at a time. As an example, here is what happens when moving left in this scenario (examples shown are from the website, not the console):
We start with the leftmost tile, and move it as far as we can to the left. It is obviously already as far as it can go, so we move to the next tile. This one is empty, so we can skip it. Next, we are on the middle right tile. We move that as far as we can to the right, which puts it in the middle left column. However, the tile to the left of it is equal to it, so we merge the two into a 4 tile and set a flag that says a merge has taken place on this row. After that, we move the rightmost tile as far as we can to the left. The row now looks like this:
Under ordinary circumstances, we would merge these tiles, but the merge flag has been set indicating that we have already merged, so we leave them as they are. This then repeats for every row. Unfortunately, I couldn’t figure out a way to map this to other directions, so I had to make separate functions for up, down, left and right.
After this, I moved to HTML. I chose to use absolutely positioned elements rather than the canvas API, as I am inexperienced with it (maybe I will investigate in a future post). Because of this, I can use CSS3’s transition property! Put simply, whenever you change a css attribute that it has been told to watch, it will tween between the old and new value in the specified time. You can control which attributes it applies to and the tweening function used, so it is very versatile. In this project, I used it for animating movement with the top and left properties, as well as the transform property in order to scale the tiles up and down slightly when they merge.
Towards the end of the project, I discovered a special case where if the setup below occurs, only one tile merges, as the merge flag mentioned above prevents more than one merge occuring.
To fix this, I just told it to look out for those special cases in each row, and if they occur I manually defined how to merge them. The animation looks a little off, but it was a simple solution and I may revisit and fix it later.
But wait! There’s more!
I also chose to make an accompanying android app to go with this. This is because on mobile, swiping down causes the page to refresh which is incredibly annoying. To do this, I put the source directly into an Android Studio project, and then created a WebView component that showed the local files. It took a little bit of work to get it to fill the screen, and I also encountered a weird security feature which disables JavaScript on WebViews unless you explicitly opt-in (it’s not as if it took me 20 minutes to figure out why it wasn’t working or anything). However, once that was out of the way, I published it to the play store with no problem. App link
