HTML制作网格游戏的问题

大家好，最近在学习html，但目前遇到困难。题目要求是制作一个9宫格的游戏，当玩家点击时，会提示玩家一或者玩家二点击了。
然后格子会不变化。比如更改颜色。
然后玩家不能回去点之前的格子，也就是一旦点击了对应的格子颜色就不会变了。
最后是当所有格子都点完后，提示9格子已经点完了。
我现在已经做完第一布了，但是对如何让玩家无法点之前的格子遇到了困难。我该怎么办？
这是我目前的代码。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="script.js"></script>
  Click game
  <br>
  Player Round:
 <div id=playerPrompt>
  Player1
  </div>
<div class=gameboard>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
    <div onclick="boxClicked(this);"></div>
</div>
</body>
</html>

这是css，

html {
  height: 100%;
  width: 100%;
}
div.gameboard{
  border:1px solid black;
  background-color:#19b3e6;
  padding: 30px;
  font-size: 40px;
}

div.gameboard > div {
  width:3em;
  height:3em;
  display:inline-block;
  padding: 30px;
  margin:.2em;
  border:1px solid #0d0d0d;
}
.player1{
  background-color: #ffff80;
}
.player2{
  background-color: #ff4d4d;
}

这是style

let currentPlayer = 1;
let promptDiv= document.getElementById("playerPrompt");
function boxClicked(box) {
  if (currentPlayer%2 == 1) {
    currentPlayer = 2;
    box.classList.add("player1");
    document.getElementById('playerPrompt').innerHTML = 'player1'
  }
  else {
    currentPlayer = 1;
    box.classList.add("player2");
    document.getElementById('playerPrompt').innerHTML = 'player2'
  }
}

无法点击之前的格子你可以用两种方案实现

你在最上面声明个全局变量事一个数组。每当点击变色是把当前点击格子的信息 push 进去。然后每回点击之前做个比较（循环比较）。
点击格子变色，一般都会用style 或者 class来实现。那你获取到点击格子的dom 判断一下是不是有对应的属性，你现在是用类名实现的。那就判断类名或者背景色。

总结：我建议还是用第一种方案，但是有个缺陷就是一刷新就没了

希望对你有帮助https://www.jb51.net/article/243148.htm

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7531301


function boxClicked(box) {
                if(box.classList.length>0){
                    return;
                }
                if (currentPlayer % 2 == 1) {
                    currentPlayer = 2;
                    box.classList.add("player1");
                    document.getElementById('playerPrompt').innerHTML = 'player1'
                } else {
                    currentPlayer = 1;
                    box.classList.add("player2");
                    document.getElementById('playerPrompt').innerHTML = 'player2'
                }
            }