javascript - HTML Tic-Tac-Toe 游戏获奖者公告

首先我应该说我对此非常陌生(不仅仅是堆栈溢出，而且还包括一般的任何类型的编码)。我现在正在学习一门非常基础的入门类(class)，我们的作业之一是在 HTML 框中创建一个井字棋游戏。

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

我了解为游戏创建空间( table )以及将按钮嵌入到不同单元格中以便为玩家提供选择的动态。然而，为了额外的好处，他们为我们提供了让代码决定谁是获胜者的选择。任何关于从哪里开始的见解将不胜感激。

我什至不确定从哪里开始，但我想我需要编写另一个 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>

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

最佳答案

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

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

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

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

要检查是否有获胜者，您首先需要有某种方法来记住游戏中的所有值。一种方法是使用数组。我不知道您是否已经了解了数组，但这里有一个快速类(class):

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>

关于javascript - HTML Tic-Tac-Toe 游戏获奖者公告，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35714945/

javascript - HTML Tic-Tac-Toe 游戏获奖者公告

上一篇：处理空值的 JavaScript 说明

下一篇：javascript - 从实例化函数中获取函数名