Reputation: 1
HTML Tic-Tac-Toe Game Winner Announcement
I should start off by saying that I am SUPER new to this (not just stack overflow, but also any sort of coding in general). I'm taking a very basic intro course right now, and one of our assignments is to create a tic-tac-toe game in an HTML box.
I searched for answers to this question specifically, but anything I found was extremely difficult for me to comprehend (note: writing this code is the most complex coding I have done so far in my life, so that's what level I'm at).
I understand the dynamics of creating the space (table) for the game, and embedding the buttons into the different cells to give players choices. However, for extra credit they've offered us the choice of making the code determine who the winner is. Any insight on where to start with this would be much appreciated.
I'm not even certain where to start, but I imagine that I need to write another javascript code to add into the game. Here's what I have so far (I have only included one row in order to minimize the length of this post):
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>Thanks so much everyone! And sorry if my formatting is wrong/I didn't search hard enough or properly for this answer. Happy to improve in all aspects (including formatting my posts here!).
Upvotes: 0
Views: 320
Answers (1)
Reputation: 12458
One very important concept in programming is not repeating yourself. You have written essentially the same function six times over. OK, there are some minor differences, like using a different element id each time, and showing either an "X" or a "Y". But the flow of each function is essentially the same.
One thing you want to do is collapse all of those repetitions into one function, but use variables to make that one function behave differently depending on what just happened. You can do that by entering parameters into the function call. In this case, each button click sends different a different row number, box number and letter choice string to the same function.
Note that the row and box numbers start with zero rather than one, even though your id's have names that use "One" as the first "number". Get used to starting to count from 0 instead of 1. It happens a lot in coding.
Use those passed in values to select a different x each time, and to show a different letter each time.
To check if there is a winner, you first of all need to have some way of remembering all the values in the game. One way is to use an array. I don't know if you have learned about arrays yet, but here's a quick lesson:
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";
Each time someone clicks a button, remember their choice in the array. That way they can be checked. Now, also each time someone clicks a button, check to see whether all the array values are the same as the most recently chosen value. If they are, then you have a winner, at least in this one-dimensional version of tic-tac-toe. Of course, it would be slightly more complicated in a full 3x3 game, but most of the same concepts would apply.
Well, best of luck with your programming...
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>Upvotes: 1