Question

我正在用HTMl CSS（SCSS）和JS制作一个tic tac toe游戏，我遇到了一些麻烦。我有一个函数来为每个网格空间添加一个X或O，但是它甚至在它具有正确的参数之前自动添加它们，但它正确地执行它（ish）。有人可以帮忙吗？

我也有here.

我的HTML：

    <div class="wrap">
      <div class="piece one"></div>
      <div class="piece two"></div>
      <div class="piece three"></div>
      <div class="piece four"></div>
      <div class="piece five"></div>
      <div class="piece six"></div>
      <div class="piece seven"></div>
      <div class="piece eight"></div>
      <div class="piece nine"></div>
    </div>

我的CSS：

    body {
      margin: 0;
      overflow: hidden;
    }

    .wrap {
      position: absolute;
      height: 500px;
      width: 510px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .piece {
      width: calc(500px / 3);
      height: calc(500px / 3);
      background: white;
      cursor: pointer;
    }

    .five, .two, .eight {
      border-left: 5px solid black;
      border-right: 5px solid black;
    }

    .one, .two, .three {
      border-bottom: 5px solid black;
    }

    .seven, .eight, .nine {
      border-top: 5px solid black;
    }

    .x {
      margin-left: 30px;
      margin-top: 20px;
      display: flex;
      .line {
        height: calc(400px / 3);
        width: 5px;
        background: black;
        &Two {
          transform: rotate(-45deg);
          margin-left: -5px;
        }
        &One {
         transform: rotate(45deg);
          margin-left: 50px;
        }
      }
    }

    .o {
      margin-left: 30px;
      margin-top: 20px;
      height: 100px;
      width: 100px;
      border-radius: 100%;
      border: 5px solid black;
    }

我的JS：

    let x = true,
      o = false,
      AI = false,
      easy = true,
      med = false,
      hard = false;
    const one = document.querySelector(".one"),
      two = document.querySelector(".two"),
      three = document.querySelector(".three"),
      four = document.querySelector(".four"),
      five = document.querySelector(".five"),
      six = document.querySelector(".six"),
      seven = document.querySelector(".seven"),
      eight = document.querySelector(".eight"),
      nine = document.querySelector(".nine"),
      X /* The diference between this X and the other x is that this one         is capitalized, same w/ the O and o */ = "<div class='x'><div class='lineOne line'></div><div class='lineTwo line'></div></div>",
      O = "<div class='o'></div>";

    one.addEventListener("click", function() {
      console.log("goodness happened")
    })

    const tic = function(square) {
      console.log("test 1 success");
      if (x === true) {
        square.innerHTML = X;
        x = false;
        o = true;
      }
      else {
        square.innerHTML = O;
        x = true;
        o = false;
      }
    }

    one.addEventListener("click", tic(one), false)
    two.addEventListener("click", tic(two), false)
    three.addEventListener("click", tic(three), false)
    four.addEventListener("click", tic(four), false)
    five.addEventListener("click", tic(five), false)
    six.addEventListener("click", tic(six), false)
    seven.addEventListener("click", tic(seven), false)
    eight.addEventListener("click", tic(eight), false)
    nine.addEventListener("click", tic(nine), false)

对不起，这很多。我只想给你全面的了解。提前谢谢！

Answer 1

您正在调用该函数而不是引用它，更改所有事件处理程序以使用匿名函数

UIPanGestureRecognizer

在可用参数之前运行的函数

1 个答案: