wdi-sg · jarryll · Aug 13, 2020 · Aug 14, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Tic Tac Toe</title>
+</head>
+<body>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,135 @@
+//Action to load Gameboard
+window.onload = function() {
+    initBoard();
+    var makeSelection = function() {
+        if (event.target.innerHTML === "X" || event.target.innerHTML === "O") {
+            return;
+        }
+// Switch statement to control if mark made is noughts or crosses
+        switch (turnCounter%2) {
+        case 0:
+            event.target.innerHTML = "X"
+            updateBoard();
+            currentPlayer = "X"
+            break;
+        case 1:
+            event.target.innerHTML = "O"
+            updateBoard();
+            currentPlayer = "O"
+            break;
+        }
+    turnCounter++;
+    checkWin();
+    }
+        document.querySelectorAll(".game-square").forEach(function(button, i){
+            button.addEventListener('click', makeSelection);
+            button.id = "square" + [i];
+    });
+}
+
+//Function to initiate Gameboard
+var initBoard = function(){
+    var title = document.createElement("h1");
+    var body = document.querySelector('body')
+    title.innerText = "Tic Tac Toe";
+    body.appendChild(title);
+
+    var board = document.createElement("div");
+    board.id = "board";
+    body.appendChild(board);
+
+    for (var i = 0; i < 3; i++) {
+    var gameRow = document.createElement("div");
+    gameRow.className += "game-row";
+    board.appendChild(gameRow);
+
+    var gameSquare = document.createElement("span");
+    gameSquare.className += "game-square";
+    gameRow.appendChild(gameSquare);
+
+    var gameSquare = document.createElement("span");
+    gameSquare.className += "game-square";
+    gameRow.appendChild(gameSquare);
+
+    var gameSquare = document.createElement("span");
+    gameSquare.className += "game-square";
+    gameRow.appendChild(gameSquare);
+    }
+}
+
+//Global variables
+var gameSquare = document.querySelector(".game-square");
+var turnCounter = 0;
+var gameBoard = [
+    [null, null, null],
+    [null, null, null],
+    [null, null, null],
+];
+
+var winner = null;
+var currentPlayer = "X";
+var square0 = gameBoard[0][0];
+var square1 = gameBoard[0][1];
+var square2 = gameBoard[0][2];
+var square3 = gameBoard[1][0];
+var square4 = gameBoard[1][1];
+var square5 = gameBoard[1][2];
+var square6 = gameBoard[2][0];
+var square7 = gameBoard[2][1];
+var square8 = gameBoard[2][2];
+
+
+// Function to loop through the Game Board and check if win conditions are met.
+ var checkWin = function() {
+    handleWinner();
+    for (var i = 0; i < gameBoard.length; i++) {
+        //check for vertical wins
+       if (gameBoard[0][i] === currentPlayer &&  gameBoard[0][i] === gameBoard[1][i] && gameBoard[0][i] === gameBoard[2][i]){
+                winner = currentPlayer
+            }
+        //check for horizontal wins
+       if (gameBoard[i][0] === currentPlayer && gameBoard[i][0] === gameBoard[i][1] && gameBoard[i][1]=== gameBoard[i][2]){
+                winner = currentPlayer
+                console.log(winner, currentPlayer);
+            }
+    }
+    //Check for diagonal wins
+    if (gameBoard[0] === currentPlayer && gameBoard[0] === gameBoard[4] && gameBoard[4]===gameBoard[8]) {
+        winner = currentPlayer;
+    }
+    if (gameBoard[2] === currentPlayer && gameBoard[2] === gameBoard[4] && gameBoard[4]===gameBoard[6]) {
+        winner = currentPlayer;
+    }
+    console.log("checkWin function was triggered", winner);
+}
+
+
+var handleWinner = function() {
+    if (winner !== null) {
+        turnCounter = 0
+    }
+    console.log("HandleWinner was triggered", turnCounter);
+}
+
+
+var updateBoard = function() {
+    if (event.target.id === "square0") {
+        square0 = event.target.innerHTML;
+    } else if (event.target.id === "square1") {
+        square1 = event.target.innerHTML;
+    } else if (event.target.id === "square2") {
+        square2 = event.target.innerHTML;
+    } else if (event.target.id === "square3") {
+        square3 = event.target.innerHTML;
+    } else if (event.target.id === "square4") {
+        square4 = event.target.innerHTML;
+    } else if (event.target.id === "square5") {
+        square5 = event.target.innerHTML;
+    } else if (event.target.id === "square6") {
+        square6 = event.target.innerHTML;
+    } else if (event.target.id === "square7") {
+        square7 = event.target.innerHTML;
+    } else if (event.target.id === "square7") {
+        square8 = event.target.innerHTML;
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,85 @@
+/*button {
+    width: 100px;
+    height: 100px;
+    font-size: 30px;
+    color: red;
+    padding: 0;
+    margin: 0;
+  }
+
+h1 {
+	text-align: center;
+	font-family: helvetica, sans serif;
+}
+
+.container{
+	width: 100%;
+	overflow-x:hidden;
+}
+
+div div{
+	position: relative;
+	left:50%;
+	margin-left: -150px;
+	width: 100%;
+}*/
+
+body{
+	box-sizing: border-box;
+	font-family: helvetica;
+}
+
+span {
+	border: 2px solid red;
+	cursor: pointer;
+}
+
+#board {
+	width: 400px;
+	height: 400px;
+	margin:0;
+	padding:0;
+}
+
+.game-row{
+	width: 100%;
+}
+
+.game-square {
+	display:inline-block;
+	height: 120px;
+	width: 120px;
+	overflow: hidden;
+}
+
+
+span:first-child{
+	border-left: 0;
+}
+
+span:last-child{
+	border-right: 0;
+}
+
+span{
+	margin: 0 auto;
+	text-align: center;
+	font-size: 30px;
+
+}
+
+div div:nth-child(2) span {
+	border-top:0;
+	border-right:0;
+}
+
+div div:last-child span {
+	border-top:0;
+	border-bottom:0;
+	border-right: 0;
+}
+
+div div:first-child span {
+	border-top:0;
+	border-right:0;
+}