Tic Tac GoGoGo!

Games are Good Teachers

Yes, I made a Tic Tac Toe game in Google Sheets using Apps Script.

No, it’s not that difficult.

Yes, you can do it too…and you can learn a bit about Apps Script basics in the process.

Visuals Matter

I’m a pretty big fan of formatting my sheets with new fonts, nice colors and as much healthy design aesthetic as I can muster.

For this project, I did some of that, but I want to focus on the Apps Script that makes it work.

Want to see the whole breakdown? Check out the video below. Keep reading for the brief code breakdown.

Apps Script

Let’s take a look at the Apps Script I wrote for this sheet (the full code is at the bottom of the newsletter👇.

The first thing we need is to handle the scores. These functions do the same thing - one is for the X score and one is for the O score.

These will increment the score by 1 and clear the board when they’re run.

1. First we grab the current sheet:

   • var sheet = SpreadsheetApp.getActive();

2. Then we grab the current score.

   • var xScore = sheet.getRangeByName('xScore').getValue();

3. Then we increment it.

   • sheet.getRangeByName('xScore').setValue(xScore+1);

4. And clear the game board. This last line calls the next function we’ll look at.

   • clearBoard();

Clear Content

To clear the game board, we can use a built in method to simply clear the content from a range.

We grab the range by name, and then call the clearContent method on that range:

let board = sheet.getRangeByName('Board'); board.clearContent();

Reset Game

And lastly, we can reset the whole game to its original state by setting the values of X’s score and O’s score to 0 and running the clearBoard() function again:

sheet.getRangeByName('xScore').setValue(0);
sheet.getRangeByName('oScore').setValue(0);
clearBoard();

Simple & Effective

It’s easy to get bogged down in the complexity of spreadsheets, but simple examples like this help nail down fundamental concepts.

This is especially useful when learning a coding language…which is exactly what you’re doing when using Apps Script!

Join the Conversation

I’m on a mission to be the best YouTuber, consultant and online resource for people building practical, real world things with Google Sheets and Google Workspace products.

Come follow the journey on YouTube👇

I’m eager to hear what your current spreadsheet dilemmas are. Send me questions, and requests for topics to be covered.

You can reply to this newsletter, or reach out directly on YouTube.

I hope you have a great day, and stay awesome!

Full Code:

function xScore() {
  var sheet = SpreadsheetApp.getActive();
  var xScore = sheet.getRangeByName('xScore').getValue();
  sheet.getRangeByName('xScore').setValue(xScore+1);
  clearBoard();
}

function oScore() {
  var sheet = SpreadsheetApp.getActive();
  var oScore = sheet.getRangeByName('oScore').getValue();
  sheet.getRangeByName('oScore').setValue(oScore+1);
  clearBoard();
}

function clearBoard(){
  let sheet = SpreadsheetApp.getActive();
  let board = sheet.getRangeByName('Board');
  board.clearContent();
}


function reset(){
  let sheet = SpreadsheetApp.getActive();
  sheet.getRangeByName('xScore').setValue(0);
  sheet.getRangeByName('oScore').setValue(0);
  clearBoard();
}