Tic Tac Toe : HTML scripting

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

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>

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:

Power Apps Tic Tac Toe

Comments

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