使用JavaScript編寫井字遊戲的嘗試

Question

我正在嘗試透過JavaScript在我的棋盤上點擊一個方格來實現井字遊戲中的X和O。我必須為井字遊戲創建X或O。但是我不確定如何製作X或O。而且我需要它像實際的井字遊戲一樣具有功能性。

P粉021708275 · Answer

你必須對每個方塊進行迭代，因為querySelectorAll傳回多個節點，你不能直接在上面新增事件監聽器，因為addEventListener一次只能對一個節點運作。

我還在下面的程式碼片段中加入了一些CSS，這樣當你執行它時，你可以看到它的工作情況。在最終項目中忽略這個。

window.onload = () => {
    
    const squares = document.querySelectorAll(".square")

    let currentPlayer = "X";

    squares.forEach(square => {

        square.addEventListener("click", () => {
                
                if (square.innerHTML === "") {
                    square.innerHTML = currentPlayer;
                    currentPlayer = currentPlayer === "X" ? "O" : "X";
                }
    
            });
    });
};

document.querySelector('#reset-btn').addEventListener('click', () => {
    document.querySelectorAll('.square').forEach(square => {
        square.innerHTML = "";
    });
});

#board {
  margin: 0 auto;
  width: 50%;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.square {
  border: 1px solid black;
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  aspect-ratio: 1/1;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.square:hover {
  background-color: #CCCCCC;
}

編輯：我將上面的程式碼片段更改為點擊時交替，可以透過用當前玩家（X或O）初始化一個變量，並在點擊時使用簡單的三元語句進行交換來使用。我還為你的重置按鈕添加了功能！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學