From 1b94efbef0863b167d783d83967926dfe9a23462 Mon Sep 17 00:00:00 2001 From: John Redden Date: Tue, 29 Dec 2020 23:31:50 -0500 Subject: [PATCH 1/3] Finished Tic Tac Toe game --- index.html | 26 ++++++++++++++++ script.js | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 74 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..35ced0e --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + +
+

Tic Tac Toe

+

Player 1's Turn

+
+
?
+
?
+
?
+
?
+
?
+
?
+
?
+
?
+
?
+
+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..21bc898 --- /dev/null +++ b/script.js @@ -0,0 +1,90 @@ + +let playerSymbol = "X"; + +function playerSwitch(){ + if(document.getElementById("title").innerText === "Player 1's Turn"){ + document.getElementById("title").innerText = "Player 2's Turn"; + playerSymbol = "O"; + } else if (document.getElementById("title").innerText === "Player 2's Turn"){ + document.getElementById("title").innerText = "Player 1's Turn"; + playerSymbol = "X"; + } +} + +function checkForWinner(){ + if(document.getElementById("topLeft").innerText === "X" && document.getElementById("topCenter").innerText === "X" && document.getElementById("topRight").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("topLeft").innerText === "O" && document.getElementById("topCenter").innerText === "O" && document.getElementById("topRight").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("centerLeft").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("centerRight").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("centerLeft").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("centerRight").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("bottomLeft").innerText === "X" && document.getElementById("bottomCenter").innerText === "X" && document.getElementById("bottomRight").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("bottomLeft").innerText === "O" && document.getElementById("bottomCenter").innerText === "O" && document.getElementById("bottomRight").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("topLeft").innerText === "X" && document.getElementById("centerLeft").innerText === "X" && document.getElementById("bottomLeft").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("topLeft").innerText === "O" && document.getElementById("centerLeft").innerText === "O" && document.getElementById("bottomLeft").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("topCenter").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("bottomCenter").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("topCenter").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("bottomCenter").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("topRight").innerText === "X" && document.getElementById("centerRight").innerText === "X" && document.getElementById("bottomRight").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("topRight").innerText === "O" && document.getElementById("centerRight").innerText === "O" && document.getElementById("bottomRight").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("topLeft").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("bottomRight").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("topLeft").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("bottomRight").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } else if(document.getElementById("topRight").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("bottomLeft").innerText === "X"){ + document.getElementById("title").innerText = "Player 1 Wins!"; + } else if(document.getElementById("topRight").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("bottomLeft").innerText === "O"){ + document.getElementById("title").innerText = "Player 2 Wins!"; + } +} + +function addSymbol(event){ + if(event.currentTarget.innerText !== "X" && event.currentTarget.innerText !== "O"){ + if(playerSymbol === "X"){ + event.currentTarget.innerText = `${playerSymbol}`; + event.currentTarget.style.color = "blue"; + } else if (playerSymbol === "O"){ + event.currentTarget.innerText = `${playerSymbol}`; + event.currentTarget.style.color = "red"; + } + playerSwitch(); + checkForWinner(); + } +}; + +document.querySelectorAll(".grid-item").forEach(item => { + item.addEventListener("click", addSymbol) +}); + +function clearBoard(){ + playerSymbol = "X"; + winner = false; + document.getElementById("title").innerText = "Player 1's Turn"; + document.getElementById("topLeft").style.color = "white"; + document.getElementById("topLeft").innerText = "?"; + document.getElementById("topCenter").style.color = "white"; + document.getElementById("topCenter").innerText = "?"; + document.getElementById("topRight").style.color = "white"; + document.getElementById("topRight").innerText = "?"; + document.getElementById("centerLeft").style.color = "white"; + document.getElementById("centerLeft").innerText = "?"; + document.getElementById("center").style.color = "white"; + document.getElementById("center").innerText = "?"; + document.getElementById("centerRight").style.color = "white"; + document.getElementById("centerRight").innerText = "?"; + document.getElementById("bottomLeft").style.color = "white"; + document.getElementById("bottomLeft").innerText = "?"; + document.getElementById("bottomCenter").style.color = "white"; + document.getElementById("bottomCenter").innerText = "?"; + document.getElementById("bottomRight").style.color = "white"; + document.getElementById("bottomRight").innerText = "?"; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..298769f --- /dev/null +++ b/style.css @@ -0,0 +1,74 @@ +.grid-container { + display: grid; + grid-template-columns: auto auto auto; + background-color: #ffffff; + padding: 10px; +} + +.grid-item { + background-color: rgba(255, 255, 255, 0.8); + border: 5px solid rgb(0, 0, 0); + padding: 20px; + font-size: 50px; + font-weight: bold; + text-align: center; + color: white; +} + +#container { + width: 500px; + margin: auto; +} + +h1, #title { + text-align: center; +} + +#topLeft { + border-top: none; + border-left: none; +} + +#topCenter { + border-top: none; +} + +#topRight { + border-top: none; + border-right: none; +} + +#centerLeft { + border-left: none; +} + +/* #center { + +} */ + +#centerRight { + border-right: none; +} + +#bottomLeft { + border-bottom: none; + border-left: none; +} + +#bottomCenter { + border-bottom: none; +} + +#bottomRight { + border-bottom: none; + border-right: none; +} + +button { + background-color: lightblue; + border-color: steelblue; + height: 30px; + width: 100px; + margin: 25px auto; + display: block; +} \ No newline at end of file From ebc51fcab09bd072dac3d7d8d364309a017edc3e Mon Sep 17 00:00:00 2001 From: John Redden Date: Thu, 7 Jan 2021 20:20:05 -0500 Subject: [PATCH 2/3] Fixed a bug and added text for a draw --- index.html | 2 +- script.js | 74 ++++++++++++++++++++++++------------------------------ style.css | 10 +++----- 3 files changed, 37 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 35ced0e..f87d91b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@

Tic Tac Toe

-

Player 1's Turn

+

Player X's Turn

?
?
diff --git a/script.js b/script.js index 21bc898..4ad3ad1 100644 --- a/script.js +++ b/script.js @@ -1,54 +1,47 @@ - let playerSymbol = "X"; function playerSwitch(){ - if(document.getElementById("title").innerText === "Player 1's Turn"){ - document.getElementById("title").innerText = "Player 2's Turn"; + if(document.getElementById("title").innerText === "Player X's Turn"){ + document.getElementById("title").innerText = "Player O's Turn"; playerSymbol = "O"; - } else if (document.getElementById("title").innerText === "Player 2's Turn"){ - document.getElementById("title").innerText = "Player 1's Turn"; + } else if (document.getElementById("title").innerText === "Player O's Turn"){ + document.getElementById("title").innerText = "Player X's Turn"; playerSymbol = "X"; } } function checkForWinner(){ - if(document.getElementById("topLeft").innerText === "X" && document.getElementById("topCenter").innerText === "X" && document.getElementById("topRight").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("topLeft").innerText === "O" && document.getElementById("topCenter").innerText === "O" && document.getElementById("topRight").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("centerLeft").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("centerRight").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("centerLeft").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("centerRight").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("bottomLeft").innerText === "X" && document.getElementById("bottomCenter").innerText === "X" && document.getElementById("bottomRight").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("bottomLeft").innerText === "O" && document.getElementById("bottomCenter").innerText === "O" && document.getElementById("bottomRight").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("topLeft").innerText === "X" && document.getElementById("centerLeft").innerText === "X" && document.getElementById("bottomLeft").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("topLeft").innerText === "O" && document.getElementById("centerLeft").innerText === "O" && document.getElementById("bottomLeft").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("topCenter").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("bottomCenter").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("topCenter").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("bottomCenter").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("topRight").innerText === "X" && document.getElementById("centerRight").innerText === "X" && document.getElementById("bottomRight").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("topRight").innerText === "O" && document.getElementById("centerRight").innerText === "O" && document.getElementById("bottomRight").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("topLeft").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("bottomRight").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("topLeft").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("bottomRight").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; - } else if(document.getElementById("topRight").innerText === "X" && document.getElementById("center").innerText === "X" && document.getElementById("bottomLeft").innerText === "X"){ - document.getElementById("title").innerText = "Player 1 Wins!"; - } else if(document.getElementById("topRight").innerText === "O" && document.getElementById("center").innerText === "O" && document.getElementById("bottomLeft").innerText === "O"){ - document.getElementById("title").innerText = "Player 2 Wins!"; + if(document.getElementById("topLeft").innerText === document.getElementById("topCenter").innerText && document.getElementById("topLeft").innerText === document.getElementById("topRight").innerText && document.getElementById("topRight").innerText !== "?"){ + playerSymbol = document.getElementById("topLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("centerLeft").innerText === document.getElementById("center").innerText && document.getElementById("centerLeft").innerText === document.getElementById("centerRight").innerText && document.getElementById("centerLeft").innerText !== "?"){ + playerSymbol = document.getElementById("centerLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("bottomLeft").innerText === document.getElementById("bottomCenter").innerText && document.getElementById("bottomLeft").innerText === document.getElementById("bottomRight").innerText && document.getElementById("bottomLeft").innerText !== "?"){ + playerSymbol = document.getElementById("bottomLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topLeft").innerText === document.getElementById("centerLeft").innerText && document.getElementById("topLeft").innerText === document.getElementById("bottomLeft").innerText && document.getElementById("topLeft").innerText !== "?"){ + playerSymbol = document.getElementById("topLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topCenter").innerText === document.getElementById("center").innerText && document.getElementById("topCenter").innerText === document.getElementById("bottomCenter").innerText && document.getElementById("topCenter").innerText !== "?"){ + playerSymbol = document.getElementById("topCenter").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topRight").innerText === document.getElementById("centerRight").innerText && document.getElementById("topRight").innerText === document.getElementById("bottomRight").innerText && document.getElementById("topRight").innerText !== "?"){ + playerSymbol = document.getElementById("topRight").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topLeft").innerText === document.getElementById("center").innerText && document.getElementById("topLeft").innerText === document.getElementById("bottomRight").innerText && document.getElementById("topLeft").innerText !== "?"){ + playerSymbol = document.getElementById("topLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topRight").innerText === document.getElementById("center").innerText && document.getElementById("topRight").innerText === document.getElementById("bottomLeft").innerText && document.getElementById("topRight").innerText !== "?"){ + playerSymbol = document.getElementById("topRight").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topLeft").innerText !== "?" && document.getElementById("topCenter").innerText !== "?" && document.getElementById("topRight").innerText !== "?" && document.getElementById("centerLeft").innerText !== "?" && document.getElementById("center").innerText !== "?" && document.getElementById("centerRight").innerText !== "?" && document.getElementById("bottomLeft").innerText !== "?" && document.getElementById("bottomCenter").innerText !== "?" && document.getElementById("bottomRight").innerText !== "?"){ + document.getElementById("title").innerText = "It's a draw!"; } } function addSymbol(event){ - if(event.currentTarget.innerText !== "X" && event.currentTarget.innerText !== "O"){ + if(event.currentTarget.innerText !== "X" && event.currentTarget.innerText !== "O" && document.getElementById("title").innerText === "Player X's Turn" || document.getElementById("title").innerText === "Player O's Turn"){ if(playerSymbol === "X"){ event.currentTarget.innerText = `${playerSymbol}`; event.currentTarget.style.color = "blue"; @@ -62,13 +55,12 @@ function addSymbol(event){ }; document.querySelectorAll(".grid-item").forEach(item => { - item.addEventListener("click", addSymbol) + item.addEventListener("click", addSymbol) }); function clearBoard(){ playerSymbol = "X"; - winner = false; - document.getElementById("title").innerText = "Player 1's Turn"; + document.getElementById("title").innerText = "Player X's Turn"; document.getElementById("topLeft").style.color = "white"; document.getElementById("topLeft").innerText = "?"; document.getElementById("topCenter").style.color = "white"; diff --git a/style.css b/style.css index 298769f..a1b9ce1 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,13 @@ .grid-container { display: grid; grid-template-columns: auto auto auto; - background-color: #ffffff; + background-color: white; padding: 10px; } .grid-item { - background-color: rgba(255, 255, 255, 0.8); - border: 5px solid rgb(0, 0, 0); + background-color: white; + border: 5px solid black; padding: 20px; font-size: 50px; font-weight: bold; @@ -42,10 +42,6 @@ h1, #title { border-left: none; } -/* #center { - -} */ - #centerRight { border-right: none; } From da61a5dc324ae8d605cf5390f8186106cfa9f597 Mon Sep 17 00:00:00 2001 From: John Redden Date: Fri, 8 Jan 2021 15:58:08 -0500 Subject: [PATCH 3/3] Simplified the clearBoard function --- script.js | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/script.js b/script.js index 4ad3ad1..5c0ac20 100644 --- a/script.js +++ b/script.js @@ -11,7 +11,7 @@ function playerSwitch(){ } function checkForWinner(){ - if(document.getElementById("topLeft").innerText === document.getElementById("topCenter").innerText && document.getElementById("topLeft").innerText === document.getElementById("topRight").innerText && document.getElementById("topRight").innerText !== "?"){ + if(document.getElementById("topLeft").innerText === document.getElementById("topCenter").innerText && document.getElementById("topLeft").innerText === document.getElementById("topRight").innerText && document.getElementById("topLeft").innerText !== "?"){ playerSymbol = document.getElementById("topLeft").innerText; document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; } else if(document.getElementById("centerLeft").innerText === document.getElementById("center").innerText && document.getElementById("centerLeft").innerText === document.getElementById("centerRight").innerText && document.getElementById("centerLeft").innerText !== "?"){ @@ -61,22 +61,6 @@ document.querySelectorAll(".grid-item").forEach(item => { function clearBoard(){ playerSymbol = "X"; document.getElementById("title").innerText = "Player X's Turn"; - document.getElementById("topLeft").style.color = "white"; - document.getElementById("topLeft").innerText = "?"; - document.getElementById("topCenter").style.color = "white"; - document.getElementById("topCenter").innerText = "?"; - document.getElementById("topRight").style.color = "white"; - document.getElementById("topRight").innerText = "?"; - document.getElementById("centerLeft").style.color = "white"; - document.getElementById("centerLeft").innerText = "?"; - document.getElementById("center").style.color = "white"; - document.getElementById("center").innerText = "?"; - document.getElementById("centerRight").style.color = "white"; - document.getElementById("centerRight").innerText = "?"; - document.getElementById("bottomLeft").style.color = "white"; - document.getElementById("bottomLeft").innerText = "?"; - document.getElementById("bottomCenter").style.color = "white"; - document.getElementById("bottomCenter").innerText = "?"; - document.getElementById("bottomRight").style.color = "white"; - document.getElementById("bottomRight").innerText = "?"; + document.querySelectorAll(".grid-item").forEach(item => item.innerText = "?"); + document.querySelectorAll(".grid-item").forEach(item => item.style.color = "white"); } \ No newline at end of file