DEV Community

Bala Madhusoodhanan
Bala Madhusoodhanan

Posted on

4 2 1 2 1

Tic Tac Toe : HTML scripting

Intro:
Building the timeless game Tic Tac Toe with HTML scripts.

Image description

UX Component:
The below code defines the layout and styling for the Tic Tac Toe board and its cells using CSS. It creates a 3x3 grid layout for the board, with each cell being a square of 150x150 pixels. The cells have borders, and the content (X or O) is centered both vertically and horizontally. The content is displayed with a font size of 2em, and the cursor changes to a pointer when hovering over a cell, indicating that it is clickable.

    <style>
        .board {
            display: grid;
            grid-template-columns: repeat(3, 150px);
            grid-template-rows: repeat(3, 150px);
        }

        .cell {
            width: 150px;
            height: 150px;
            border: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            cursor: pointer;
        }
    </style>
Enter fullscreen mode Exit fullscreen mode

Event Trigger Component:
The board is represented as a grid with nine cells. Each cell is a

element with the class name "cell." When any cell is clicked, the corresponding makeMove function is called, passing the index of the clicked cell as an argument
    <div class="board" id="board">
        <div class="cell" onclick="makeMove(0)"></div>
        <div class="cell" onclick="makeMove(1)"></div>
        <div class="cell" onclick="makeMove(2)"></div>
        <div class="cell" onclick="makeMove(3)"></div>
        <div class="cell" onclick="makeMove(4)"></div>
        <div class="cell" onclick="makeMove(5)"></div>
        <div class="cell" onclick="makeMove(6)"></div>
        <div class="cell" onclick="makeMove(7)"></div>
        <div class="cell" onclick="makeMove(8)"></div>
    </div>

Rules Engine:
he JavaScript code enables the functionality of the Tic Tac Toe game by handling player moves, checking for a win or draw, and resetting the game when needed. The game's logic and flow are defined in this script, allowing users to play and enjoy the game on the HTML and CSS-designed board.

 <script>
        const board = document.getElementById('board');
        const cells = board.querySelectorAll('.cell');
        let currentPlayer = 'X';
        let moves = 0;
        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]
        ];

        function checkWinner(player) {
            return winningCombinations.some(combination => {
                return combination.every(cell => cells[cell].textContent === player);
            });
        }

        function makeMove(index) {
            if (cells[index].textContent === '') {
                cells[index].textContent = currentPlayer;
                moves++;

                if (checkWinner(currentPlayer)) {
                    alert(currentPlayer + ' wins!');
                    resetGame();
                } else if (moves === 9) {
                    alert('It\'s a draw!');
                    resetGame();
                } else {
                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                }
            }
        }

        function resetGame() {
            cells.forEach(cell => cell.textContent = '');
            currentPlayer = 'X';
            moves = 0;
        }
    </script>

Demo:

Demo

Power Apps Tic Tac Toe

👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (1)

Collapse
 
raddevus profile image
raddevus •

That’s a really nice little app and I especially like the use of the UML Sequence diagram to summarize what you’ve done. Very cool!

I also really like it that you’ve created an entire usable app to discover some interesting things and show others how they might do those things too.

That is exactly what my latest article here on dev.to is about. If you get a chance, would you mind taking a look at my article? I think you’ll like it and find a similar mindset in it. Software Developer, Are You Just A Hammer?

Again, great stuff. Thanks for taking your time to write this up.

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay