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

#javascript #html #css #programming

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

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

Files:

❤ 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

Top comments (25)

Anthony Fung • Mar 14 '23

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:

Trap Finder i.e. Minesweeper
Find the Colour Sequence i.e. Mastermind

Code of Relevancy • Mar 14 '23

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