Tic TAC toe with Nine squares making a square,with cake color background,with achievements 🏆 and no bugs's game

Click here for free DL of the app version that can save data.

No:50960

←

Prev Next

→

Tic TAC toe with Nine squares making a square,with..ALL
Developer User21444｜Date and time 24/3/10 11:02:34
Build time 7.462 sec｜Game capacity 2.235KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: #ffd1dc; /* cake color background */
        font-size: 30px;
        text-align: center;
    }
    .square {
        width: 100px;
        height: 100px;
        display: inline-block;
        margin: 5px;
        background-color: white;
        cursor: pointer;
    }
</style>
</head>
<body>
<script>
    var currentPlayer = "X";
    var board = ["", "", "",
                 "", "", "",
                 "", "", ""];

function checkWin() {
        var winCombos = [[0, 1, 2], [3, 4, 5], [6, 7, 8],
                         [0, 3, 6], [1, 4, 7], [2, 5, 8],
                         [0, 4, 8], [2, 4, 6]];

for (var i = 0; i < winCombos.length; i++) {
            var combo = winCombos[i];
            var pos1 = combo[0];
            var pos2 = combo[1];
            var pos3 = combo[2];

if (board[pos1] !== "" && board[pos1] === board[pos2] && board[pos1] === board[pos3]) {
                alert(currentPlayer + " wins!");
                resetBoard();
                break;
            }
        }
        
        if (!board.includes("")) {
            alert("It's a draw!");
            resetBoard();
        }
    }

function resetBoard() {
        board = ["", "", "",
                 "", "", "",
                 "", "", ""];
        currentPlayer = "X";
        renderBoard();
    }

function renderBoard() {
        var boardElement = document.getElementById("board");
        boardElement.innerHTML = "";
        
        for (var i = 0; i < 9; i++) {
            var square = document.createElement("div");
            square.className = "square";
            square.dataset.index = i;
            square.textContent = board[i];
            square.addEventListener("click", handleClick);
            boardElement.appendChild(square);
        }
    }

function handleClick(event) {
        var index = event.target.dataset.index;
        if (board[index] === "") {
            board[index] = currentPlayer;
            renderBoard();
            checkWin();
            currentPlayer = currentPlayer === "X" ? "O" : "X";
        }
    }

renderBoard();
</script>

</body>
</html>