I’m still in school and new to coding and programming. I’ve watched a video tutorial on how to build Tic Tac Toe using javascript,css and html. I used Visual Studio Code, and after imputing the relevant codes I used Live Server to test the game out.
The problem is that only the title and a reset button pops up, the game board and the actual game is not there.
I tried double-checking the codes, though I am not a coding expert, I am merely a beginner thus I need some expert advice, solutions, and guidance.
Here are the codes I used:
HTML CODE:
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Tic Tac Toe</h1>
<div id="board">
<div class="square" id="0"></div>
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<div class="square" id="3"></div>
<div class="square" id="4"></div>
<div class="square" id="5"></div>
<div class="square" id="6"></div>
<div class="square" id="7"></div>
<div class="square" id="8"></div>
</div>
<button id="reset">Reset Game</button>
</div>`
CSS code:
`.container {
text-align: center;
}
#board {
display: flex;
flex-wrap: wrap;
width: 300px;
margin: 0 auto;
}
.square {
width: 90px;
height: 90px;
background-color: #f2f2f2;
margin: 5px;
border-radius: 5px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.square:hover {
background-color: #e6e6e6;
}
.square.X {
color: #ff5e5e;
}
.square.O {
color: #0077ff;
}
`
JavaScript code:
`let board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameOver = false;
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
const squares = document.querySelectorAll(".square");
const resetButton = document.querySelector("#reset");
// Add click event listener to each square
squares.forEach(square => {
square.addEventListener("click", handleClick);
});
// Add click event listener to reset button
resetButton.addEventListener("click", resetGame);
function handleClick(event) {
const square = event.target;
const index = square.getAttribute("id");
// If square is already clicked or game is over, return
if (board[index] !== "" || gameOver) {
return;
}
// Add X or O to board and update UI
board[index] = currentPlayer;
square.classList.add(currentPlayer);
square.innerHTML = currentPlayer;
// Check for winner or tie game
checkForWinner();
checkForTieGame();
// Switch current player
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function checkForWinner() {
for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (board[a] === board[b] && board[b] === board[c] && board[a] !== "") {
gameOver = true;
highlightWinnerSquares(a, b, c);
displayWinner(board[a]);
break;
}
}
}
function checkForTieGame() {
if (!board.includes("") && !gameOver) {
gameOver = true;
displayTieGame();
}
}
function highlightWinnerSquares(a, b, c) {
document.getElementById(a).classList.add("winner");
document.getElementById(b).classList.add("winner");
document.getElementById(c).classList.add("winner");
}
function displayWinner(player) {
const message = document.getElementById("message");
message.innerHTML = `${player} wins!`;
}
function displayTieGame() {
const message = document.getElementById("message");
message.innerHTML = "It's a tie game!";
}
function resetGame() {
board = ["", "", "", "", "", "", "", "", ""];
currentPlayer = "X";
gameOver = false;
squares.forEach(square => {
square.classList.remove("X", "O", "winner");
square.innerHTML = "";
});
const message = document.getElementById("message");
message.innerHTML = "";
}
`
2
Answers
Link the javascript code with:
<script src="path_to_file.js"></script>As well as finish the body and html tags.
TO put the answer by Urax more clearly please update your HTML to the following
The CSS is fine.
Hope this helps. Original answer is by Urax, I just rephrased his answer for your convenience.