Welcome to the Island of Relevancy.
To create the game board, we'll use HTML and CSS. We'll create a 3x3 grid of squares that players can click on to place their symbols. We'll also use Tailwind CSS to style the board and make it responsive.
When a player wins, we'll celebrate their victory with confetti animations, an animated Tic Tac Toe trophy over the winning player's avatar and a highlight of the three squares that make up the winning line. We'll use the Canvas Confetti library to create the confetti animations.
To reset the game after a victory or a draw, we'll provide a "Reset Game" button that players can use to start a new game.
How it works?
The game starts with player X's turn and they can click on an empty square to place their symbol. After player X makes their move, it becomes player O's turn to place their symbol in an empty square. During each turn, the game shows a bounce animation on the current player's name to indicate whose turn it is. This makes it easy for players to keep track of whose turn it is and adds a fun element to the game.
By default, you'll see Davy Jones and Jack Sparrow representing X and O respectively. But if you want to personalize the game, you can upload your own avatars from your local machine. Note that the uploaded avatars won't persist after a page refresh since there's no database connectivity.
When a player wins, the game will display confetti animations over winner's avatar and at the top of the page to celebrate the victory. The player's avatar will also be adorned with an animated Tic Tac Toe trophy. And to help you see the winning move more clearly, the game will highlight the three squares that make up the line.
Each player has a score that increases by one after securing a victory. The scores are stored on the client side (in the local storage of your browser) so you can keep track of your progress even if you close the page. And if you ever want to start over, you can reset the scores to 0 for both players with a click of "Reset Score" button.
To reset the game after a victory, you can click the "Reset Game" button.
At the end of the game, players can download an image of the board with the winning trophy and the score. This image can be saved or shared with others.
In case the game ends in a draw, a popup message is displayed notifying you that the game ended in a draw.
So what are you waiting for? Let's play some Tic Tac Toe!!!
Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!
Top comments (25)
Nice game! What's the algorithm for checking for winning conditions?
I (re)created two browser games a while ago to help me learn. If anyone's interested:
I have added A GitHub link to the YouTube video. You can check the code of winning conditions. Thanks for sharing these games. You added "How to play" section which is amazing and important part for any game..
Ah, thanks for that - I was in a bit of a rush and didn't see the link. Very clever!
You’re welcome my friend
If you like JS Games , you can look at this one : Puzzle
The puzzle's great fun! It's nice that the code is there too so you can see how things are done.
If you have some questions, don't hesitate...
Thank you. That puzzle is great
nice one. dope stuff
Thank you Anthony sir for your kind words..
Great job dude!!!
Thank you boss..
Thanks for the share 🙂
You're welcome my friend..
wow great work
Thank you boss
Simple and great explanation ✨👏
Thank you so much bro..
Thank you Femi Akinyemi Sir
Thank you for your feedback
It's a great composition of an article mate , good stuff :heart
Thank you my friend for your kind words.. ❤️