diff --git a/index.html b/index.html new file mode 100644 index 0000000..45ae315 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + +
+

Tic Tac Toe

+

+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..bbc1445 --- /dev/null +++ b/js/main.js @@ -0,0 +1,83 @@ +const cells = document.querySelectorAll(".cell"); +const statusText = document.querySelector("#statusText"); +const restartBtn = document.querySelector("#restartBtn"); +const winConditions = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; +let options = ["", "", "", "", "", "", "", "", ""]; +let currentPlayer = "X"; +let running = false; + +initializeGame(); + +function initializeGame(){ + cells.forEach(cell => cell.addEventListener("click", cellClicked)); + restartBtn.addEventListener("click", restartGame); + statusText.textContent = `${currentPlayer}'s turn`; + running = true; +} +function cellClicked(){ + const cellIndex = this.getAttribute("cellIndex"); + + if(options[cellIndex] != "" || !running){ + return; + } + + updateCell(this, cellIndex); + checkWinner(); +} +function updateCell(cell, index){ + options[index] = currentPlayer; + cell.textContent = currentPlayer; +} +function changePlayer(){ + currentPlayer = (currentPlayer == "X") ? "O" : "X"; + statusText.textContent = `${currentPlayer}'s turn`; +} +function checkWinner(){ + let roundWon = false; + + for(let i = 0; i < winConditions.length; i++){ + const condition = winConditions[i]; + const cellA = options[condition[0]]; + const cellB = options[condition[1]]; + const cellC = options[condition[2]]; + + if(cellA == "" || cellB == "" || cellC == ""){ + continue; + } + if(cellA == cellB && cellB == cellC){ + roundWon = true; + break; + } + } + + if(roundWon){ + statusText.textContent = `${currentPlayer} wins!`; + running = false; + } + else if(!options.includes("")){ + statusText.textContent = `Draw!`; + running = false; + } + else{ + changePlayer(); + } +} +function restartGame(){ + currentPlayer = "X"; + options = ["", "", "", "", "", "", "", "", ""]; + statusText.textContent = `${currentPlayer}'s turn`; + cells.forEach(cell => cell.textContent = ""); + running = true; +} + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f772a0f --- /dev/null +++ b/styles.css @@ -0,0 +1,51 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Helvetica; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #0095ff; +} + +.cell{ + width: 75px; + height: 75px; + border: 2px solid; + box-shadow: 0 0 0 2px; + line-height: 75px; + font-size: 50px; + cursor: pointer; +} + + +#gameContainer{ + font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + +} +#cellContainer{ + display: grid; + grid-template-columns: repeat(3, auto); + width: 225px; + margin: auto; +} + +button { + padding: 10px 30px; + margin-top: 30px; + border: none; + border-radius: 5px; + background-color: #000; + color: #fff; + text-transform: uppercase; +} \ No newline at end of file