Объявление победителя в крестики-нолики не уверен, что пошло не так

0

Я пишу HTML/Javascript игру tic-tac-toe, которая использует перетаскивание. В основном игрок перетаскивает изображение x или o на плату, а код, который я сейчас должен проверить и объявить победителем, просто не работает.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.square {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaa;
float: left;
}

</style>

<script type="text/javascript">

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
        helper:clone;
    }

    function drop(ev) {
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data).cloneNode(true));
        ev.preventDefault();
    }

    var cell1 = null;
    var cell2 = null;
    var cell3 = null;
    var cell4 = null;
    var cell5 = null;
    var cell6 = null;
    var cell7 = null;
    var cell8 = null;
    var cell9 = null;

function onDrop(event) {
var id = event.target.id;
if (player1) {
  cell = 'o';
} else {
  cell = 'x';
}
checkForWinner();
}

function checkForWinner() {
if (cell1 === 'o' && cell2 === 'o' && cell3 === 'o') {
 return player1;
} else if (cell1 === 'x' && cell2 === 'x' && cell3 === 'x') {
 return player2;
} else if (cell4 === 'O' && cell5 === 'O' && cell6 === 'O') {
 return player1;
} else if (cell4 === 'x' && cell5 === 'x' && cell6 === 'x') {
 return player2;
} else if (cell7 === 'o' && cell8 === 'o' && cell9 === 'o') {
 return player1;
} else if (cell7 === 'x' && cell8 === 'x' && cell9 === 'x') {
 return player2;
} else if (cell1 === 'o' && cell4 === 'o' && cell7 === 'o') {
 return player1;
} else if (cell1 === 'x' && cell4 === 'x' && cell7 === 'x') {
 return player2;
} else if (cell2 === 'o' && cell5 === 'o' && cell8 === 'o') {
 return player1;
} else if (cell2 === 'x' && cell5 === 'x' && cell8 === 'x') {
 return player2;
} else if (cell3 === 'o' && cell6 === 'o' && cell9 === 'o') {
 return player1;
} else if (cell3 === 'x' && cell6 === 'x' && cell9 === 'x') {
 return player2;
} else if (cell1 === 'o' && cell5 === 'o' && cell9 === 'o') {
 return player1;
} else if (cell1 === 'x' && cell5 === 'x' && cell9 === 'x') {
 return player2;
} else if (cell3 === 'o' && cell5 === 'o' && cell7 === 'o') {
 return player1;
} else if (cell3 === 'x' && cell5 === 'x' && cell7 === 'x') {
 return player2;
}
}

</script>

<title>JavaScript  Drag &amp; Drop Tic-Tac-Toe</title>
</head>

<body>
<p>Drag the X and O images into the tic-tac-toe board:</p>
<table border="0">
    <tr>
        <td id="cell1" class="square" ondrop="drop(event)"    ondragover="allowDrop(event)"></td>
        <td id="cell2" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell3" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td id="cell4" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell5" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell6" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td id="cell7" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell8" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell9" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
</table>

<img id="drag1" src="X.png" ondragstart="drag(event)" width="75" height="75"/>
<img id="drag2" src="O.png" draggable="true" ondragstart="drag(event)" width="75" height="75"/> 

</body>
</html>
  • 0
    получить какой-либо вывод в консоли?
  • 0
    Когда я загружаю страницу, она просто показывает сетку 3х3 и изображение X и O, которое раньше можно было перетаскивать, но больше нет. i.imgur.com/pDk4fmY.png
Показать ещё 1 комментарий
Теги:

2 ответа

0

у вас отсутствует закрывающая фигурная скобка } в конце функции checkForWinner(), которая специально предназначена для закрытия вашего последнего, если условие

 function checkForWinner() {
   if (cell1 === 'o' && cell2 === 'o' && cell3 === 'o') {
     return player1;
   /* ... */
   } else if (cell3 === 'x' && cell5 === 'x' && cell7 === 'x') {
     return player2;

   // vvv HERE vvv
   }

}

также функция checkForWinner() вызывает checkForWinner() которая на самом деле ничего не делает...

если вы изменили player1 и player2 на строку, например "player1"/"player2" вы могли бы попытаться сделать что-то вроде

function onDrop(event) {
    var id = event.target.id;
    if (player1) {
      cell = 'o';
    } else {
      cell = 'x';
    }
    if ( checkForWinner() === "player1" ) { alert("Player 1 Wins");}
    else if ( checkForWinnder() === "player2") { alert("Player 2 Wins"); }
}

но это все зависит от вас

Поделиться
  • 0
    Я не уверен, что вижу, где мне это не хватает. У меня есть один после каждого возврата, нет?
  • 0
    Благодарю. Это исправило мое перетаскивание, но не исправило, почему мое объявление победителя не работает
Показать ещё 4 комментария
0

Похоже, что вы не определили player1 и player2. Если вы нажмете F12 в своем браузере, вы должны получить сообщение об ошибке.

Попробуйте поместить эти две строки в начало вашей функции checkForWinner():

var player1 = 'player1';
var player2 = 'player2';

Затем вы должны проверить вывод этой функции, чтобы определить победителя, так что у вас есть checkForWinner(); в вашей функции onDrop(), попробуйте следующее:

var winner = checkForWinner();
if(winner == 'player1' || winner == 'player2')
    alert(winner+' won!');

ondragstart и ondrop не распознавали ваши определения функций, поэтому я сделал их глобальными, определяя их на объекте window а также не имел функции вспомогательного clone, поэтому я сделал пустой. Вот рабочий пример:

http://jsfiddle.net/9me7n/1/

Причина, по которой предупреждение не появляется, заключается в том, что вы просто установите все ячейки равными null. Вам нужно установить правильное значение ячейки x или o в вашей функции onDrop а затем оно должно работать безупречно, если у вас достаточно операторов if для всех возможных движений игры.

Поделиться
  • 0
    Как мне их определить?
  • 0
    @ user2923395 обновил ответ с инструкциями
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню