HTML井字游戏获胜者公告答案

【问题标题】：HTML Tic-Tac-Toe Game Winner AnnouncementHTML井字游戏获胜者公告
【发布时间】：2016-03-01 04:55:25
【问题描述】：

我应该首先说我对此非常陌生（不仅仅是堆栈溢出，还有任何一般的编码）。我现在正在参加一个非常基础的入门课程，我们的一项任务是在 HTML 框中创建一个井字游戏。

我专门搜索了这个问题的答案，但是我发现的任何东西对我来说都非常难以理解（注意：编写这段代码是我迄今为止所做过的最复杂的编码，所以这就是我的水平在）。

我了解为游戏创建空间（表格）并将按钮嵌入不同单元格以供玩家选择的动态。但是，为了获得额外奖励，他们为我们提供了让代码决定谁是获胜者的选择。任何关于从哪里开始的见解将不胜感激。

我什至不确定从哪里开始，但我想我需要编写另一个 javascript 代码才能添加到游戏中。到目前为止，这是我所拥有的（为了尽量减少这篇文章的长度，我只包含了一行）：

function RowOneBoxThreeYButton() {
  var x = document.getElementById("Initial_Choice_Row_One_Box_Three");
  x.innerHTML = "Y";
  x.style.color = "white";
}

function RowOneBoxThreeXButton() {
  var x = document.getElementById("Initial_Choice_Row_One_Box_Three");
  x.innerHTML = "X";
  x.style.color = "white";
}

function RowOneBoxTwoYButton() {
  var x = document.getElementById("Initial_Choice_Row_One_Box_Two");
  x.innerHTML = "Y";
  x.style.color = "white";
}

function RowOneBoxTwoXButton() {
  var x = document.getElementById("Initial_Choice_Row_One_Box_Two");
  x.innerHTML = "X";
  x.style.color = "white";
}

function RowOneBoxOneYButton() {
  var x = document.getElementById("Initial_Choice_Row_One_Box_One");
  x.innerHTML = "Y";
  x.style.color = "white";
}

function RowOneBoxOneXButton() {
  var x = document.getElementById("Initial_Choice_Row_One_Box_One");
  x.innerHTML = "X";
  x.style.color = "white";
}

<html>

<body>
  <table style="width:100%; background-color:black" border="2">
    <tr>
      <td>
        <p id="Initial_Choice_Row_One_Box_One" style="color:white">Click a Button to Choose "X" or "Y"</p>

        <button onclick="RowOneBoxOneXButton()">Choose X</button>

        <button onclick="RowOneBoxOneYButton()">Choose Y</button>
      </td>


      <td>
        <p id="Initial_Choice_Row_One_Box_Two" style="color:white">Click a Button to Choose "X" or "Y"</p>

        <button onclick="RowOneBoxTwoXButton()">Choose X</button>

        <button onclick="RowOneBoxTwoYButton()">Choose Y</button>
      </td>

      <td>
        <p id="Initial_Choice_Row_One_Box_Three" style="color:white">Click a Button to Choose "X" or "Y"</p>

        <button onclick="RowOneBoxThreeXButton()">Choose X</button>


        <button onclick="RowOneBoxThreeYButton()">Choose Y</button>
      </td>
    </tr>
</body>

</html>

非常感谢大家！对不起，如果我的格式错误/我没有足够努力或正确地搜索这个答案。很高兴在各个方面都得到改进（包括在这里格式化我的帖子！）。

【问题讨论】：

嗨，欢迎来到 Stack Overflow。看起来您的问题相当广泛，可能不适合当前格式的网站。如果您还没有，请考虑查看 Tour stackoverflow.com/tour 和/或帮助中心。 stackoverflow.com/help
赞这个jsfiddle.net/zG3pm/4

标签： javascript html tic-tac-toe

【解决方案1】：

编程中一个非常重要的概念是不要重复自己。你已经写了六次基本相同的函数。好的，有一些细微的差别，比如每次使用不同的元素 id，并显示“X”或“Y”。但是每个函数的流程本质上是一样的。

您想做的一件事是将所有这些重复合并到一个函数中，但使用变量使该函数的行为根据刚刚发生的情况而有所不同。您可以通过在函数调用中输入参数来做到这一点。在这种情况下，每个按钮单击都会向同一个函数发送不同的行号、框号和字母选择字符串。

请注意，行号和框号以零而不是一开头，即使您的 ID 的名称使用“一”作为第一个“数字”。习惯从 0 而不是 1 开始计数。在编码中经常发生这种情况。

使用传入的值每次选择不同的x，并每次显示不同的letter。

要检查是否有赢家，您首先需要有某种方式记住游戏中的所有值。一种方法是使用数组。我不知道你是否已经了解了数组，但这里有一个快速的教训：

var myArray = ["A", "B", "C", "D"];
alert(myArray[0]); // shows "A"
alert(myArray[2]); // shows "C"
myArray[2] = "blah blah";
alert(myArray[2]); // shows "blah blah";

每次有人单击按钮时，请记住他们在数组中的选择。这样他们就可以被检查了。现在，每次有人单击按钮时，检查所有数组值是否与最近选择的值相同。如果他们是，那么你就有了赢家，至少在这个一维版本的井字游戏中。当然，在完整的 3x3 游戏中它会稍微复杂一些，但大多数相同的概念都适用。

好吧，祝你编程好运...

var textNumbers = ["One", "Two", "Three"]; // this array allows you to recreate the id's using array positions
var choices = ["", "", ""]; // this is where the letter choices will be remembered

function makeMove(row, box, letter) { // this function is called every time any button
                                     // with this 'onclick' handler is clicked
                                     // it will be passed the values seen in each
                                     // button element onclick attribute value

  // this single row allows you to recreate all the id's using the values passed in to the function
  var x = document.getElementById("Initial_Choice_Row_" + textNumbers[row] + "_Box_" + textNumbers[box]);

  // this allows you to pass either "X" or "Y" into the element, depending on which button was clicked
  x.innerHTML = letter;
  
  x.style.color = "white";
  
  // remember the choice that was just made by putting the latest letter choice
  // into the choices array at the position for this box
  choices[box] = letter;
  
  // create a place to hold a message
  var msg;
  
  // after each click, check if there is now a winner
  // i.e. check if all boxes in this row are the same as the latest choice
  if (
    (choices[0] === letter) && // if the remembered choice for the first  box is the latest choice AND
    (choices[1] === letter) && // if the remembered choice for the second box is the latest choice AND
    (choices[2] === letter)    // if the remembered choice for the third  box is the latest choice
  ) { // ...then announce the new winner
    msg = "We have a winner! ===> The '" + letter + "' team!";
  } else { // otherwise, continue to say that there is no winner
    msg = "No winner yet.";
  }
  
  // show the message
  var y = document.getElementById("winner");
  y.innerHTML = msg;
}

<table style="width:100%; background-color:black" border="2">
  <tr>
    <td>
      <p id="Initial_Choice_Row_One_Box_One" style="color:white">Click a Button to Choose "X" or "Y"</p>
      <button onclick="makeMove(0, 0, 'X')">Choose X</button>
      <button onclick="makeMove(0, 0, 'Y')">Choose Y</button>
    </td>
    <td>
      <p id="Initial_Choice_Row_One_Box_Two" style="color:white">Click a Button to Choose "X" or "Y"</p>
      <button onclick="makeMove(0, 1, 'X')">Choose X</button>
      <button onclick="makeMove(0, 1, 'Y')">Choose Y</button>
    </td>
    <td>
      <p id="Initial_Choice_Row_One_Box_Three" style="color:white">Click a Button to Choose "X" or "Y"</p>
      <button onclick="makeMove(0, 2, 'X')">Choose X</button>
      <button onclick="makeMove(0, 2, 'Y')">Choose Y</button>
    </td>
  </tr>
</table>
<p id="winner">No winner yet.</p>

【讨论】：