TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

How to Create a Colorful Tic-Tac-Toe Game with HTML, CSS and JavaScript

June 1, 2024 3 Min read CSS HTML JAVASCRIPT
Tic-tac-toe games

Here’s a colorful Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript only. The game includes a restart button, winner message, and special effects for the winning line.

HTML Code for Tic-Tac-Toe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Tic Tac Toe</h1>
        <div id="board">
            <div class="square" data-index="0"></div>
            <div class="square" data-index="1"></div>
            <div class="square" data-index="2"></div>
            <div class="square" data-index="3"></div>
            <div class="square" data-index="4"></div>
            <div class="square" data-index="5"></div>
            <div class="square" data-index="6"></div>
            <div class="square" data-index="7"></div>
            <div class="square" data-index="8"></div>
        </div>
        <div id="message"></div>
        <button id="restart">Restart Game</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Code for Tic-Tac-Toe

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    margin: 20px auto;
}

.square {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.square.cross {
    background-color: #ff9999;
}

.square.circle {
    background-color: #99ccff;
}

#message {
    margin: 20px;
    font-size: 1.2em;
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

JavaScript Code for Tic-Tac-Toe

document.addEventListener('DOMContentLoaded', () => {
    const squares = document.querySelectorAll('.square');
    const message = document.getElementById('message');
    const restartButton = document.getElementById('restart');
    let isCrossTurn = true;
    let board = ['', '', '', '', '', '', '', '', ''];

    squares.forEach(square => {
        square.addEventListener('click', handleSquareClick);
    });

    restartButton.addEventListener('click', restartGame);

    function handleSquareClick(event) {
        const square = event.target;
        const index = square.dataset.index;

        if (board[index] !== '') return;

        board[index] = isCrossTurn ? 'X' : 'O';
        square.textContent = isCrossTurn ? 'X' : 'O';
        square.classList.add(isCrossTurn ? 'cross' : 'circle');

        if (checkWinner()) {
            message.textContent = `Player ${isCrossTurn ? '1 (Cross)' : '2 (Circle)'} wins!`;
            squares.forEach(square => square.removeEventListener('click', handleSquareClick));
        } else if (board.every(cell => cell !== '')) {
            message.textContent = 'It\'s a draw!';
        } else {
            isCrossTurn = !isCrossTurn;
        }
    }

    function checkWinner() {
        const winningCombinations = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];

        return winningCombinations.some(combination => {
            const [a, b, c] = combination;
            return board[a] && board[a] === board[b] && board[a] === board[c];
        });
    }

    function restartGame() {
        board = ['', '', '', '', '', '', '', '', ''];
        squares.forEach(square => {
            square.textContent = '';
            square.classList.remove('cross', 'circle');
            square.addEventListener('click', handleSquareClick);
        });
        message.textContent = '';
        isCrossTurn = true;
    }
});

Let’s implement and play Tic-Tac-Toe game.

Tags:

  1. HTML CSS Tic-Tac-Toe game
  2. Create Tic-Tac-Toe with HTML and CSS
  3. HTML Tic-Tac-Toe tutorial
  4. CSS Tic-Tac-Toe game design
  5. Colorful Tic-Tac-Toe game
  6. HTML CSS game development
  7. Tic-Tac-Toe game effects
  8. Tic-Tac-Toe restart button
  9. Tic-Tac-Toe winner message
  10. HTML CSS game tutorial
  11. Interactive Tic-Tac-Toe with CSS
  12. Simple Tic-Tac-Toe game HTML CSS
  13. Build Tic-Tac-Toe without JavaScript
  14. Responsive Tic-Tac-Toe game design
  15. Beginner HTML CSS game project
Related Post:
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
Create a Stylish Analog Watch with HTML, CSS, and JavaScript − Creating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock.
How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript − Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
Responsive Web Design with CSS: A Short Tutorial − Responsive web design is a crucial aspect of modern web development. It ensures that your website looks and functions well on a variety of devices,.
How to Create a Modern Stylish Accordion with Arrows Using Only HTML and CSS − This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect.
How to Create a Stylish and Modern HTML Select Field Using CSS − Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:.
Modern and Stylish Button with Gradient and Hover Effects − This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its.
Creating a Modern Responsive Menu with HTML & CSS Only − Learn how to design a stylish and modern website header section and responsive menu using just HTML and CSS, with a responsive menu that toggles.
Design a Modern and Stylish Login Form using HTML and CSS − This is a modern and stylish login form using HTML and CSS, featuring 3D effects, colorful fields, and a button. The “Not registered? Create an.
Creating a Modern Button with Stylish Hover Effects Using CSS − This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will.
Pure CSS Custom Modern and Stylish Checkboxes − Creating a custom modern and stylish checkboxes using pure CSS can enhance the visual appeal of your web forms. Here’s a simple and elegant checkboxes.