JavaScript: невозможно остановить запуск функции [Tic-Tac-Toe Game] - PullRequest
Новая
       9

JavaScript: невозможно остановить запуск функции [Tic-Tac-Toe Game]

0 голосов
/ 05 мая 2018

Мой код предназначен для игры в крестики-нолики. Это работает довольно хорошо: игроки могут делать свои ходы, и программа предупреждает: «Игрок Х выиграл!» когда игра окончена Но я просто не могу ни реализовать код прорисовки игры, ни сделать так, чтобы основная функция, называемая game (), перестала работать, как только игрок выиграл игру.

Я новичок в программировании, и я боролся с этим вопросом: как мне остановить запуск функции в JavaScript? Я должен признать, что я в некотором роде потерян, и я был бы признателен за любую помощь.

Код, который следует за: 

//TIC-TAC-TOE

let tl = $('.tl');
let tm = $('.tm');
let tr = $('.tr');
let ml = $('.ml');
let mm = $('.mm');
let mr = $('.mr');
let bl = $('.bl');
let bm = $('.bm');
let br = $('.br');

var tabuleiro = {
  'tl': tl,
  'tm': tm,
  'tr': tr,
  'ml': ml,
  'mm': mm,
  'mr': mr,
  'bl': bl,
  'bm': bm,
  'br': br
};

function game() {
  var turno = true;
  for (let casa in tabuleiro) {
    tabuleiro[casa].on("click", function() {
      if (tabuleiro[casa].is(':empty')) {
        if (turno == true) {
          tabuleiro[casa].append("<img class='cross' src='cross.svg'></img>");
          tabuleiro[casa].addClass("x");
          turno = false;
        } else {
          tabuleiro[casa].append("<img class='circle' src='circle.svg'></img>");
          tabuleiro[casa].addClass("o");
          turno = true;
        }
      }
      ganhou();
    });
  }
}

function ganhou() {
  if (tl.hasClass('x') && tm.hasClass('x') && tr.hasClass('x') ||
    ml.hasClass('x') && mm.hasClass('x') && mr.hasClass('x') ||
    bl.hasClass('x') && bm.hasClass('x') && br.hasClass('x') ||
    tl.hasClass('x') && ml.hasClass('x') && bl.hasClass('x') ||
    tm.hasClass('x') && mm.hasClass('x') && bm.hasClass('x') ||
    tr.hasClass('x') && mr.hasClass('x') && br.hasClass('x') ||
    tl.hasClass('x') && mm.hasClass('x') && br.hasClass('x') ||
    tr.hasClass('x') && mm.hasClass('x') && bl.hasClass('x')) {
    alert("Jogador 1 Venceu!");
  } else if (tl.hasClass('o') && tm.hasClass('o') && tr.hasClass('o') ||
    ml.hasClass('o') && mm.hasClass('o') && mr.hasClass('o') ||
    bl.hasClass('o') && bm.hasClass('o') && br.hasClass('o') ||
    tl.hasClass('o') && ml.hasClass('o') && bl.hasClass('o') ||
    tm.hasClass('o') && mm.hasClass('o') && bm.hasClass('o') ||
    tr.hasClass('o') && mr.hasClass('o') && br.hasClass('o') ||
    tl.hasClass('o') && mm.hasClass('o') && br.hasClass('o') ||
    tr.hasClass('o') && mm.hasClass('o') && bl.hasClass('o')) {
    alert("Jogador 2 Venceu!");
  }
}

game();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Есть несколько вещей, которые следует учитывать.

Во-первых, это тот случай, когда не осталось ходов.

Для этого после нажатия на пробел выполните проверку каждого пробела и, если все заняты, то предупредите пользователя. Это было бы очень наивным решением, и вы можете оптимизировать его по своему усмотрению (возможно, отслеживать количество ходов, а если количество ходов равно 9, то это ничья.

Также, когда игра закончится, вы можете захотеть установить переменную playing = false или что-то в этом роде. Затем по клику вы можете проверить эту переменную. Если это неверно, просто вернитесь. Таким образом, когда игра заканчивается, вы больше не можете играть.

Есть много способов реализации этих вещей, это всего лишь предложения для решения проблем, которые у вас возникают.

0 голосов
/ 05 мая 2018

Вы можете использовать его при условии, что вы выиграете, поэтому, если вы используете оператор if, вы делаете If (what you're testing for) { return; }

Это просто завершит функцию.

...