Step 1: The Board
Okay so first off, creating a tic-tac-toe board is very simple. Here is the HTML:
<div id="boardWrapper">
<div id="boxesWrapper">
<input type="text" id="box" class="box1" maxlength="1"/>
<input type="text" id="box" class="box2" maxlength="1"/>
<input type="text" id="box" class="box3" maxlength="1"/>
<input type="text" id="box" class="box4" maxlength="1"/>
<input type="text" id="box" class="box5" maxlength="1"/>
<input type="text" id="box" class="box6" maxlength="1"/>
<input type="text" id="box" class="box7" maxlength="1"/>
<input type="text" id="box" class="box8" maxlength="1"/>
<input type="text" id="box" class="box9" maxlength="1"/>
</div>
<div id="button"> </div>
<div id="reset"> Reset Board </div>
</div>
Here is the CSS that follows:
/* this is the positioning for the whole board */
#boardWrapper { width: 278px; margin: 0 auto; margin-top: 75px; }
/* in our tic tac toe game we are going to let the user enter an 'x' or an 'o' after they click the appropriate box using their keyboard, so this is what the input is for */
input { font-size: 60px; text-align: center; padding-top: 13px; font-family: "Courier New"; text-transform: uppercase; color: black; }
/* this is how each box space on the board will look */
#box { width: 90px; height: 80px; background: white; }
/* because we have a div around all the boxes and we have some spacing between each of them, we are able to set this div to a background color of black, and this
will allow the background space to be black making it look like a real tic tac toe board */
#boxesWrapper { background: black; }
/* this gives the second and third row of boxes some spacing from the row before it */
.box4, .box5, .box6, .box7, .box8, .box9 { margin-top: 4px; }
/* this is the div where the "winner text" will be shown */
#button { background: orange; text-align: center; margin-top: 20px; cursor: pointer; }
/* reset button */
#reset { background: #5c5c5c; border: 1px solid black; text-align: center; font-size: 25px; cursor: pointer; color: white; margin-top: 30px;}
#reset:hover { background: #303030; }
So this is how the final board should look like (excluding the green numbers, they're just there to show you what boxes are what numbers. We assigned them all seperate classes in
the HTML).
You're able to click in any of the boxes and type whatever you want now, no restrictions yet. Let's add some now though using jQuery and make this into an actual
tic-tac-toe game that you can play!
Okay, so the steps of how we are going to about making this tic-tac-toe game is:
1) When the user enters a key from the keyboard it checks whether it was an 'x' or 'o', if not
an error appears in the button div and the letter is not added to the board.
2) If the letter entered was in fact an 'x' or 'o', then it adds it to the board.
3) Then the final step is to
basically write the javascript so that it can determine all the possible winning combinations on the board, and if there is a row or column with 3 x's or o's in a row,
then that player wins.
So this would be the first and second parts of the javascript where we check for the user entering a key, and then determine what letter they entered.
< script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8">
< script type="text/javascript">
$(document).ready(function(){
$("input").keyup(function() {
if ( $(this).val()=="x" || $(this).val()=="o" ) {
$(this).css({"color":"#a31e1b"});
$(this).attr("readonly","readonly");
$("#button").html("");
}
else if ( $(this).val()!="x" || $(this).val()!="o" ) {
$("#button").html("Please enter only a lowercase x or o");
$(this).attr("value","");
}
});
});
</script>
If Statement: So what we do here is we check if they value entered in this input box is an 'x' or an 'o'. If it is then we set the letters color to a dark red, set a readonly attribute which will not
let the user change the contents of thix box space anymore, and finally we set the button's div html content to nothing because let's say the user doesnt enter an 'x' or 'o' at first
and an error shows up, after they DO enter an 'x' or 'o' in that space, we don't want that error text in the button div staying up on the screen.
Else If Statement: Here we check for if the user did not enter an 'x' or 'o' in one of the input spaces. If they enter anyting other than those
two letters, in the button div we set the html contents to display some sort of error statement and then we delete what they entered in. (ie. If a user enters the letter 'k' in one of the
spaces, it will quickly be deleted off the screen before they are able to click anywhere else, and an error will appear towards the bottom telling the user to only enter an 'x'
or an 'o'.)
Now that we are able to make users enter only in x's and o's into the board, what do we do about all the winning possibilites? Since this game has only 8 possible
ways of winning, we can easily use jQuery to check for all of them. Before in the HTML we gave each of the boxes an id of 'box', but we gave all the boxes a class of their own
corresponding position on the board. Having a different class assigned to each box now will allow us to check for winners. Here is an example of checking for 3 in a row on the
withinthe keyup function).
// first row, X
if ( $(".box1").val() == "x" && $(".box2").val() == "x" && $(".box3").val() == "x" ) {
}
In this If Statement, we check for if the value of box 1, box 2, and box 3 have x's in them. This is why we assigned each box it's own class before. Now we must write
something within this if statement to inform the users of who the winner is. This is what we put within that if statement.
// first row, X
if ( $(".box1").val() == "x" && $(".box2").val() == "x" && $(".box3").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box2").css({"background":"#4faf45"});
$(".box3").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
Now there's a couple of different things happening in there, let me explain them step by step. Once a user gets 3 x's in the first row, in the button div we change the
text to display "X WINS! Congratulations". Then we change all 3 of the winning box background colors to a shade of green, as to make those three spaces stand out. Then we target
all of the inputs, and we add the attribute of 'readonly' which will not allow the user to click and change whatever is in any of the boxes. It wouldn't be fair if one of the
users wins, and then someone is easily able to just click in any of the boxes and change what is in them. So now we have a tic-tac-toe game with only one winning possibility, but
we must add the other seven. Here are the codes for the second and third rows.
// second row, X
if ( $(".box4").val() == "x" && $(".box5").val() == "x" && $(".box6").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box2").css({"background":"#4faf45"});
$(".box3").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// third row, X
if ( $(".box7").val() == "x" && $(".box8").val() == "x" && $(".box9").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box7").css({"background":"#4faf45"});
$(".box8").css({"background":"#4faf45"});
$(".box9").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
Here are the codes for the columns and the diagonals.
// first column, X
if ( $(".box1").val() == "x" && $(".box4").val() == "x" && $(".box7").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box4").css({"background":"#4faf45"});
$(".box7").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// second column, X
if ( $(".box2").val() == "x" && $(".box5").val() == "x" && $(".box8").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box2").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box8").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// third column, X
if ( $(".box3").val() == "x" && $(".box6").val() == "x" && $(".box9").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box3").css({"background":"#4faf45"});
$(".box6").css({"background":"#4faf45"});
$(".box9").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// top to bottom diagonal, X
if ( $(".box1").val() == "x" && $(".box5").val() == "x" && $(".box9").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box9").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// bottom to top diagonal, X
if ( $(".box3").val() == "x" && $(".box5").val() == "x" && $(".box7").val() == "x" ) {
$("#button").text("X WINS! Congratulations");
$(".box3").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box7").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
We now have a board with all the possible winning combinations for 'x' accounted for. What about the 'o's though? We must take all the codes for the rows, columns, and diagonals and
// first row, O
if ( $(".box1").val() == "o" && $(".box2").val() == "o" && $(".box3").val() == "o" ) {
$("#button").text("O WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box2").css({"background":"#4faf45"});
$(".box3").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// second row, O
if ( $(".box4").val() == "o" && $(".box5").val() == "o" && $(".box6").val() == "o" ) {
$("#button").text("O WINS! Congratulations");
$(".box4").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box6").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// third row, O
if ( $(".box7").val() == "o" && $(".box8").val() == "o" && $(".box9").val() == "o" ) {
$("#button").text("O WINS! Congratulations");
$(".box7").css({"background":"#4faf45"});
$(".box8").css({"background":"#4faf45"});
$(".box9").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// first column, O
if ( $(".box1").val() == "o" && $(".box4").val() == "o" && $(".box7").val() == "o" ) {
$("#button").text("O WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box4").css({"background":"#4faf45"});
$(".box7").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// second column, O
if ( $(".box2").val() == "o" && $(".box5").val() == "o" && $(".box8").val() == "o" ) {
$("#button").text("O WINS! Congratulations");
$(".box2").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box8").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// third column, O
if ( $(".box3").val() == "o" && $(".box6").val() == "o" && $(".box9").val() == "o" ) {
$("#button").text("O WINS! Congratulations");
$(".box3").css({"background":"#4faf45"});
$(".box6").css({"background":"#4faf45"});
$(".box9").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// top to bottom diagonal, O
if ( $(".box1").val() == "o" && $(".box5").val() == "o" && $(".box9").val() == "o" ) {
$("#button").text("X WINS! Congratulations");
$(".box1").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box9").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
// bottom to top diagonal, O
if ( $(".box3").val() == "o" && $(".box5").val() == "o" && $(".box7").val() == "o" ) {
$("#button").text("X WINS! Congratulations");
$(".box3").css({"background":"#4faf45"});
$(".box5").css({"background":"#4faf45"});
$(".box7").css({"background":"#4faf45"});
$("input").attr("readonly","readonly");
}
Step 3: Finishing Up
So now for a recap. We have constructed the board using HTML and CSS, we have used jQuery to check for a users input, and finally we have written out all 16 possible
winning combinations for both letters also in jQuery. There is just now one more thing to do, and that is add a small piece of code to allow the user to reset the board when
he or she clicks the 'reset button' at the bottom. Note that this code goes outside the keyup function.
$("#reset").click(function() {
window.location.assign("yourfilename.html"); // ie. window.location.assign("daniels_game.html");
});
Check out an example of this game here!
Have fun tic-tac-toeing!
buddy validation for the entering "x" or "0" more than 3 times not handled. & if x enters next value has to be o not x again..
ReplyDeleteCan you please modify and send the update file