使用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视频教程