ryanwarsaw/tic-tac-toe.html

## tic-tac-toe.html
<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <style>
      .board {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(3, 150px);
      }
      .square {
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="board">
      <button id="0" class="square" onclick="onSquareClick(0)"></button>
      <button id="1" class="square" onclick="onSquareClick(1)"></button>
      <button id="2" class="square" onclick="onSquareClick(2)"></button>
      <button id="3" class="square" onclick="onSquareClick(3)"></button>
      <button id="4" class="square" onclick="onSquareClick(4)"></button>
      <button id="5" class="square" onclick="onSquareClick(5)"></button>
      <button id="6" class="square" onclick="onSquareClick(6)"></button>
      <button id="7" class="square" onclick="onSquareClick(7)"></button>
      <button id="8" class="square" onclick="onSquareClick(8)"></button>
    </div>

    <script>
      let currentMove = "X";
      let boardState = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
      ];
      let totalMoves = 0;

      /**
       * Handle visual updates for each square, and internal board state
       **/
      function onSquareClick(index) {
        const row = Math.floor(index / 3);
        const column = index % 3;
        const square = document.getElementById(`${index}`);

        square.innerHTML = currentMove;
        square.disabled = true;

        if (currentMove === "X") {
          square.style.backgroundColor = "#FFC300";
          boardState[row][column] = 88; // char code for "X"
        } else if (currentMove === "O") {
          square.style.backgroundColor = "#FF5733";
          boardState[row][column] = 79; // char code for "O"
        }

        totalMoves++;

        if (checkForWinner(row, column)) {
          alert(`${currentMove} has won the game!`);
          location.reload();
        } else if (totalMoves === 9) {
          alert("The game has ended in a tie!");
          location.reload();
        }

        currentMove = currentMove === "X" ? "O" : "X";
      }

      /**
       * Evaluates the game board to see if there has been a winner.
       **/
      function checkForWinner(row, column) {
        const charCode = boardState[row][column];
        return (
          // horizontal check
          (boardState[row][0] === charCode &&
            boardState[row][1] === charCode &&
            boardState[row][2] === charCode) ||
          // vertical check
          (boardState[0][column] === charCode &&
            boardState[1][column] === charCode &&
            boardState[2][column] === charCode) ||
          // left angle check
          (boardState[0][0] === charCode &&
            boardState[1][1] === charCode &&
            boardState[2][2] === charCode) ||
          // right angle check
          (boardState[0][2] === charCode &&
            boardState[1][1] === charCode &&
            boardState[2][0] === charCode)
        );
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tic Tac Toe</title>
	<style>
	.board {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(3, 150px);
	}
	.square {
	width: 150px;
	height: 150px;
	}
	</style>
	</head>
	<body>
	<div class="board">
	<button id="0" class="square" onclick="onSquareClick(0)"></button>
	<button id="1" class="square" onclick="onSquareClick(1)"></button>
	<button id="2" class="square" onclick="onSquareClick(2)"></button>
	<button id="3" class="square" onclick="onSquareClick(3)"></button>
	<button id="4" class="square" onclick="onSquareClick(4)"></button>
	<button id="5" class="square" onclick="onSquareClick(5)"></button>
	<button id="6" class="square" onclick="onSquareClick(6)"></button>
	<button id="7" class="square" onclick="onSquareClick(7)"></button>
	<button id="8" class="square" onclick="onSquareClick(8)"></button>
	</div>

	<script>
	let currentMove = "X";
	let boardState = [
	[0, 0, 0],
	[0, 0, 0],
	[0, 0, 0]
	];
	let totalMoves = 0;

	/**
	* Handle visual updates for each square, and internal board state
	**/
	function onSquareClick(index) {
	const row = Math.floor(index / 3);
	const column = index % 3;
	const square = document.getElementById(`${index}`);

	square.innerHTML = currentMove;
	square.disabled = true;

	if (currentMove === "X") {
	square.style.backgroundColor = "#FFC300";
	boardState[row][column] = 88; // char code for "X"
	} else if (currentMove === "O") {
	square.style.backgroundColor = "#FF5733";
	boardState[row][column] = 79; // char code for "O"
	}

	totalMoves++;

	if (checkForWinner(row, column)) {
	alert(`${currentMove} has won the game!`);
	location.reload();
	} else if (totalMoves === 9) {
	alert("The game has ended in a tie!");
	location.reload();
	}

	currentMove = currentMove === "X" ? "O" : "X";
	}

	/**
	* Evaluates the game board to see if there has been a winner.
	**/
	function checkForWinner(row, column) {
	const charCode = boardState[row][column];
	return (
	// horizontal check
	(boardState[row][0] === charCode &&
	boardState[row][1] === charCode &&
	boardState[row][2] === charCode) \|\|
	// vertical check
	(boardState[0][column] === charCode &&
	boardState[1][column] === charCode &&
	boardState[2][column] === charCode) \|\|
	// left angle check
	(boardState[0][0] === charCode &&
	boardState[1][1] === charCode &&
	boardState[2][2] === charCode) \|\|
	// right angle check
	(boardState[0][2] === charCode &&
	boardState[1][1] === charCode &&
	boardState[2][0] === charCode)
	);
	}
	</script>
	</body>
	</html>