Javascript Объект для игры Tic Tac Toe
Полный новичок здесь на тему 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 ответа
Отдельно вы поменяете функцию из вашего объекта и просто избавитесь от объекта все вместе. Добавьте класс ко всем элементам 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));
});
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>Странно, я решил эту проблему с помощью кусочков кода Джереми Дейно, но мне пришлось это исправить. Учитывая 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 вызывается при каждом событии click на любом из них, и функция подкачки может быть вызвана без каких-либо аргументов, потому что ключевое слово THIS заставляет его пытаться изменить свойство.textContent любого объекта, к которому она вызывается?