Objective: Build a tic-tac-toe game in HTML, CSS, and JavaScript.
This week, we've been learning about working with conditionals and loops, as well as writing functions. We've also learned about the structure of the DOM and how we can interact with it using CSS and JavaScript. We've looked at Bootstrap's CSS library and at jQuery, a JavaScript library for front end web development.
For your first weekend lab, we'll be making a tic-tac-toe game using your knowledge and skills from this week.
- Users should be able to click on any empty box to make a move.
- Every move should alternate between marking an
X
andO
(the two players). - A user should not be able to claim a box that has already been claimed for
X
orO
. - Users should be able to click a "reset" button to clear all
X
's andO
's from the board and restart the game.
-
Display a message to indicate which player's turn is about to be played (
X
orO
). -
If a player wins, show a message with the mark of the winner. Separate your code that finds the winner (if any) into its own function.
-
If the board fills up before anyone wins, show a message that it was a draw.
-
Display separate colors for
X
's andO
's. -
Creatively style your tic-tac-toe game!
-
Research "event delegation," and attach your event listeners to the whole board instead of individual boxes.
Play Tic-Tac-Toe
Remind yourself how tic-tac-toe works by playing a few games with a classmate.
Set up repository, files, and basic structure.
-
Fork this repository to create a copy on your GitHub account.
-
Clone the tic-tac-toe repository from your GitHub account into your
wdi
folder to create a local copy on your computer. -
Use
index.html
as your starting point on this project. There is already some starter code inindex.html
,css/style.css
, andjs/app.js
. -
Make sure that jQuery and Bootstrap's CSS are linked in your
index.html
. Also link your custom CSS and JavaScript files to yourindex.html
. -
Test that your CSS and JavaScript files are linked to your
index.html
. Add an alert toapp.js
, and change the color of the body instyle.css
. Then openindex.html
in the browser. You should see part of an empty tic-tac-toe game board with your background color, and you should also see your alert message pop up. -
There's part of a board in
index.html
already. Use Bootstrap's grid system to create the rest of the empty tic-tac-toe game board. The empty board should look like this: -
Add a reset button below the board.
Target DOM elements for gameplay
-
Use the
$()
jQuery function with CSS selectors to locate each of the DOM elements your user will click. Try this in your console to make sure your selection works. Set up variables for them in yourapp.js
. -
After you find the element(s), use
.on
to set up a simpleclick
event listener for each of those elements. Start by having your event handler just log a message that the element was clicked. -
Most of your game logic will happen when a user clicks inside the board, on one of the boxes.
-
The jQuery API docs are a great source of information on what jQuery can do (and how)! Two categories you might find particularly useful are DOM Manipulation and CSS. When you're looking at jQuery docs for a method, scroll down a little to find the examples!
-
When the jQuery selector returns an "array" of elements, it's actually giving us a special jQuery collection. Use the
.eq
method with regular array indices to get the jQuery elements out of the collection:var paragraphs = $('p'); var firstParagraph = paragraphs.eq(0); // returns a jQuery element (so jQuery functions work on it) var vanillaVersion = paragraphs[0]; // returns the JavaScript version of the element (most jQuery functions won't work on it)
-
The jQuery version of
.forEach
is.each
.
Track Turns
You need to keep track of whose turn it is. This will be important when deciding whether to draw an `X` or an `O`. Try storing the turn as a variable.
Claim a Box
You'll need a way for your code to check whether a box is empty. When a box is claimed, use jQuery to change the box's DOM element somehow. Then you can check that feature of the box later! Test your ideas in the console.
Reset Everything
Your reset button should change the board back to its initial configuration. Make sure you empty all the boxes and reset all other variables to their starting values. Don't forget the starting turn variable!
Style `X`s and `O`s
Use jQuery to add a CSS class to the box when a player makes a move. (Not sure how? Google "jQuery add class", choose the jQuery API Documentation result, and find some examples!)
Detect a Draw
The game can end when someone wins or when the board fills up. How can you check whether the board is full or still has space for the players to move?
Win!
Hint: what is winning?
Start by listing all the ways to win at tic-tac-toe. There are 8 winning combinations of boxes!
Big Hint: when to check for winner?
Check for your winning combinations every time someone could win -- after every move!Hint: showing a message
Try an `alert`. For an extra challenge, put a message directly onto the page using jQuery!- As you make code changes, frequently commit and push to GitHub.
- Once you've finished the assignment and pushed your work to GitHub, create a link on your personal portfolio linking to this repo.
- When we come back, you'll show off your tic-tac-toe game in a "science fair" style open presentation!