我应该首先说我是超级新手(不仅仅是堆栈溢出,还有任何类型的编码)。我现在正在学习一个非常基本的入门课程,我们的任务之一是在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>
非常感谢大家!很抱歉,如果我的格式错误/我没有足够努力或正确地搜索这个答案。很高兴在各个方面进行改进(包括在此处格式化我的帖子!
编程中一个非常重要的概念是不要重复自己。你已经写了六次基本上相同的函数。好的,有一些细微的区别,比如每次使用不同的元素 ID,并显示"X"或"Y"。但是每个函数的流程本质上是相同的。
您要做的一件事是将所有这些重复折叠到一个函数中,但使用变量使该函数的行为根据刚刚发生的事情而有所不同。您可以通过在函数调用中输入参数来执行此操作。在这种情况下,每次单击都会向同一函数发送不同的行号、框号和字母选择字符串。
请注意,行号和框号以零而不是 1 开头,即使您的 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>