Skip to content

Instantly share code, notes, and snippets.

@chunkyguy
Created August 20, 2023 09:01
Show Gist options
  • Save chunkyguy/5924385f28fa7affe28984ab09414a17 to your computer and use it in GitHub Desktop.
Save chunkyguy/5924385f28fa7affe28984ab09414a17 to your computer and use it in GitHub Desktop.
Basic TicTacToe in javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameContainer">
<h1>Tic Tac Toe</h1>
<div id="cellContainer">
<div cellIndex="0" class="cell"></div>
<div cellIndex="1" class="cell"></div>
<div cellIndex="2" class="cell"></div>
<div cellIndex="3" class="cell"></div>
<div cellIndex="4" class="cell"></div>
<div cellIndex="5" class="cell"></div>
<div cellIndex="6" class="cell"></div>
<div cellIndex="7" class="cell"></div>
<div cellIndex="8" class="cell"></div>
</div>
<h2 id="statusText">Loading...</h2>
<button id="restarButton">Restart</button>
</div>
<script src="index.js"></script>
</body>
</html>
const cells = document.querySelectorAll(".cell");
const statusText = document.querySelector("#statusText");
const restarButton = document.querySelector("#restarButton");
let board = [
"", "", "",
"", "", "",
"", "", ""
];
const winPositions = [
// rows
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
// columns
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
// diagonals
[0, 4, 8],
[2, 4, 6]
];
let currPlayer = "X";
let isPlaying = false;
function isWin() {
for (let idx = 0; idx < winPositions.length; idx++) {
const winPosition = winPositions[idx];
const vals = winPosition.map((jdx) => board[jdx]);
const isWin = vals.every((x) => x == currPlayer);
if (isWin) {
return true;
}
}
return false;
}
function isDraw() {
return !board.includes("");
}
function handleCellTap() {
if (!isPlaying) {
return;
}
const cellIdx = this.getAttribute("cellIndex");
if (board[cellIdx] == "") {
board[cellIdx] = currPlayer;
this.textContent = currPlayer;
if (isWin()) {
statusText.textContent = `${currPlayer} wins!`;
isPlaying = false;
}
else if (isDraw()) {
statusText.textContent = "It's a draw!";
isPlaying = false;
}
else {
currPlayer = (currPlayer == "X") ? "O" : "X";
statusText.textContent = `${currPlayer}'s turn`;
}
}
else {
statusText.textContent = "Invalid move!";
}
}
function handleRestartTap() {
newGame();
}
function newGame() {
for (let idx = 0; idx < board.length; idx++) {
board[idx] = "";
}
cells.forEach((cell) => {
cell.textContent = "";
});
statusText.textContent = `${currPlayer}'s turn`;
isPlaying = true;
}
function initGame() {
cells.forEach(cell => cell.addEventListener("click", handleCellTap));
restarButton.addEventListener("click", handleRestartTap);
newGame();
}
initGame();
#gameContainer {
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
}
#cellContainer {
display: grid;
grid-template-columns: repeat(3, auto);
width: 225px;
height: 225px;
margin: auto;
}
.cell {
width: 75px;
height: 75px;
border: 2px solid;
box-shadow: 0 0 0 2px;
line-height: 75px;
font-size: 50px;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment