סתם למען הספורט (ממ... וגם אולי מישהו ילמד משהו מזה) אכתוב דרך אחרת

הרעיון הוא שמכיון שיש לך 9 קוביות שלכל אחד מהם יש רק שני מצבים אפשריים, אפשר לייצג את ה-state של כל צד במשחק בתוך מספר אחד. כל ביט במספר מייצג קוביה אחת. אם הביט כבוי סימן שאין לו

גודל מספר ב-JS הוא 64 ביטים, אבל לצורך פעולות שאני הולך לעשות אפשר להשתמש רק ב-32 ביטים הראשונים, לצרכך היה מספיק משתנה בעל 16 ביטים, אבל אין את זה ב-JS, למען ה"שטיק" הייתי יכול להכניס את שני צדדי המשחק במספר אחד, אבל זה סתם מיותר

מהלך המשחק נראה כך:

const listWin = [
    7,  56, 448, 73,
  146, 292, 273, 84
];

function checkWin (board) {
  return listWin.some(win => (board & win) === win);
}

let user = 0;

function toggleUser () {
  user ^= 1;
};

const boards = [0, 0];
const userNames = ['X', 'O'];

function doTurn (i) {
  boards[user] |= (1 << i);
  if (checkWin(boards[user])) {
    console.log(`${userNames[user]} wins!`);
    // TODO: signal end of game
    return;
  }
  toggleUser();
}

בכל לחיצה אתה קורא doTurn עם מספר הקובייה שנבחרה

לא מיממשתי לוגיקה שבודק אם קובייה כבר מלאה, וכן לא מימשתי לוגיקה שיודע לצייר את הקוביות בהינתן שני מספרים שמייצגים את מצב המשחק

תהליך היצירה של listWin נראה ככה:

function makeWinList () {
  function pack ([x, y, z]) {
    return (1 << x) | (1 << y) | (1 << z);
  }
  
  return [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6]
  ].map(pack);
}

הפוסט הזה איך שכתבתי אותו לא שימושי למי שלא מכיר משחקי ביטים
אולי בהמשך אכתוב הסבר ממצה