Question

我正在制作一个井字棋盘，我希望用户能够单击棋盘上的九个框之一。我实现了一个for loop来遍历每个div，并允许用户点击每个div。

选择框后，计算机将移动。

用户选择框后，如何停止循环？预先谢谢你

//initial variables
let box = document.querySelectorAll(".box");
let letter = document.querySelector('.letter');
let turn = 0;
//START GAME
let userXorO = function() { //function to determine whose x and o

  let X = 1;
  let O = 2;
  
  let random = Math.floor(Math.random() * 2) + 1; //randomizes between x and o
  
      if (random == X) { 
        return 'X'
      }

      if (random == O) {
        return 'O'
      }
    
    return random; //returns random number to function
  }

//PLAYER ONE INITIAL TURN
function turn_one() {


  for (let i = 0; i < box.length; i++) {
    if (turn === 0) {
      box[i].addEventListener("click", function(e) {
        box[i].textContent = userXorO(); //draws first user X or O 
        turn ++;
      });
      
    }
  }
}

turn_one();

.game-board {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  background-color: #34495e;
  color: #fff;
  border: 6px solid #2c3e50;
  border-radius: 10px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.box {
  border: 6px solid #2c3e50;
  border-radius: 2px;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player_one {
  background-color: red;
}

<div class="game-board">
  <div id="1" class="box"><span id="1" class="letter"></span></div>
  <div id="2" class="box"><span id="2" class="letter"></span></div>
  <div class="box"><span id="3" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
</div>

Answer 1

您可能会发现，如果您只添加一个侦听器，则可能会发现逻辑更容易遵循容器（称为事件委托），并使用[user@pc ~]$ myApp.pl "import" is not exported by the Exporter module at /###/lib/perl/Testing/Secret.pm line 6 Can't continue after import errors at /###/lib/perl/Testing/Secret.pm line 6 BEGIN failed--compilation aborted at /###/lib/perl/Testing/Secret.pm line 6. Compilation failed in require at /###/lib/perl/Testing/MyLib.pm line 6. BEGIN failed--compilation aborted at /###/lib/perl/Testing/MyLib.pm line 6. Compilation failed in require at /###/bin/myApp.pl line 7. BEGIN failed--compilation aborted at /###/bin/myApp.pl line 7.之类的变量检查点击是否当前有效。（当然，如果计算机立即转弯，则无需进行isHumanTurn检查。）

还要注意，同一文档中的重复ID是无效的HTML -最好将其删除。（要检查其容器中单击的isHumanTurn的索引，可以在div s的数组上使用indexOf）

另一个问题是，您应该在游戏开始时构造随机div或X ，而不是每次点击时都构造一次，否则不会保持一致

例如：

const humanTile = ['X', 'O'][Math.floor(Math.random() * 2)];

let isHumanTurn = true;
function handleClick({ target }) {
  if (!target.matches('.box')) return;
  if (!isHumanTurn) return console.log('It is not your turn!');
  target.textContent = humanTile; //draws first user X or O
  isHumanTurn = false;
  console.log('insert function call for computer to take its turn...');
}
document.querySelector('.game-board').addEventListener('click', handleClick);

.game-board {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  background-color: #34495e;
  color: #fff;
  border: 6px solid #2c3e50;
  border-radius: 10px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.box {
  border: 6px solid #2c3e50;
  border-radius: 2px;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player_one {
  background-color: red;
}

单击第一个事件侦听器后退出for循环

1 个答案: