Skip to main content

Membership is free!

Tic-Tac-Toe Game

Tic-Tac-Toe

The code the created this is below:

<script>
let currentPlayer = 'X';
let gameActive = true;
let gameState = ["", "", "", "", "", "", "", "", ""];

function makeMove(cell, index) {
    if (gameState[index] !== "" || !gameActive) {
        return;
    }
    gameState[index] = currentPlayer;
    cell.innerHTML = currentPlayer;
    checkResult();
}

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

    let roundWon = false;
    for (let i = 0; i < winConditions.length; i++) {
        const winCondition = winConditions[i];
        let a = gameState[winCondition[0]];
        let b = gameState[winCondition[1]];
        let c = gameState[winCondition[2]];
        if (a === '' || b === '' || c === '') {
            continue;
        }
        if (a === b && b === c) {
            roundWon = true;
            break;
        }
    }

    if (roundWon) {
        alert(`${currentPlayer} wins!`);
        gameActive = false;
        return;
    }

    let roundDraw = !gameState.includes("");
    if (roundDraw) {
        alert("Draw!");
        gameActive = false;
        return;
    }

    currentPlayer = currentPlayer === "X" ? "O" : "X";
}

function restartGame() {
    gameState = ["", "", "", "", "", "", "", "", ""];
    gameActive = true;
    currentPlayer = "X";
    document.querySelectorAll('#tic-tac-toe-board button').forEach(button => button.innerHTML = "");
}
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe Game</title>
<div class="uk-container">
<h1 class="uk-heading-line uk-text-center"><span>Tic-Tac-Toe</span></h1>
<div id="tic-tac-toe-board" class="uk-grid-small uk-child-width-1-3@s uk-text-center" uk-grid="">
<div><button class="uk-button uk-button-default" onclick="makeMove(this,0)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,1)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,2)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,3)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,4)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,5)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,6)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,7)"> &nbsp;</button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,8)"> &nbsp;</button></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit-icons.min.js"></script>
<script>
// JavaScript for game logic will go here
</script>