Design a Tic Tac Toe Game in Tailwind CSS
The Tic-tac-toe game is a classic two-player game where players take turns marking spaces in a 3×3 grid with their respective symbols. The objective of the game is to get three of one’s symbols in a row, column, or diagonal. This project aims to implement a simple Tic-tac-toe game using HTML, Tailwind CSS, and JavaScript.
Approach:
- Create a folder with the name of the project and two files inside it for HTML and JavaScript.
- In the HTML file, use the HTML elements like <div>, <span>, heading etc to create the structure of the website.
- Now, include Tailwind CSS using the CDN link and style your web page using its classes.
- Implement JavaScript to check for the filled places and announce the winner according to that or output draw in case of a draw.
Example: The below code will explain how you can create a tic-tac-toe game using Tailwind CSS.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > The Tic Tac Toe </ title > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" > < style > .square { width: 100px; height: 100px; line-height: 100px; font-size: 2em; } </ style > </ head > < body class="bg-gray-400 h-screen flex justify-center items-center"> < div class="bg-white p-8 rounded-lg shadow-md max-w-md w-full"> < h1 class = "text-3xl font-bold mb-3 text-center" > Tic Tac Toe </ h1 > < h3 class = "text-1xl font-bold mb-3 text-center" > X will start first. </ h3 > < div class = "grid grid-cols-3 gap-4 text-center" > < div class = "square bg-gray-200" onclick = "handleClick(0)" id = "0" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(1)" id = "1" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(2)" id = "2" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(3)" id = "3" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(4)" id = "4" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(5)" id = "5" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(6)" id = "6" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(7)" id = "7" ></ div > < div class = "square bg-gray-200" onclick = "handleClick(8)" id = "8" ></ div > </ div > < div id = "status" class="mt-6 text-gray-900 text-center"></ div > < div class = "flex justify-center mt-4" > < button onclick = "restartGame()" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105"> Restart </ button > </ div > </ div > < script src = "script.js" ></ script > </ body > </ html > |
Javascript
// script.js let currentPlayer = 'X' ; let board = [ '' , '' , '' , '' , '' , '' , '' , '' , '' ]; let gameActive = true ; const winningConditions = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; function handleClick(index) { if (gameActive && board[index] === '' ) { board[index] = currentPlayer; document.getElementById(index). innerText = currentPlayer; checkWinner(); togglePlayer(); } } function checkWinner() { for (let i = 0; i < winningConditions.length; i++) { const [a, b, c] = winningConditions[i]; if (board[a] && board[a] === board[b] && board[a] === board) { gameActive = false ; document.getElementById( 'status' ). innerText = `${currentPlayer} wins!`; return ; } } if (!board.includes( '' )) { gameActive = false ; document.getElementById( 'status' ). innerText = "It's a draw!" ; } } function togglePlayer() { currentPlayer = currentPlayer === 'X ' ? ' O ' : ' X '; } function restartGame() { currentPlayer = ' X '; board = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ']; gameActive = true; document.getElementById(' status ').innerText = ' '; for (let i = 0; i < 9; i++) { document.getElementById(i).innerText = ' '; } } |
Output:
Contact Us