DEV Community

Cover image for Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti
Code of Relevancy
Code of Relevancy

Posted on • Updated on

Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti

Welcome to the Island of Relevancy.

Tic Tac Toe is a classic game that has been enjoyed by people for generations. It's a simple game that can be played anywhere, anytime with just a pen and paper. But with modern technology we can take this game to the next level. In this video, we'll explore how you can build a Tic Tac Toe game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti.


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.

To make the board interactive, we'll use JavaScript to handle player moves and game logic. When a player clicks on a square, we'll check if the square is empty. If it is, we'll place the current player's symbol in the square and check if they have won. If there's no winner yet, we'll switch to the other player's turn.

To make the game more personalized, we'll add the ability for players to upload their own avatars. We'll use the HTML5 file input tag to allow players to select an image from their local machine. We'll then use JavaScript to display the selected image as the player's avatar.

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.

We'll keep track of each player's score using JavaScript and store it in the client side storage of the browser. This means that the scores will persist even if the player closes the page. We'll also provide a "Reset Score" button that players can use to reset the scores to zero.

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.


πŸ“¦ Demo:
https://t3-game.vercel.app


βš“οΈApp

App

App

App

App


So what are you waiting for? Let's play some Tic Tac Toe!!!


Files:

Code


❀ Motivation:

Motivation


πŸ€Support

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!

YouTube
Discord
GitHub

Support

Top comments (25)

Collapse
 
ant_f_dev profile image
Anthony Fung

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:

Collapse
 
codeofrelevancy profile image
Code of Relevancy

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..

Collapse
 
ant_f_dev profile image
Anthony Fung

Ah, thanks for that - I was in a bit of a rush and didn't see the link. Very clever!

Thread Thread
 
codeofrelevancy profile image
Code of Relevancy

You’re welcome my friend

Collapse
 
artydev profile image
artydev

Nice :-)
If you like JS Games , you can look at this one : Puzzle
Regards

Collapse
 
ant_f_dev profile image
Anthony Fung

The puzzle's great fun! It's nice that the code is there too so you can see how things are done.

Collapse
 
artydev profile image
artydev

If you have some questions, don't hesitate...

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you. That puzzle is great

Collapse
 
ebuka1anthony profile image
ebuka anthony

nice one. dope stuff

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you Anthony sir for your kind words..

Collapse
 
corners2wall profile image
Corners 2 Wall

Great job dude!!!

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you boss..

Collapse
 
sarma_akondi_746f338b83b7 profile image
Sarma Akondi

Thanks for the share πŸ™‚

Collapse
 
codeofrelevancy profile image
Code of Relevancy

You're welcome my friend..

Collapse
 
stakedesigner profile image
StakeDesigner

wow great work

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you boss

Collapse
 
adityasaini3 profile image
Aditya Saini

Simple and great explanation βœ¨πŸ‘

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you so much bro..

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

WelldoneπŸŽ‰

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you Femi Akinyemi Sir

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you for your feedback

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
manojlingala profile image
manojlingala • Edited

It's a great composition of an article mate , good stuff :heart

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you my friend for your kind words.. ❀️