Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
1.9: Tic Tac Toe

Introduction

Create a game of tic tac toe. This game follows the same previous conventions in that it does not manipulate any elements once they are on the screen- when the user clicks it gets rid of the board and then redraws it. Note that the board data structure that was chosen (an array inside an array) encodes the idea of a grid with coordinate-like locations.

CSS

Paste this css into the style.css file.
1
.square {
2
padding: 10px;
3
margin: 10px;
4
background-color: white;
5
display: inline-block;
6
height: 10px;
7
width: 10px;
8
vertical-align: top;
9
}
Copied!

Global Variables

1
// keep data about the game in a 2-D array
2
const board = [
3
['', '', ''],
4
['', '', ''],
5
['', '', ''],
6
];
7
​
8
// the element that contains the rows and squares
9
let boardElement;
10
​
11
// the element that contains the entire board
12
// we can empty it out for convenience
13
let boardContainer;
14
​
15
// current player global starts at X
16
let currentPlayer = 'X';
Copied!

Helper Functions

1
// completely rebuilds the entire board every time there's a click
2
const buildBoard = (board) => {
3
// start with an empty container
4
boardContainer.innerHTML = '';
5
boardElement = document.createElement('div');
6
boardElement.classList.add('board');
7
​
8
// move through the board data array and create the
9
// current state of the board
10
for (let i = 0; i < board.length; i += 1) {
11
// separate var for one row / row element
12
const row = board[i];
13
const rowElement = document.createElement('div');
14
rowElement.classList.add('row');
15
​
16
// set each square
17
// j is the column number
18
for (let j = 0; j < row.length; j += 1) {
19
// one square element
20
const square = document.createElement('div');
21
square.classList.add('square');
22
​
23
// set the text of the square according to the array
24
square.innerText = board[i][j];
25
​
26
rowElement.appendChild(square);
27
​
28
// set the click all over again
29
// eslint-disable-next-line
30
square.addEventListener('click', () => {
31
squareClick(i, j);
32
});
33
}
34
​
35
// add a single row to the board
36
boardContainer.appendChild(rowElement);
37
}
38
};
Copied!

Game Initialisation Logic

1
// create the board container element and put it on the screen
2
const initGame = () => {
3
boardContainer = document.createElement('div');
4
document.body.appendChild(boardContainer);
5
​
6
// build the board - right now it's empty
7
buildBoard(board);
8
};
Copied!

Gameplay Logic

1
// switch the global values from one player to the next
2
const togglePlayer = () => {
3
if (currentPlayer === 'X') {
4
currentPlayer = 'O';
5
} else {
6
currentPlayer = 'X';
7
}
8
};
9
​
10
const squareClick = (column, row) => {
11
console.log('coordinates', column, row);
12
​
13
// see if the clicked square has been clicked on before
14
if (board[column][row] === '') {
15
// alter the data array, set it to the current player
16
board[column][row] = currentPlayer;
17
​
18
// refresh the creen with a new board
19
// according to the array that was just changed
20
buildBoard(board);
21
​
22
// change the player
23
togglePlayer();
24
}
25
};
Copied!

Exercise

Fork and clone the Coding Bootcamp Tic Tac Toe repo. Use code from the above implementation to build a working Tic Tac Toe game.
Last modified 2mo ago