Question

在Javascript主题上，在此处填写新手。我正在尝试使用Tic Tac Toe游戏编写代码，同时使用JS'Objects节省代码空间。我以为我可以创建一个JS对象，该对象将在HTML代码中定义的所有9个字段的ID为“ 1”到“ 9”作为值，然后还有一个自定义方法，可用于按以下方式交换值的textContent：

var fields = {
    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'),
    swap: function(element) {
        if (this.element.textContent === "") {
            this.element.textContent = "X";
        } else if (this.element.textContent === "X") {
            this.element.textContent = "O";
        } else {
            this.element.textContent = "";
        }
    }
}

然后，我想我会像这样添加一堆addEventListeners：

fields['one'].addEventListener('click', fields.swap(fields['one']));

问题是，我可能会完全像在Python中那样对待这个概念，并且可能在这里弄乱了语法。谁能给我一些我在哪里出错的想法？

上面复制的代码目前无法正常工作。

它可以使用的HTML如下（为了节省空间，这里省略了格式化）：

<body>
  <div class="container">
    <table id="gameboard">
      <tr class="row">
      <td id="one" class="gameField">X</td>
      <td id="two" class="gameField">X</td>
      <td id="three" class="gameField">X</td>
    </tr>
    <tr class="row">
      <td id="four" class="gameField">X</td>
      <td id="five" class="gameField">X</td>
      <td id="six" class="gameField">X</td>
    </tr>
    <tr class="row">
      <td id="seven" class="gameField">X</td>
      <td id="eight" class="gameField">X</td>
      <td id="nine" class="gameField">X</td>
    </tr>
  </table>
</div>

Answer 1

将您的功能交换从对象中分离出来，然后一起摆脱对象。向要向其中添加EventListener的所有HTMLElement添加 class ，然后使用以下命令对所有HTMLElement进行查询：

<div id="one" class="your-class"></div>
<div id="two" class="your-class"></div>

function swap(element) {
   if (element.textContent === ""){
      element.textContent = "X";
    }else if (element.textContent === "X") {
      element.textContent = "O";
    }else {
      element.textContent = "";
    }
}

document.querySelectorAll('.your-class').forEach(function (element) {
   element.addEventListener('click', swap(element));
});

Answer 2

井字游戏！

只需添加样式即可，对不起，这很有趣。

//
const board = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3]
];
var vm = new Vue({
  el: '#app',
  data() {
    return {
      plays: 0,
      player: true,
      winner: '',
      board: JSON.parse(JSON.stringify(board))
    }
  },
  methods: {
    resetGame() {
      this.plays = 0
      this.winner = ''
      this.board = JSON.parse(JSON.stringify(board))
    },
    isBool(value) {
      return typeof(value) === typeof(true)
    },
    play(x, y) {
      if (!this.isBool(this.board[x][y]) && this.winner === '') {
        this.board[x][y] = this.player
        this.plays++
        this.checkWin(this.player)
        this.player = !this.player
      }
    },
    slot(x, y) {
      return {
        'fa-circle-o': this.isBool(this.board[x][y]) && this.board[x][y] === true,
        'fa-times': this.isBool(this.board[x][y]) && this.board[x][y] === false
      }
    },
    endGame(player) {
      this.winner = player
    },
    checkWin(player) {
      // check horizontal win
      for (var i = 0; i <= 2; i++) {
        if (this.board[i][0] === player &&
          this.board[i][1] === player &&
          this.board[i][2] === player) {
          this.endGame(player);
        }
      }
      // check vertical win
      for (var i = 0; i <= 2; i++) {
        if (this.board[0][i] === player &&
          this.board[1][i] === player &&
          this.board[2][i] === player) {
          this.endGame(player);
        }
      }
      // check diagonal win
      if ((this.board[0][0] === player &&
          this.board[1][1] === player &&
          this.board[2][2] === player) ||
          this.board[0][2] === player &&
          this.board[1][1] === player &&
          this.board[2][0] === player) {
          this.endGame(player);
      }
      if (this.plays === 9) {
        this.endGame(-1);
      }
    }
  }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>
<style>
  table tr td {
    min-width: 20px;
    min-height: 20px;
    padding: 3px;
    text-align: center;
  }
</style>
<div id="app">

  <h3>Tic-Tac-Vue</h3>

  <p>It's player <i :class="['fa', {'fa-circle-o': player, 'fa-times': !player}]"></i>'s go!</p>

  <table border="1">
    <tr>
      <td @click="play(0,0)"><i :class="['fa', slot(0,0)]"></i></td>
      <td @click="play(0,1)"><i :class="['fa', slot(0,1)]"></i></td>
      <td @click="play(0,2)"><i :class="['fa', slot(0,2)]"></i></td>
    </tr>
    <tr>
      <td @click="play(1,0)"><i :class="['fa', slot(1,0)]"></i></td>
      <td @click="play(1,1)"><i :class="['fa', slot(1,1)]"></i></td>
      <td @click="play(1,2)"><i :class="['fa', slot(1,2)]"></i></td>
    </tr>
    <tr>
      <td @click="play(2,0)"><i :class="['fa', slot(2,0)]"></i></td>
      <td @click="play(2,1)"><i :class="['fa', slot(2,1)]"></i></td>
      <td @click="play(2,2)"><i :class="['fa', slot(2,2)]"></i></td>
    </tr>
  </table>

  <p v-if="winner === true || winner === false">Player <i :class="['fa', {'fa-circle-o': !player, 'fa-times': player}]"></i> is the winner!!</p>
  <p v-if="winner === -1">Game Over, Draw!!</p>
  <button @click="resetGame()">Reset Game</button>
</div>

Answer 3

非常有趣的是，我用杰里米·德伊诺（Jeremy Dejno）的代码解决了这个问题，但必须对其进行调整。考虑到我在第一篇文章中发布的HTML代码，这对我有用：

function swap(){
    if (this.textContent === ""){
      this.textContent = "X";
    }else if (this.textContent === "X") {
      this.textContent = "O";
    }else {
      this.textContent = "";
    }
  }

document.querySelectorAll('.gameField').forEach(function(element){
    element.addEventListener('click',swap);
  })

由于这对我来说是一个全新的事物（我来自Python背景），有人可以告诉我是否正确理解这一点：在对每个带有.gameField类的项调用.addEventListener之后，将调用交换函数

>其中的任何一个单击事件，都可以在不使用任何参数的情况下调用swap函数，因为THIS关键字使其尝试修改调用它的任何对象的.textContent属性？

井字游戏的Javascript对象

3 个答案:

井字游戏！