Skip to content

Instantly share code, notes, and snippets.

@maxmatthews

maxmatthews/index.html

Last active May 26, 2022 00:25
Show Gist options
  • Save maxmatthews/d9d1b9d4b0ab083789e150d3de968a6f to your computer and use it in GitHub Desktop.
Save maxmatthews/d9d1b9d4b0ab083789e150d3de968a6f to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
button {
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="board">
<div class="row">
<button id="b1">[0][0]</button>
<button id="b2">[0][1]</button>
<button id="b3">[0][2]</button>
</div>
<div class="row">
<button id="b4">[1][0]</button>
<button id="b5">[1][1]</button>
<button id="b6">[1][2]</button>
</div>
<div class="row">
<button id="b7">[2][0]</button>
<button id="b8">[2][1]</button>
<button id="b9">[2][2]</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
let board = [
["", "", ""],
["", "", ""],
["", "", ""],
];
const updateHTML = () => {
let html = "";
let idCounter = 1;
for (const row of board) {
html += `<div>`;
for (const col of row) {
html += `<button id="b${idCounter}" onClick="buttonClicked(event)">${
col || "&nbsp;&nbsp;"
}</button>`;
idCounter++;
}
html += `</div>`;
}
document.getElementById("board").innerHTML = html;
};
const checkGameStatus = () => {
if (board[0][0] === "x" && board[0][1] === "x" && board[0][2] === "x") {
//row 1
return "x";
} else if (
board[1][0] === "x" &&
board[1][1] === "x" &&
board[1][2] === "x"
) {
//row 2
return "x";
} else if (
board[2][0] === "x" &&
board[2][1] === "x" &&
board[2][2] === "x"
) {
//row 3
return "x";
} else if (
board[0][0] === "x" &&
board[1][0] === "x" &&
board[2][0] === "x"
) {
//col 1
return "x";
} else if (
board[0][1] === "x" &&
board[1][1] === "x" &&
board[2][1] === "x"
) {
//col 2
return "x";
} else if (
board[0][2] === "x" &&
board[1][2] === "x" &&
board[2][2] === "x"
) {
//col 3
return "x";
} else if (
board[0][0] === "x" &&
board[1][1] === "x" &&
board[2][2] === "x"
) {
//left to right diagonal
return "x";
} else if (
board[0][2] === "x" &&
board[1][1] === "x" &&
board[2][0] === "x"
) {
//right to left diagonal
return "x";
}
if (board[0][0] === "o" && board[0][1] === "o" && board[0][2] === "o") {
return "o";
} else if (
board[1][0] === "o" &&
board[1][1] === "o" &&
board[1][2] === "o"
) {
return "o";
} else if (
board[2][0] === "o" &&
board[2][1] === "o" &&
board[2][2] === "o"
) {
return "o";
} else if (
board[0][0] === "o" &&
board[1][0] === "o" &&
board[2][0] === "o"
) {
return "o";
} else if (
board[0][1] === "o" &&
board[1][1] === "o" &&
board[2][1] === "o"
) {
return "o";
} else if (
board[0][2] === "o" &&
board[1][2] === "o" &&
board[2][2] === "o"
) {
return "o";
} else if (
board[0][0] === "o" &&
board[1][1] === "o" &&
board[2][1] === "o"
) {
return "o";
} else if (
board[0][2] === "o" &&
board[1][1] === "o" &&
board[2][0] === "o"
) {
return "o";
}
};
const randomNumBetween = (min, max) => {
//SOURCE: https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript
// min and max included
return Math.floor(Math.random() * (max - min + 1) + min);
};
const announceWinnerAndReset = (winner) => {
setTimeout(() => {
alert(`${winner} wins!`);
board = [
["", "", ""],
["", "", ""],
["", "", ""],
];
updateHTML();
}, 250);
};
const computerMoveRandom = () => {
let emptyRowIndex, emptyColIndex;
do {
const randomRowIndex = randomNumBetween(0, 2);
const randomColIndex = randomNumBetween(0, 2);
if (board[randomRowIndex][randomColIndex] === "") {
emptyRowIndex = randomRowIndex;
emptyColIndex = randomColIndex;
}
} while (!emptyRowIndex);
board[emptyRowIndex][emptyColIndex] = "o";
};
const computerBlockOrRandomMove = () => {
//check all rows
if (board[0][0] === "x" && board[0][1] === "x" && board[0][2] !== "o") {
//top right
board[0][2] = "o";
} else if (
board[0][1] === "x" &&
board[0][2] === "x" &&
board[0][0] !== "o"
) {
//top left
board[0][0] = "o";
} else if (
board[0][0] === "x" &&
board[0][2] === "x" &&
board[0][1] !== "o"
) {
//top center
board[0][1] = "o";
} else if (
board[1][0] === "x" &&
board[1][1] === "x" &&
board[1][2] !== "o"
) {
//middle right
board[1][2] = "o";
} else if (
board[1][1] === "x" &&
board[1][2] === "x" &&
board[1][0] !== "o"
) {
//middle left
board[1][0] = "o";
} else if (
board[1][0] === "x" &&
board[1][2] === "x" &&
board[1][1] !== "o"
) {
//middle center
board[1][1] = "o";
} else if (
board[2][0] === "x" &&
board[2][1] === "x" &&
board[2][2] !== "o"
) {
//bottom right
board[2][2] = "o";
} else if (
board[2][1] === "x" &&
board[2][2] === "x" &&
board[2][0] !== "o"
) {
//bottom left
board[2][0] = "o";
} else if (
board[2][0] === "x" &&
board[2][2] === "x" &&
board[2][1] !== "o"
) {
//bottom center
board[2][1] = "o"; //all rows have been checked, now start all cols
} else if (
board[0][0] === "x" &&
board[1][0] === "x" &&
board[2][0] !== "o"
) {
//bottom left
board[2][0] = "o";
} else if (
board[0][0] === "x" &&
board[2][0] === "x" &&
board[1][0] !== "o"
) {
//center left
board[1][0] = "o";
} else if (
board[0][1] === "x" &&
board[0][2] === "x" &&
board[0][0] !== "o"
) {
//top left
board[0][0] = "o";
} else if (
board[0][1] === "x" &&
board[1][1] === "x" &&
board[2][1] !== "o"
) {
//bottom center
board[2][1] = "o";
} else if (
board[0][1] === "x" &&
board[2][1] === "x" &&
board[1][1] !== "o"
) {
//center center
board[1][1] = "o";
} else if (
board[1][1] === "x" &&
board[2][1] === "x" &&
board[0][1] !== "o"
) {
//top center
board[0][1] = "o";
} else if (
board[1][2] === "x" &&
board[2][2] === "x" &&
board[0][2] !== "o"
) {
//right top
board[0][2] = "o";
} else if (
board[0][2] === "x" &&
board[2][2] === "x" &&
board[1][2] !== "o"
) {
//right center
board[1][2] = "o";
} else if (
board[0][2] === "x" &&
board[1][2] === "x" &&
board[2][2] !== "o"
) {
//right bottom
board[2][2] = "o";
} else {
//TODO: Block diagonal wins
computerMoveRandom();
}
};
const buttonClicked = (event) => {
const buttonID = event.target.id;
if (buttonID === "b1") {
board[0][0] = "x";
} else if (buttonID === "b2") {
board[0][1] = "x";
} else if (buttonID === "b3") {
board[0][2] = "x";
} else if (buttonID === "b4") {
board[1][0] = "x";
} else if (buttonID === "b5") {
board[1][1] = "x";
} else if (buttonID === "b6") {
board[1][2] = "x";
} else if (buttonID === "b7") {
board[2][0] = "x";
} else if (buttonID === "b8") {
board[2][1] = "x";
} else if (buttonID === "b9") {
board[2][2] = "x";
}
const winner = checkGameStatus();
if (winner) {
announceWinnerAndReset(winner);
} else {
// computerMoveRandom();
computerBlockOrRandomMove();
const computerWin = checkGameStatus();
if (computerWin) {
announceWinnerAndReset(computerWin);
}
}
updateHTML();
};
updateHTML();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment