Unleashing the Power of Google Sheets: Tetris Reinvented

Let us discover the fusion of a classic game and a popular productivity tool – Tetris on Google Sheets! This, admittedly unique, gaming experience showcases the incredible capabilities of Google Sheets and Apps Script.

How to Play Tetris on Google Sheets

  1. Access the game here.
  2. Make a copy of the Google Sheet file and add it to your drive.
  3. Open it, read the instructions, and press “Start” to play.
  4. Be prepared for some quirks—check out the bugs section for more details.

Here is a video demo.

The Origin of Google Sheets Tetris

In 2018, my PM(Hey Dennis!) assigned me an Apps Script project on Google Sheets. Though hesitant at first, I quickly became captivated by the versatility of Apps Script. After completing two successful projects, I humorously challenged myself to create a Tetris game using Apps Script, inspired by a lighthearted Friday evening. Thus, the project commenced.

Crafting Tetris in Google Sheets

The technical process of developing the game involved multiple steps, including dropping of the tiles, implementing controls for tile movement, stacking tiles, and clearing rows. Initially using a three by three bounding box for tiles, I eventually transitioned to a “hinge” for each shape and rotation, significantly simplifying the code.

Technical Deep Dive

In this section, we delve into the more technical aspects of creating Tetris on Google Sheets. If you’re interested in understanding the behind-the-scenes development, read on! You may find the code here.

Key Components of Tetris on Google Sheets

The development process began by tackling crucial challenges such as moving tiles and managing their stacking. The plan included these primary steps for a single tile (the ‘I’):

  1. Create a colored range drop (a set of contiguous cells in a straight line).
  2. Add controllers for moving tiles right and left.
  3. Design tile stacking on top of each other.
  4. Implement row clearing.

Overcoming Developmental Hurdles

Initially, placing the tile within a 3×3 bounding box helped move it down while interacting with the bounding box instead of each tile cell. The tile falling mechanism utilized an infinite loop that moved the range down while sleeping for a specific duration. The tile moving process involved checking cell values and adjusting the tile’s position accordingly.

For stacking, a shadow sheet named Board_ recorded 1s where a tile finally rested but not during its fall. If the buffer encountered 1s, it had to stop. The buffer was the row immediately beneath the bounding box. Row clearing involved a simple animation – checking if a row summed up to 24 (the number of board columns) and clearing it if it did. The content above the cleared row would then be copied and pasted into the now-empty row below.

Eventually, all other tetriminos (tiles) and their rotations were added to a new sheet called Tiles. While the 3×3 bounding box initially appeared helpful, it eventually caused issues. For instance, the moving bounding box would override the color stack below it, clearing everything in its path.

Furthermore, the buffer for the bounding box was a straight line under the box. However, with shapes like the “L,” the buffer became uneven when rotated.

The solution was to choose an origin  for every shape and rotation, copying and pasting relative to that origin. This method required custom offsets and ranges for each tile, and buffers needed adjustments as the uniform bounding box was abandoned.

A significant breakthrough came when realizing that placing the origins of every shape as nodes on a grid would simplify the data structures and make the code cleaner. This step demonstrated the importance of choosing suitable data structures for efficient code handling.

It would be simpler because set of offsets needed are less than otherwise. If this doesn’t make sense imagine how this part of the code would look like if the origin was at the top-left corner for each tile.

Screen Shot 2018-09-16 at 11.19.47 PM.png

The Potential of Apps Script

Apps Script is a remarkable tool that’s frequently underappreciated by those who could genuinely benefit from it. The user-friendly interface of Google Sheets, coupled with Apps Script, enables the creation of intricate systems without the need for infrastructure maintenance.

The concept of an MVC (Model-View-Controller) framework on top of Apps Script is also compelling. By saving states in another sheet and reading from and writing to it, we could potentially develop more sophisticated applications.

While Google Sheets and Apps Script might not rival the power of a SQL database, they could be a more suitable option for specific use cases. In my experience, people often undervalue the capabilities of Apps Script for everyday tasks.

Go ahead and give it a try—you won’t be disappointed!

Advertisement

12 responses to “Unleashing the Power of Google Sheets: Tetris Reinvented”

  1. Hey, Emin. Have you looked at using PropertiesService or CacheService to use as your key-value store? Should be much faster than read/write operations to the sheet.

    Liked by 1 person

    1. Hey Diego! This is a great idea! I have come across them, but never investigated them. Thanks you.

      Like

  2. Well, done! There are a number of improvements that could be made but this makes for a pretty solid implementation. Have you tried using clickable images for directional controls?

    Liked by 1 person

    1. Thank you very much. I have not. A couple of times sheets broke where it would not stop the script from running even after refreshing (video in the drive). So I decided to stick to one process. But it can be good improvement.

      Like

      1. Awesome work regardless. There is a vibrant Google Apps Script community on G+ (https://plus.google.com/u/0/communities/102471985047225101769) . You should check it out.

        You are just beginning to scratch the surface of what GSuite/Google Apps Script has to offer you as a developer. Also keep in mind that it is but one part of Google’s extensive Cloud platform. This rabbit hole goes far deeper that you realize.

        Liked by 1 person

  3. I requested access to the doc because the link wasn’t working, could you please accept. Kind regards, Josh

    Like

    1. Hey Josh, sorry for the super late reply, I did not see the pending comment. What you need to do is to make a copy of the sheet first and then play with it. You cannot work directly on the sheet that I shared, unfortunately, otherwise, I would have to keep putting up new sheets. Thank you for your interest!

      Like

  4. Could you try using functions (i.e. SUMIF, IF, SUM) in google sheets to create a game such as pong? You can add custom functions, so I was thinking if you created one that changes the fill of cells. It probably is a stretch, and I don’t Know much about java and html, but I do know that to use functions in sheets and when developing are the same setup.

    Like

    1. Sorry, javascript. Got that wrong.

      Like

    2. Hey Max. I am glad that you are interested. My first thought is that, as far as I know, it is not possible to create a game with only formulae.

      The reason for that is, that when a game renders, frame by frame, it is the computer, changing the color of the pixels, or in our case the cells, giving us the impression that something is moving. In google sheets, I did this by having the program run forever and sleep a second or two every time, so for us humans it is slow enough to understand. Otherwise, it will be too fast. I don’t know of a way to delay execution on formulae. Formulae also will complain if they go into an infinite loop.

      That being said, my first ever automation was with excel and later excel macros. Now I am a backend engineer. So I will encourage you to try and see if you can make a game using only formulae and what problems you face.

      You don’t really need HTML or javascript to code this game. It is apps script, which much simpler to learn than javascript. So if you do get to that point to be needing to use apps script, don’t worry too much, just give it a try. There is very good documentation on it as well: https://developers.google.com/apps-script/reference/spreadsheet/

      Like

  5. Thanks for your feedback! Also thanks for showing me that part of the google developers hub! I had no idea you could use that for sheets. It will definitely make things a lot easier for me.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: