كيفية إنشاء XO Game

في هذه السلسة ستنعرف عل كيفية إنشاء لعبة tic tac teo أو لعبة XO المعروفة التي نلعبها كلنا فقط بلغات HTML CSS JavaScript
أولا سننشىء HTML:
في البداية، يجب إنشاء لوحة اللعب باستخدام عناصر HTML div. يمكننا إنشاء 9 عناصر div داخل عنصر div واحد لتشكيل الشبكة التي ستستخدم لعبة Tec Tac Toe. يمكن استخدام الأنماط CSS لتصميم المربعات وتحديد الألوان والخطوط المناسبة.

HTML


<div class="board">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

وهنا مع تنسيقات لغة CSS:

CSS


.board {
    display: flex;
    width: 300px;
    height: 300px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 60px;
    font-weight: bold;
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

و الآ مع لغة JavaScript: ثم يجب إنشاء متغيرات داخل الكود البرمجي لتتبع الحالة الحالية للعبة. سنستخدم متغير currentPlayer لتتبع اللاعب الذي هو الآن على الدور ومصفوفة squares لتتبع حالة المربعات على لوحة اللعب.

JavaScript


const squares = document.querySelectorAll('.square');
let currentPlayer = 'X';

ثم يجب استدعاء الحدث click لتحريك اللاعبين. سيتم تعيين نص اللاعب الحالي على المربع الذي يتم النقر عليه. ثم سيتم فحص الفائز باستخدام دالة checkWin() وتشغيل اللعبة حتى يفوز أحد اللاعبين أو يتعادلوا.
ستكون النتيجة النهائية كالتالي:

JavaScript


const squares = document.querySelectorAll('.square');
let currentPlayer = 'X';

for (let i = 0; i < squares.length; i++) {
    squares[i].addEventListener('click', handleMove);
}

function handleMove(event) {
    const square = event.target;
    if (square.textContent !== '') {
        return;
    }
    square.textContent = currentPlayer;
    const winner = checkWin();
    if (winner) {
        alert(`${winner} wins!`);
    } else if ([...squares].every(square => square.textContent !== "")) {
        alert("It's a tie!");
    } else {
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
}

function checkWin() {
    const winningCombos = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [6, 4, 2],
        [0, 4, 8],
    ];
for (let i = 0; i < winningCombos.length; i++) {
    const [a, b, c] = winningCombos[i];
    if (squares[a].textContent === squares[b].textContent && squares[b].textContent === squares[c].textContent && squares[a].textContent !== '') {
        return squares[a].textContent;
        }
    }
    return null;
}

ستكون النتيجة هكذا يمكنك أخد الكود وتحسين اللعبة بشكل أفضل من ناحية البرمجة والتصميم :

وهكذا إنتهينا إذا أعجبكم الدرس أتمنى تدعومنا بمشاركته وشكرا لكم و وفقكم الله.