CodePen - Live Editor

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(241,224,221);
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}
h1 {
    font-size: 2rem
}
h1,h2 {
    margin-bottom: 4rem;
}
.game-container {
    width: 30rem;
    height: 35rem;
    display: grid;
    grid-template-columns: repeat(3 ,1fr);
    grid-template-rows: repeat(3 ,1fr);
    border: 1px solid black;
}
.block {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    background: #fafafa;
    user-select: none;
}
.block:hover {
    border: 1px solid rgb(179, 115, 115);
}
#error {
    font-size: 1.2rem;
    margin-top: 2rem;
    letter-spacing: 4px;
    color: red;
}
.yenile{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: aqua;
    color: white;
}

const blocks = document.querySelectorAll(".block");
const playerText = document.getElementById("player");
const errorText = document.getElementById("error");
let player = "X";
let gameOver = false;
let winner;

function startGame() {
    playerText.textContent = `${player}'in Sırası !`

blocks.forEach(block => block.addEventListener("click", () => chooseArea(block)))
}

function chooseArea(block) {
    if (block.textContent === "") {
        block.textContent = player;
        if (player === "O") {
            block.style.color = "red"
        }
        turnPlayer();
    }

checkWin();
    checkTie();

if (gameOver) {
        playerText.textContent = `Oyun Bitti, ${winner} Kazandı`;
        blocks.forEach(block => block.style.pointerEvents = 'none');
    }
}

}
}

function checkWin() {
    // win
    checkRows()
    checkColumns()
    checkDiagonals()
}

function checkTie() {
    // tie
    const values = [];
    blocks.forEach(block => values.push(block.textContent))
    if (!values.includes("")) {
        playerText.textContent = "Berabere !";
        blocks.forEach(block => block.style.pointerEvents = 'none');
    }
}

function checkRows() {
    // check rows
    let row1 = blocks[0].textContent == blocks[1].textContent &&
        blocks[0].textContent == blocks[2].textContent && blocks[0].textContent !== ""
    let row2 = blocks[3].textContent == blocks[4].textContent &&
        blocks[3].textContent == blocks[5].textContent && blocks[3].textContent !== ""
    let row3 = blocks[6].textContent == blocks[7].textContent &&
        blocks[6].textContent == blocks[8].textContent && blocks[6].textContent !== ""

if (row1 || row2 || row3) {
        gameOver = true
    }
    if (row1) return winner = blocks[0].textContent
    if (row2) return winner = blocks[3].textContent
    if (row3) return winner = blocks[6].textContent
}

function checkColumns() {
    // check cols
    let col1 = blocks[0].textContent == blocks[3].textContent &&
        blocks[0].textContent == blocks[6].textContent && blocks[0].textContent !== ""
    let col2 = blocks[1].textContent == blocks[4].textContent &&
        blocks[1].textContent == blocks[7].textContent && blocks[1].textContent !== ""
    let col3 = blocks[2].textContent == blocks[5].textContent &&
        blocks[2].textContent == blocks[8].textContent && blocks[2].textContent !== ""

if (col1 || col2 || col3) {
        gameOver = true
    }
    if (col1) return winner = blocks[0].textContent
    if (col2) return winner = blocks[1].textContent
    if (col3) return winner = blocks[2].textContent
}

function checkDiagonals() {
    // check diag
    let dia1 = blocks[0].textContent == blocks[4].textContent &&
        blocks[0].textContent == blocks[8].textContent && blocks[0].textContent !== ""
    let dia2 = blocks[2].textContent == blocks[4].textContent &&
        blocks[2].textContent == blocks[6].textContent && blocks[2].textContent !== ""

if (dia1 || dia2) {
        gameOver = true
    }
    if (dia1) return winner = blocks[0].textContent
    if (dia2) return winner = blocks[2].textContent
}

startGame();

function restart(){
    window.location.href = "index.html"
}

Görünüm