Question

我应该首先说我对此更新（不仅仅是堆栈溢出，而且还有任何类型的编码）。我现在正在学习一门非常基础的入门课程，我们的任务之一就是在HTML框中创建一个井字游戏。

我专门搜索了这个问题的答案，但是我发现的任何东西都让我很难理解（注意：编写这段代码是我生命中迄今为止所做的最复杂的编码，所以这就是什么等级I＆＃39; m）。

我理解为游戏创建空间（表格）的动态，并将按钮嵌入到不同的单元格中以给予玩家选择。但是，为了获得额外的信用，他们为我们提供了让代码确定获胜者是谁的选择。任何从这里开始的见解都将非常感激。

我甚至不确定从哪里开始，但我想我需要编写另一个javascript代码添加到游戏中。这是我目前所拥有的（我只包含一行以便最小化此帖子的长度）：

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

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

Answer 1

编程中一个非常重要的概念就是不重复自己。你已经写了六次基本相同的功能。好的，有一些细微的差别，比如每次使用不同的元素id，并显示＆＃34; X＆＃34;或者＆＃34; Y＆＃34;。但每个功能的流程基本相同。

您要做的一件事就是将所有这些重复都折叠成一个函数，但是使用变量来使一个函数的行为有所不同，具体取决于刚刚发生的事情。您可以通过在函数调用中输入参数来实现。在这种情况下，每个按钮单击会向同一个函数发送不同的行号，框号和字母选择字符串。

请注意，即使您的ID的名称使用＆＃34; One＆＃34;作为第一个＆＃34;数字＆＃34;。习惯于从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";

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

好吧，祝你的节目好运......

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: