网格不允许被点击两次

Question

我有一个名为“gridbox”的网格，不应允许第二次单击项目“box1”。这是我的 Tik Tak Toe 游戏。

在函数 check() 中，它应该防止框被第二次点击。

<section class="gridbox">
    <div class="box1" onclick="check()"></div>
</section>

Answer 1

欢迎来到 Stack Overflow！

如果没有你的其余代码，我不知道你是如何在井字棋盘上存储每个单元格的状态的，所以我用一个数组来表示它。

我们将创建一个名为

boardState

的变量来表示板上每个单元格的 X、O 状态：

// board state will contain the current state of each cell
// of the tic tac toe board. '','X', 'O', where '' indicates
// an empty cell
//
// This line is basically creating an array of 9 elements (one for each cell)
// and setting each to ''.
var boardState = Array(9).fill('')

你的

check

函数看起来像这样：

// our check function will check whether or not the cell can have the marker placed
function check(target, i) {
    if (boardState[i] === '') { // if the cell is empty
        boardState[i] = currentTurn // update boardState
        target.innerHTML = currentTurn // fill <div> with value

        // switch to other person's turn
        if (currentTurn === 'X') {
            currentTurn = 'O'
        } else {
            currentTurn = 'X'
        }
    }
}

这个函数有两个参数，

• target

  ：被点击的元素

• i

  ：被点击的单元格索引

现在，当在您的

check

事件上调用

onclick

函数时，您可以传递每个的目标和索引，板上的每个div 都有一个递增的索引。我在这里创建了 3 个 div 来展示我在说什么：

<section class="gridbox">
    <div class="box1" onclick="check(this, 0)"></div>
    <div class="box1" onclick="check(this, 1)"></div>
    <div class="box1" onclick="check(this, 2)"></div>
</section>

现在，当您单击 div 时，只有当它已经为空时，它才会填充该值 - 否则，什么也不会发生。

这是获取 3 个盒子的基本工作示例的完整代码：

<style>
    div.box1 {
        width: 100px;
        height: 100px;
        border: solid 1px black;

        /* This part is to center the text */
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<script>
    // board state will contain the current state of each cell
    // of the tic tac toe board. '','X', 'O', where '' indicates
    // an empty cell
    //
    // This line is basically creating an array of 9 elements (one for each cell)
    // and setting each to ''.
    var boardState = Array(9).fill('')

    var currentTurn = 'X'

    // our check function will check whether or not the cell can have the marker placed
    function check(target, i) {
        if (boardState[i] === '') { // if the cell is empty
            boardState[i] = currentTurn
            target.innerHTML = currentTurn

            if (currentTurn === 'X') {
                currentTurn = 'O'
            } else {
                currentTurn = 'X'
            }
        }
    }
</script>

<section class="gridbox">
    <div class="box1" onclick="check(this, 0)"></div>
    <div class="box1" onclick="check(this, 1)"></div>
    <div class="box1" onclick="check(this, 2)"></div>
</section>

Answer 2

与框是否可以被点击无关，更多的是如果一个框被点击多次则什么都不会发生。如果您使用类，您可以检查按钮是否具有“活动”类（例如），以及它是否没有向其添加“活动”类。如果代码 does 有一个活动类什么都不会发生。

在这个例子中，我只是在单击时向框添加背景颜色。但是你可以用它来实现你的 TTT 逻辑。

// Grab the grid
const grid = document.querySelector('.grid');

// Attach an event listener to it.
// This allows us to use event delegation to catch
// events from its children as they "bubble up" the DOM
grid.addEventListener('click', handleClick);

function handleClick(e) {

  const el = e.target;

  // If it's an element with a box class
  if (el.matches('.box')) {
    
    // If the element doesn't have an active class add one
    // otherwise do nothing
    if (!el.classList.contains('active')) {
      el.classList.add('active');
    }

  }

}

.grid { display: grid; grid-template-columns: 1fr 50px; width: 102px; gap: 2px; }
.box { width: 50px; aspect-ratio: 1; background-color: #efefef; border: 1px solid #666; }
.box:hover:not(.active) { cursor: pointer; background-color: lightblue; }
.active { background-color: lightskyblue; }

<section class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</section>

附加文件

• classList

• matches

• 活动代表团