Tic Tac Toe Javascript Assignment

From Knowledge Kitchen
Jump to navigation Jump to search


Create a web page using Javascript and JQuery that allows a user to play Tic-Tac-Toe.

Suggested way to approach the problem

Here is a suggestion on how to proceed in an orderly fashion...


Create the HTML + CSS page

Create a page that has a layout suitable for a page displaying a Tic-Tac-Toe board.


Link to JQuery

Download a copy of the latest JQuery script from the JQuery website, and link to it from your page.


Verify that JQuery is working

Try to add a simple script that proves that JQuery is integrating and working as expected. User the alert() method to quickly test parts of your code.

For example...

<script>
//wait for page to load, and then pop up an alert.
$(document).ready(function() {
    alert("JQuery is working!");
});
</script>


Attach click event handlers to the tiles in your game board

When a user clicks on a tile in the game board, the program will have to do something... so make sure that you are able to detect clicks on the game board tiles.

For example...

<script>
//wait for page to load
$(document).ready(function() {

    //add a click event handler to all divs with the class "tile"
    $("div.tile").click(function() {
        //insert code that you want to run when a user clicks a tile
        alert("You clicked a tile!");
    });

});
</script>


Figure out how to alternate turns between two players

In Tic-Tac-Toe, players take turns. Your program has to keep track of whose turn it is at any given moment. So make a global variable that indicates whose turn it is at the beginning. And change the value of this variable with each turn, so that the turns alternate.

<script>

//variable to keep track of whose turn it is
var currentPlayer = "X"; //this will change

//wait for page to load
$(document).ready(function() {

    //add a click event handler to all divs with the class "tile"
    $("div.tile").click(function() {
        //insert code that you want to run when a user clicks a tile

        //now change turns!  If it was X's turn, make it Y's turn.  Otherwise, if it was Y's turn, make it X's turn.
        //do this by changing the value of the currentPlayer variable

    });

});
</script>


What links here