DAY 2
BUILD TIC-TAC-
TOE WITH
JAVASCRIPT
SJ
WHAT WE'LL CREATE
IS...
We'll be using:
Node.js for running the game on the terminal.
The 'prompt-sync' package for handling user
input.
A code editor (like VS Code) for building the
game.
# SETTING UP
First, install Node.js to run JavaScript code from the
terminal. You can download it from the Node.js
website. To check if you have it, type node -v in the
terminal. If needed, install the prompt-sync package
using npm install prompt-sync. Run your code with:
bash
node tictactoe.js
In this example, tictactoe.js is your file name.
To handle user input, we need to import prompt-
sync:
javascript
const prompt = require('prompt-sync')();
Next, we'll set up key game variables: gameBoard
(the game grid), currentPlayer (to track turns), and
gameActive (to control game flow).
Initialize the board as an empty array:
javascript
let gameBoard = [' ', ' ', ' ', ' ', ' ', ' ', ' ', '
', ' '];
Set the initial player to ' 🐐' and make the game
active:
javascript
let currentPlayer = ' 🐐';
We also need to set up a game state, so the
program knows when to stop and finish. When we
run the program, we can start with the gameActive
variable being set to true. This ensures the game
keeps going until there is a win or a draw.
javascript
let gameActive = true;
Now that we've initialized our essential variables, it's
time to work on the game functionality.
# PRINTING THE BOARD
We need a function to display the game board's
current state:
javascript
function printBoard() {
console.log(`
${gameBoard[0]} | ${gameBoard[1]} |
${gameBoard[2]}
---------
${gameBoard[3]} | ${gameBoard[4]} |
${gameBoard[5]}
---------
${gameBoard[6]} | ${gameBoard[7]} |
${gameBoard[8]}
`);
}
# MAKING MOVES
In Tic-Tac-Toe, players cannot take a space that is
already occupied by the opponent or themselves.
As a result, we need to check if a space is taken.
javascript
function handleMove(position) {
if (gameBoard[position] === " ") {
gameBoard[position] = currentPlayer;
} else {
console.log("Cell already taken, choose another
one.");
return false;
}
Later, we will make a checkWin() function to tell if a
player has won or not. If a player has won, the game
will no longer be active and the program will display
a winning message!
javascript
if (checkWin()) {
printBoard();
console.log(`Player ${currentPlayer} wins!`);
gameActive = false;
return true;
}
javascript
if (gameBoard.every(cell => cell !== " ")) {
printBoard();
console.log("It's a draw!");
gameActive = false;
return true;
}
🐐 🍇
currentPlayer = currentPlayer === " " ? " " :
🐐
" ";
return true;
}
# FINISHING TOUCHES
Define win conditions:
javascript
function checkWin() {
const conditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
}
javascript
return conditions.some(condition => {
const [a, b, c] = condition;
return gameBoard[a] === currentPlayer &&
gameBoard[b] === currentPlayer && gameBoard[c] ===
currentPlayer;
});
# GAME LOOP
Define win conditions:
javascript
while (gameActive) {
printBoard();
const position = prompt(`Player ${currentPlayer},
enter your move (0-8): `);
if (position >= 0 && position <= 8) {
handleMove(parseInt(position));
} else {
console.log("Invalid position, enter a number
between 0 and 8.");
}
}
Save and run your game with node tictactoe.js!
# CONGRATS!
You have made it to the end! With control flow,
arrays, input handling, and game logic, you've
coded Tic-Tac-Toe right on your computer!
If you would like to challenge yourself more, create
a tally or score system to keep track of how many
times each player has won.
## Don’t Forget to check the Git-Hub for the Code.
