Building Blockle
Intro
This past month my cousin, Shyam, and I built blockle.io. At its core, Blockle is a Wordle-style daily puzzle game, except instead of guessing a word, you are tasked with rearranging blocks and escaping the board. It’s a similar game to the Rush Hour board game or the Unblock Me mobile game except built for the mobile web. I had a lot of fun building Blockle and learned a ton. I thought it would be interesting to share how it was built and the results of this project. I will be getting technical in this blog post, but not down to the code level. So if you want to view the code you can see it here on GitHub.
The Idea
Saturday May 7th
9:32 AM
It all started with a text. “What should we build?”. Shyam and I had been looking for something to create so we could one day make it big and quit our 9–5s. Hilariously, Shyam responds with “blockle”. No explanation at first just a name. That’s how you know its going to be a good idea. You can read the text exchange below.
Learning
10:00 AM
Awesome, now we had an idea. The only problem was I had no clue where to begin. I had no experience building web-based games and unfortunately Shyam was busy like any other normal person on a Saturday. Luckily, I’m lame and had no plans so I had all day to figure it out.
To start I did what any software engineer does when they are stuck, Google. I typed “how to build a 2d web game” then clicked on the first link and ended up on a brick breaker tutorial. For two hours I read and completed the tutorial. Finally I felt equipped to tackle Blockle.
Execution
Software development is an iterative process. You start with the basics and keep building on it one step at a time. I will really be able to break down this process and how long it took because I was updating Shyam with pictures and videos as I progressed.
1:02 PM
The first step was to figure out a way to represent the blocks as data so that way I could use this data to display a board. How I did it was I imagined the board as a 6x6 grid. Each block has a starting position defined by its X and Y coordinate, a length of either 2 or 3 units, and an orientation of either horizontal or vertical. With this information I hard-coded an example board and used what I learned earlier to display the board shown below.
The only problem was this was basically a drawing. I could not move the blocks and technically there were no blocks, this was literally a drawing made programmatically. How the technology I was using, HTML5 Canvas + JavaScript, works was it draws what you tell it using coordinates and colors. So these “blocks” appear but aren’t really objects you can interact with. This will be important to understand in a later section.
2:46 PM
Using the initial data I was using to represent the blocks I was able to make a matrix showing which block was occupying each space on a 6x6 grid. Then using the coordinates of where the user touches on the board and some math to scale, each touch is mapped to a space on the grid which is then mapped to a block. Below you can see the video I sent showing the matrix and which block was touched.
Although the blocks still don’t move, the drawn blocks are becoming more like objects as they are connected to the data representation by touch.
5:38 PM
Now that blocks are being selected I was able to get them to move by taking the offset between where the initial touch occurred and where a user finger/cursor moves for the drag. As I was saying before these blocks are not objects but just drawings of the data. So I am not actually moving these blocks. Rather every time a drag movement is recognized the board is redrawing itself and all the blocks. The blocks data representation is updated with the offset for its coordinates and it is drawn. If you move your finger back and forth it is clearing the board and redrawing the block thousands of times, so fast that it seems as if the block is moving!
As with every progression there is a but. Looking at the video you can see that while the blocks are able to move, there is nothing stopping them from overlapping and moving over each other. They can even be moved past the edges of the board, which is not something we want.
7:04 PM
With some math and using the matrix mentioned before, we are able to find the right and left bounds for the horizontal blocks which can only move sideways. The same is possible by finding the upper and lower bounds for the vertical blocks which can only move up and down. With these bounds we cap the dragging offset to the bounds and get this movement shown below!
If you watched the video I’m sure you noticed that when the blocks are released they go back to their initial state. The next thing that needs to be done is to set the block to its new position, but that is trickier than it seems as you will see in the next progression.
8:04 PM
The block’s coordinates are updated using the ending coordinates. But the tricky part was that the ending coordinates could be decimals and blocks could end up between spots in the grid. The solution was to round the ending position to the nearest whole number coordinate so it snaps to the grid. Finally we have all the movement done!
But…there’s always a but. There is no logic for the game to end or even keep a score. The gameplay works, but there is no game. Luckily, the hardest part is over! The muscle and bones of Blockle is all there. Just need to add the skin to make it prettier and the brains to make it fun!
Sunday May 8th
Pre-Launch
After that grueling 1st day of work, Sunday was focused on the finishing touches. There was no exact timeline for this part as everything sort of just came together quickly. The logic for the end game was just checking after every move if the red block had reached the right side of the matrix. An animation was added to make it seem like the red block exits the board. A border was added along the blocks and board, as well as a title and score which incremented with every move made. A share functionality was created so players can share their score with their friends. A rules page was created so people would actually understand how to play. And my favorite part was the emoji representation of the board in the shared messages giving the messages a wordle-like style! With all those changes we got the MVP or minimum viable product shown below!
Still it was only a minimum viable product. There were tons of improvements to be made such as a more intuitive UI, a personal leaderboard, and most importantly a backlog of puzzles that automatically change daily. For now I was resorting to curating and pushing an updated board every midnight until I could turn this MVP into a VP.
Launch
Sunday May 8th
6:00 PM
Although Blockle was not a completely finished product, I was ready to launch. It was playable and those improvements mentioned above could be made at a later time. Excitedly, I hurried to Google Domains to purchase blockle.com, but somehow that domain was taken. It was okay though because the much cooler and hip domain name blockle.io was very much available. 3 minutes and $60 later I was the proud owner of blockle.io!
Getting the website online was not difficult at all. Because my code was already on GitHub, I was able to use a service GitHub offers called Pages to deploy static websites for free under a sub-domain of github.com.
Static websites are websites where there is no backend or server needed for your website to function. Like Wordle, Blockle was created with everything happening on the client’s side. The user’s web browser handles all the logic/math needed for the movements and gameplay. Even the board is hard-coded into the code so there is no backend to fetch the board and load it in.
With the website hosted online for free through GitHub, I connected my domain to the IP address of where Blockle was hosted. Finally, we were up and running!
Before sharing with my friends and family I quickly added google analytics functionality so I could track how many people visited Blockle. Finally, Blockle was released and on launch day we had 70 new users as you can see below!
Promotions
Since launch Blockle has been shared on friends’ and families’ Instagram stories. We shared it on Hackernews, Product Hunt, Reddit, and of course TikTok. I even started an Instagram ad campaign for $10 which flopped. Still learning the marketing side of things, but in the less than 3 weeks since launch Blockle has amassed 1360 total unique users and has been visited a total of 8249 times. While those huge numbers are exciting, retaining users has been tough. The game is hard to solve and can take a bit longer than a Wordle might. However, those who love a challenge seem to be coming back, as Blockle’s daily active users hovers right around 70 people!
Improvements
Once the base game was set, there were additional features we wanted to create. One of the most important features was having a backlog of puzzles which changed daily. A caveat was we didn't want to manage or pay for having a backend. So once again we looked to Wordle. How Wordle works is all the words are loaded on the client side in the Javascript file you retrieve when visiting the Wordle website. The same could be done with Blockle, but instead of words we load puzzle configurations.
For the first two weeks I was manually creating puzzles and merging them in. I could manually create a backlog but that would take too long. I started creating a random puzzle generator which would then solve the randomly generated puzzle with BFS (breadth-first search). I was running into a few issues and was searching how I could optimize this problem, when I came across an article doing exactly what I wanted. Instead of reinventing the wheel I used this database of Rush Hour puzzles by Michael Fogleman to create Blockle puzzles. His data representation was a lot different than mine and Rush Hour is a different game than Blockle so I had to do some filtering and data transformation. Finally, I had hundreds of thousands of puzzles in Blockle notation. I filtered out puzzles that took too little or too many moves and loaded a years worth of puzzles into the javascript file. I didn’t do more than a year cause I didn’t want to affect load times too much. Next year when I renew the domain I will also refresh the puzzles which will only be a 5 minute process.
The next important task was creating some stickiness to Blockle. Once a user visits we want them to come back the next day. To build this engagement Shyam built a personal leaderboard. The personal leaderboard tracks your win streak and uses the LocalStorage API to save your best score of the day and previous days’ results. This requires no backend as LocalStorage saves persistent data on the client’s browser.
Shyam also added a golf-like par to make winning more challenging than listlessly moving blocks until the puzzle was complete. With the par you have to complete the puzzle under the optimal + par number of moves for it to count as a win streak. The great thing about Blockle is it differs from Wordle’s play once a day. Sure there is only the same one puzzle for everyone, but users can retry the day’s Blockle until they optimize their moves to win. This challenge and leaderboard is great for more hardcore fans, while casual fans can still enjoy sharing their best scores and competing with friends.
The last improvement I want to mention is one neither Shyam or I made. This one is one of my favorite improvements just because it made me so happy someone random loved Blockle so much they wanted to improve it. I mentioned earlier I promoted Blockle on Reddit. Well on the Reddit post a user mentions the border could be thicker so the exit is more clear. Instead of waiting for me to make the change, the user read through the code and opened a pull request with the changes he wanted (which I think is a testament to the readability of the Blockle source code). I quickly approved the changes and was happy to have my first contributor!
After all these improvements you can see where Blockle stands now either on blockle.io or the video below.
Closing Thoughts
As always there is room to improve. I’d love to spend more time on Blockle and perfect it, but there are a ton of other projects I’d like to start creating. In the meanwhile, Blockle is set on cruise control and will continue bringing joy to its small but loyal fanbase. If you like Blockle be sure to share it with your friends and family. With your help maybe one day Blockle will have millions of users! Until then I will eagerly await a call from the New York Times to buy Blockle for a million dollars like they did Wordle. Thanks for reading and I hope you enjoyed the write-up. Happy Coding!
