Javascript Объект для игры Tic Tac Toe - PullRequest
Новая
       30

Javascript Объект для игры Tic Tac Toe

0 голосов
/ 28 августа 2018

Полный новичок здесь на тему Javascript. Я пытаюсь закодировать игру Tic Tac Toe, используя объекты JS для экономии места кода. Я подумал, что мог бы создать JS-объект, который будет содержать все 9 полей, определенных в коде HTML с идентификаторами «от одного» до «девяти» в качестве значений, а затем также иметь собственный метод, который можно использовать для замены значения 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>

Ответы [ 3 ]

0 голосов
/ 28 августа 2018

Странно, я решил эту проблему с помощью кусочков кода Джереми Дейно, но пришлось его настроить. Учитывая 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), может кто-нибудь сказать мне, правильно ли я это понимаю: после вызова .addEventListener для каждого элемента с классом .gameField вызывается функция подкачки каждое событие щелчка на любом из них, и функция swap может вызываться без каких-либо аргументов, потому что ключевое слово THIS заставляет его пытаться изменить свойство .textContent любого объекта, к которому она вызывается?

0 голосов
/ 28 августа 2018

Tic-Tac-Вью!

Просто добавьте стили, извините, увлекся, может быть, это представляет какой-то интерес. 

//
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>
0 голосов
/ 28 августа 2018

Отделите вашу функцию обмена от вашего объекта и просто избавьтесь от объекта все вместе. Добавьте class ко всем элементам HTMLE, к которым вы хотите добавить EventListener, а затем запросите их все с помощью следующего: 

<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));
});
...