Inspiration
The inspiration for this mini-game comes from a math question that I was solving.
What it does
The game allows two players to play Tic Tac Toe on a 9-square board, with each player taking turns to place their mark (random number determind by a dice). The game finishes when a player has no space left on their board, and the winner is the player with the higher point. The game also includes a dice feature, where it automatically rolls a number for the player after a move has been made.
How to play
The game is played between two players, each with their own 3x3 board. Player One starts the game by rolling the dice and playing the number that is shown on it in any of the columns on their board. The next turn goes to the other player. The game continues until one of the players fills their board. The player with the highest score at the end of the game is declared the winner.The score is calculated by adding the numbers in each column and adding the total points of all three columns together. If all the numbers in a column are the same, the score for that column is calculated by simply adding the three numbers. If there are two of the same numbers and a third different number, the score for that column is calculated by multiplying the repeated number by 4 and adding the result to the third number. If all three numbers are the same, the score is calculated by multiplying the repeated number by 9.If at any point in the game a player plays a number that is the same as one in the other player's column, the second player loses all instances of that number in that column. This rule is in place to reward players for taking risks and having repeated numbers in their columns.
How we built it
The game was originally designed to be played in a python terminal. However, with the goal of allowing players to join a play session from different computers, the decision was made to turn it into a web app. ReactJS was used to create the front-end, and firebase was used for the back-end. This setup allows for real-time updates to the game state, as any changes made by one player are immediately reflected on the other player's screen. The game state is continually written to and read from a database, ensuring that both players have access to the latest information.
Challenges we ran into
During the setup process, we faced several challenges in both the front-end and back-end. On the front-end, our biggest challenge was getting the CSS to work as I had limited experience in that area. Apart from that, we conducted extensive testing to ensure that the game wouldn't break under any circumstances. On the back-end side, the process was straightforward due to the exceptional documentation provided by Firebase.
Accomplishments that we're proud of
Creating a multiplayer Tic-Tac-Toe game took a lot of effort, but it was worth it. Although there's still one bug to fix, we're proud of the final result and how it allows players to play together, even from different computers.
What we learned
Through this project, I gained a deeper understanding of ReactJS and its features, such as useState() and useEffect(). Additionally, this was my first time working with Firebase, and I am now excited to incorporate it into future projects.
What's next for tic-tac-toe
The next step for this game is to introduce a single-player mode where players can compete against a sophisticated AI with a winning strategy. Additionally, the game will feature an animated 3D dice for a more immersive experience.
Log in or sign up for Devpost to join the conversation.