Behind VR Games: Tic-Tac-Toe
--
Now that I think about it, paper and pencil games were my childhood. I still have notebooks full of various rounds of dots & boxes and pictionary. But if there was one game which 6 year-old Ayleen enjoyed playing the most, it was tic-tac-toe (don’t ask me why).
So what better idea is there than to upgrade my previously favourite game into an immersive virtual reality experience?
The game works similar to the classic version and was programmed in Unity, while the visuals and 3D design was created in Blender. The setting of the game takes place in a park (because we should spend more time enjoying the environment), where the player is sitting at a picnic table surrounded by trees and greenery.
When playing in this version, you can either click the trigger on your Google Cardboard headset to place your “X” piece on the board or press the space bar on your computer (the computer uses Os while the player uses Xs). See the video below for the gameplay:
How the Game Works:
- Placing your X pieces
As was mentioned before, you must press a button on your VR headset or computer in order to place a piece on the board but the code above only works for computer so you would have to replace Input.GetKeyDown(“space”) with Gvr.Viewer.Instance.Triggered for VR headsets.
So how does the computer know which space you want the piece to appear in? *spoiler alert: it’s not magic
To choose which spot to place your piece, the game detects your field of vision, or Raycast, which can be seen as a dot on the screen. If there is already a piece in that location, nothing will happen. On the other hand, if there isn’t anything there and the game isn’t over, the program runs the method PlayerSelect (see below).
While most of the above code is pretty self-explanatory and makes the X appear on-screen, there is one variable that is important to keep in mind; in order to help the computer detect what is in each spot, every X-piece is given a value of 1 so that it can be identified, empty spots are given a value of 0, and spaces with an O-piece are given a value of 2, which will be useful when determining who won the game.
2. Computer selection
So now that we are able to place our own pieces on the board, it’s important for the computer to have its turn! The above code is for the method PickRandomPiece which essentially chooses a random empty spot to place an “O” on.
Yes, you read that right. The computer randomly picks the spot to place the “O”. While I’m sad that I couldn’t incorporate AI into this game to increase the difficulty, maybe that’ll be another project for the future!
That being said, how does the computer randomly pick a spot for its next move? *spoiler alert #2: it’s not magic
In the code I’ve created an array called pieces which has 9 numbers in total (from 0–8), with each number assigned to a different space on the board. After every turn, the computer must generate random numbers until the number corresponds with an empty space on the board and an “O” is placed.
3. Checking for three pieces in a row
There are 3 different outcomes to this game; winning, losing, or having a tie. While it would be great to program it so that the player wins all the time (cause why not), it would get pretty boring after a while. Thus, in order to identify if someone has won the game, we need to program a horizontal check and vertical check for three pieces in a row.
Horizontal check:
When we look at a tic-tac-toe grid, we’re basically looking at a 3 by 3 square. Thus, a horizontal check would be looking at every row of this square to see if there are three of the same pieces. The variable y checks the different rows, while the variable x checks the different squares within each row.
This is where the previous note about the value of the different tic-tac-toe pieces come into play (Remember that every X-piece is given a value of 1, empty spots are given a value of 0, and spaces with an O-piece are given a value of 2). If all squares in a row have the same value, then the variable matches equals 3 and a different part of the code will run. However, if the horizontal check runs and matches is not equal to 3, then the game will proceed as usual until either someone wins or the board is filled.
Vertical Check:
Fun fact: the code is exactly the same as the horizontal check but with one difference → the pieces are now checked by columns rather than rows, which is done by swapping x and y in the equation used to show which pieces to check.
And that’s it. Same logic and rules apply here; if there are three pieces in a column that have the same value, the variable matches equals three and someone wins the game.
4. Winning the Game
Once the variable matches equals to 3, the program must check which player won the game. If the pieces were Xs (with the value of 1), then the player wins the game and the text “You win!” is displayed on screen.
On the other hand, if the program detects that the pieces were Os, then it displays “You lose!” on the screen (a̶n̶d̶ ̶s̶h̶a̶k̶e̶s̶ ̶i̶t̶s̶ ̶h̶e̶a̶d̶ ̶i̶n̶ ̶d̶i̶s̶a̶p̶p̶o̶i̶n̶t̶m̶e̶n̶t̶).
But what happens if there’s a tie? Or, more importantly, how can the program detect if there is a tie?
Don’t worry, I got you covered. Within the method PickRandomPiece, the variable tieCheck appears.
In any normal game of tic-tac-toe, when a tie occurs, all spaces on the board are filled. Thus, tieCheck must count the number of filled spaces on the board. When this number is equal to 9 and if there aren’t 3 of the same pieces in a row, then the message “It’s a tie!” appears on screen and the game ends.
5. Restarting the game
So now that we can win/lose, we need to program something that can let us replay the game as many times as we want (after all, 6-year old Ayleen did play this game basically over a hundred times).
If the boolean isGameOver is true and the game ends, the player becomes locked and cannot move nor interact with the environment anymore. More importantly, however, the variable resetTimer appears and makes the player wait for 3 seconds before it restarts the game.
However, if isGameOver is false, the text “Beat the computer!” is displayed on screen as a constant reminder for the player. And voila, we’ve basically learned all of the important code that goes behind this game!
3D Design with Blender
For the visual aspect and design of the game, I used a software called Blender, which is an open-source 3D computer graphics software toolset used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games.
With this tool, I was able to create the design of the tic-tac-toe board and the scenery of the game, including the trees, picnic table, and grassy landscape. It also made everything look a lot more realistic in comparison to the previously bright orange table I was using before I added the 3D design.
And so, with the help of Unity and Blender, 6-year old Ayleen can now fulfill her wish of playing tic-tac-toe all the time but in virtual reality!! And now that you know how the code behind the game works, you can also program this game for yourself :)
If you want to learn more about the game watch the video below:
—
If you enjoyed this article, please give it some claps! Follow me on LinkedIn or check out my personal website to learn more about other projects I’ve completed in the past!
Finally, if you have any constructive criticism or feedback, be sure to leave a comment below! I’d love to learn ways to improve my articles/writing style :)
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
