JavaScript：无法阻止函数运行 [井字游戏]答案

【问题标题】：JavaScript : Can't stop a function from running [Tic-Tac-Toe Game]JavaScript：无法阻止函数运行 [井字游戏]
【发布时间】：2018-05-04 22:46:54
【问题描述】：

我的代码旨在成为井字游戏。它工作得很好：玩家可以移动，程序会提示“玩家 X 赢了！”当游戏结束时。但是我无法实现游戏绘制代码，也无法让名为 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();

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

欢迎来到 Stack Overflow！寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.
“但我无法实现游戏绘制代码，也无法让名为 game() 的主函数在玩家赢得游戏后停止运行。” “无法实现绘制代码”是什么意思？它不画吗？因为这听起来不像你问题的其余部分所暗示的。从您的代码的外观来看，您的问题是游戏结束后您仍然可以单击框吗？这是你要禁用的吗？
哦，我的意思是玩家可以赢得比赛，但是当棋盘被填满并且没有获胜者时，根本没有任何动作（我想显示一些消息，例如“游戏抽奖”）。
你不能在 else if 块之后添加一个 else 来提醒抽奖消息吗？顺便说一句，“游戏”功能只运行一次。
@Luple 是的，确实如此。

标签： javascript jquery function tic-tac-toe

【解决方案1】：

你可以在你获胜的条件下使用它，所以如果你使用if语句，你就使用If (what you're testing for) { return; }

这只会终止函数。

【讨论】：

【解决方案2】：

有几点需要考虑。

首先是没有动作的情况。

为此，点击一个空间后，对每个空间进行检查，如果都被占用，然后提醒用户。这将是一个非常幼稚的解决方案，您可以根据需要对其进行优化（可能跟踪移动次数，如果移动次数为 9，则为平局。

此外，当游戏结束时，您可能需要考虑设置变量playing = false 或类似的东西。然后点击你可以检查这个变量。如果它是假的，那么就返回。这样游戏结束后你就不能再玩了。

有很多方法可以实现这些东西，它们只是解决您遇到的问题的建议。

【讨论】：