robotman3000 · March 20, 2024 15:33
diff --git a/index.html b/index.html
 <html>

 <body>
  <div id="wrapper">
    <div id="tictactoe">
      <table>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id='message'>Click start game to begin</div>
    <button class="btn" onclick="startGameClicked()">Start Game</button>
  </div>
 </body>

 </html>
diff --git a/script.js b/script.js
 /*
 * Tic Tac Toe
 *
 * A Tic Tac Toe game in HTML/JavaScript/CSS.
 *
 * @author: Vasanth Krishnamoorthy, Eric Nims
 */
 const BOARD_SIZE = 3;
 const EMPTY = "&nbsp;";
 let boxes = [];
 let turn = "X";
 let moves = 0;
 let gameRunning = false;

 /*
 * Initializes the Tic Tac Toe board.
 */
 function prepareGameBoard() {
  boxes = [];
  var boardContainer = document.getElementById("tictactoe");
  var board = boardContainer.getElementsByTagName("table")[0];
  let rows = board.getElementsByTagName("tr");
  for (var y = 0; y < rows.length; y++) {
    let columns = rows[y].children;
    for (var x = 0; x < columns.length; x++) {
      let cell = columns[x];
      /* 
       Add the css classes that will be used to 
       identify what row, column, and diagonal 
       the cell is part of
      */
      cell.classList.add("col" + y, "row" + x);
      if (x == y) {
        cell.classList.add("diagonal0");
      }
      if (y == BOARD_SIZE - x - 1) {
        cell.classList.add("diagonal1");
      }

      // Add the click event handler
      cell.addEventListener("click", cellClicked);

      // Keep track of the cell for later
      boxes.push(cell);
    }
  }
 }

 /*
 * Starts a new game
 */
 function startNewGame() {
  moves = 0;
  turn = "X";
  boxes.forEach(function (square) {
    square.innerHTML = EMPTY;
  });
  displayMessage("Player X goes first");
  gameRunning = true;
 }

 /*
 * Checks if a win condition has occured or not
 */
 function isGameWon(clickedCell) {
  // Get all cell classes

  var memberOf = clickedCell.className.split(/\s+/);
  for (var i = 0; i < memberOf.length; i++) {
    var testClass = "." + memberOf[i];
    var elements = document.querySelectorAll("#tictactoe " + testClass);
    var items = [].filter.call(elements, function (element) {
      return RegExp(turn).test(element.textContent);
    });

    // winning condition: turn == BOARD_SIZE
    if (items.length == BOARD_SIZE) {
      gameRunning = false;
      return true;
    }
  }
  return false;
 }

 /*
 * Switches the turn to the next player
 */
 function changeTurn() {
  if (turn === "X") {
    turn = "O";
  } else {
    turn = "X";
  }
  displayMessage("Player " + turn);
 }

 /*
 * Marks a cell as owned by the provided player
 */
 function claimCell(cell) {
  if (cell.innerHTML !== EMPTY) {
    return false; // Cell was already claimed by a player
  }
  cell.innerHTML = turn;
  return true; // Cell was free so it was claimed
 }

 /*
 * Displays a message in the "message" div
 */
 function displayMessage(message) {
  document.getElementById("message").textContent = message;
 }

 /*
 * Handles starting a new game
 */
 function startGameClicked() {
  prepareGameBoard();
  startNewGame();
 }

 /*
 * Sets clicked square and also updates the turn.
 */
 function cellClicked(e) {
  if (gameRunning) {
    if (!claimCell(e.target)) {
      // Do nothing if the cell is already claimed
      return;
    }

    // Increment the move count by one
    moves += 1;

    // Check if the game is over
    if (isGameWon(e.target)) {
      displayMessage("Winner: Player " + turn);
    } else if (moves === BOARD_SIZE * BOARD_SIZE) {
      displayMessage("Draw");
    } else {
      changeTurn();
    }
  }
 }
diff --git a/style.css b/style.css
 body {
  margin: 0;
  padding: 0;
  background-color: #112211;
  font-family: sans-serif;
 }

 #wrapper {
  width: 80%;
  margin: 0 auto;
  padding: 1em;
  background-color: #aabbaa;
 }

 #message {
  padding: 1em;
  font-size: x-large;  
 }

 .btn{
  background-color: #11aa11;
  border: 2px solid black;
  border-radius: 25px;
  width: 100%;
  height: 50px;
  font-size: large;
 }

 table {
 	border-collapse:collapse;
  margin: 0 auto;
 }

 td {
  /* Styles */
 	background-color: white;
 	border: 3px solid black;
 	font-size:80px;
 	color:#000000;
 	border-radius: 10px 10px 10px 10px;
  text-align: center;
  width: 120px;
  height: 120px;
 }
diff --git a/tic-tac-toe-challenge-answer.markdown b/tic-tac-toe-challenge-answer.markdown
	<html>

	<body>
	<div id="wrapper">
	<div id="tictactoe">
	<table>
	<tbody>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	</tbody>
	</table>
	</div>
	<div id='message'>Click start game to begin</div>
	<button class="btn" onclick="startGameClicked()">Start Game</button>
	</div>
	</body>

	</html>
	/*
	* Tic Tac Toe
	*
	* A Tic Tac Toe game in HTML/JavaScript/CSS.
	*
	* @author: Vasanth Krishnamoorthy, Eric Nims
	*/
	const BOARD_SIZE = 3;
	const EMPTY = " ";
	let boxes = [];
	let turn = "X";
	let moves = 0;
	let gameRunning = false;

	/*
	* Initializes the Tic Tac Toe board.
	*/
	function prepareGameBoard() {
	boxes = [];
	var boardContainer = document.getElementById("tictactoe");
	var board = boardContainer.getElementsByTagName("table")[0];
	let rows = board.getElementsByTagName("tr");
	for (var y = 0; y < rows.length; y++) {
	let columns = rows[y].children;
	for (var x = 0; x < columns.length; x++) {
	let cell = columns[x];
	/*
	Add the css classes that will be used to
	identify what row, column, and diagonal
	the cell is part of
	*/
	cell.classList.add("col" + y, "row" + x);
	if (x == y) {
	cell.classList.add("diagonal0");
	}
	if (y == BOARD_SIZE - x - 1) {
	cell.classList.add("diagonal1");
	}

	// Add the click event handler
	cell.addEventListener("click", cellClicked);

	// Keep track of the cell for later
	boxes.push(cell);
	}
	}
	}

	/*
	* Starts a new game
	*/
	function startNewGame() {
	moves = 0;
	turn = "X";
	boxes.forEach(function (square) {
	square.innerHTML = EMPTY;
	});
	displayMessage("Player X goes first");
	gameRunning = true;
	}

	/*
	* Checks if a win condition has occured or not
	*/
	function isGameWon(clickedCell) {
	// Get all cell classes

	var memberOf = clickedCell.className.split(/\s+/);
	for (var i = 0; i < memberOf.length; i++) {
	var testClass = "." + memberOf[i];
	var elements = document.querySelectorAll("#tictactoe " + testClass);
	var items = [].filter.call(elements, function (element) {
	return RegExp(turn).test(element.textContent);
	});

	// winning condition: turn == BOARD_SIZE
	if (items.length == BOARD_SIZE) {
	gameRunning = false;
	return true;
	}
	}
	return false;
	}

	/*
	* Switches the turn to the next player
	*/
	function changeTurn() {
	if (turn === "X") {
	turn = "O";
	} else {
	turn = "X";
	}
	displayMessage("Player " + turn);
	}

	/*
	* Marks a cell as owned by the provided player
	*/
	function claimCell(cell) {
	if (cell.innerHTML !== EMPTY) {
	return false; // Cell was already claimed by a player
	}
	cell.innerHTML = turn;
	return true; // Cell was free so it was claimed
	}

	/*
	* Displays a message in the "message" div
	*/
	function displayMessage(message) {
	document.getElementById("message").textContent = message;
	}

	/*
	* Handles starting a new game
	*/
	function startGameClicked() {
	prepareGameBoard();
	startNewGame();
	}

	/*
	* Sets clicked square and also updates the turn.
	*/
	function cellClicked(e) {
	if (gameRunning) {
	if (!claimCell(e.target)) {
	// Do nothing if the cell is already claimed
	return;
	}

	// Increment the move count by one
	moves += 1;

	// Check if the game is over
	if (isGameWon(e.target)) {
	displayMessage("Winner: Player " + turn);
	} else if (moves === BOARD_SIZE * BOARD_SIZE) {
	displayMessage("Draw");
	} else {
	changeTurn();
	}
	}
	}
	body {
	margin: 0;
	padding: 0;
	background-color: #112211;
	font-family: sans-serif;
	}

	#wrapper {
	width: 80%;
	margin: 0 auto;
	padding: 1em;
	background-color: #aabbaa;
	}

	#message {
	padding: 1em;
	font-size: x-large;
	}

	.btn{
	background-color: #11aa11;
	border: 2px solid black;
	border-radius: 25px;
	width: 100%;
	height: 50px;
	font-size: large;
	}

	table {
	border-collapse:collapse;
	margin: 0 auto;
	}

	td {
	/* Styles */
	background-color: white;
	border: 3px solid black;
	font-size:80px;
	color:#000000;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	width: 120px;
	height: 120px;
	}