I did a tic tac toe tutorial and for some reason it’s not marking anything on the board.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Justin's tictactoe</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section>
<h1 class="game--title">Tic Tac Toe</h1>
<div class="game--container">
<div data-cell-index="0" class="cell"></div>
<div data-cell-index="1" class="cell"></div>
<div data-cell-index="2" class="cell"></div>
<div data-cell-index="3" class="cell"></div>
<div data-cell-index="4" class="cell"></div>
<div data-cell-index="5" class="cell"></div>
<div data-cell-index="6" class="cell"></div>
<div data-cell-index="7" class="cell"></div>
<div data-cell-index="8" class="cell"></div>
</div>
<h2 class ="game--status"></h2>
<button class="game--restart">Restart Game</button>
</section>
<script src="index.js"></script>
</body>
</html>
Here’s the CSS
body {
font-family: "Arial", sans-serif;
}
section {
text-align: center;
}
.game--container {
display: grid;
grid-template-columns: repeat(3, auto);
width:306px;
margin: 0 auto;
}
.cell {
font-family: "Permanent Marker", cursive;
width: 100px;
height: 100px;
box-shadow: 0 0 0 1px #333333;
border: 1px solid #333333;
cursor: crosshair;
line-height: 100px;
font-size: 60px;
}
And the JS
const statusDisplay = document.querySelector('.game--status');
let gameActive = true;
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""]
const winningMessage = () => `Player ${currentPlayer} has won!`
const drawMessage = () => `Game ended in a draw!`;
const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`;
statusDisplay.innerHTML = currentPlayerTurn();
// THIS PORTION UPDATES OUR GAME STATE AND UPDATES THE USER INTERFACE
function handleCellPlayed(clickedCell, clickedCellIndex) {
gameState[clickedCellIndex] = currentPlayer;
clickedCell.innerHTML = currentPlayer;
}
// THIS ENDS THE PORTION THAT UPDATES GAME STATE AND UI - This updated the game state to reflect the played move as well as updated the UI to reflect the played move. This accepts the clicked cell -the .target of the click event and the index of the cell that has been clicked.
function handlePlayerChange() {
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusDisplay.innerHTML = currentPlayerTurn();
}
//THIS VALIDATES RESULTS - THIS WILL CHECK IS THE GAME ENDED IN A WIN, DRAW, OR IF THERE ARE STILL MOVES LEFT TO PLAY - THE ARRAY IS ALL THE WINNING MOVES
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]
];
function handleResultValidation() {
let roundWon = false;
for (let i = 0; i <= 7; i++) {
const winCondition = winningConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break
}
}
if (roundWon) {
statusDisplay.innerHTML = winningMessage();
gameActive = false;
return;
}
// Values in the arrays are indexes for cells that need to be filled by the same player to win the game. The for-loop will go through each one and check if the elements from the game state array - the one with the empty strings - "" "" "" "" "" "" under those indexes match. If they match a winner is declared and the game ends.
//This part checks for a draw
let roundDraw = !gameState.includes("");
if (roundDraw) {
statusDisplay.innerHTML = drawMessage();
gameActive = false;
return;
}
handlePlayerChange();
}
// The return statement in the roundWon check it is known that if a player has won that round - if so the script will stop there. This prevented using ELSE conditions to compact code.
// THIS PART BEGINS CHECKING IF CELL WAS CLICKED
function handleCellClick(clickedCellEvent) {
const clickedCell = clickedCellEvent.target;
const clickedCellIndex = parseInt(
clickedCell.getAttribute('data-cell-idex')
);
if (gameState[clickedCellIndex] !== "" || !gameActive) {
return;
}
handleCellPlayed(clickedCell, clickedCellIndex);
handleResultValidation();
}
// THIS PART ENDS CHECKING IF CELL WAS CLICKED - THIS ACCEPTS THE CLICK EVENT - THIS TRACKS WHICH CELL WAS CLICKED AND GET'S IT'S INDEX
function handleRestartGame() {
gameActive = true;
currentPlayer = "X";
gameState = ["", "", "", "", "", "", "", "", ""];
statusDisplay.innerHTML = currentPlayerTurn();
document.querySelectorAll('.cell')
.forEach(cell => cell.innerHTML = "");
}
document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick));
document.querySelector('.game--restart').addEventListener('click', handleRestartGame);
