From 1d97386a3303da873fa95aa8c20f2ac7ebc6821c Mon Sep 17 00:00:00 2001 From: amolin09 Date: Wed, 8 Feb 2023 19:08:05 -0600 Subject: [PATCH 1/4] added other rows, added restart function --- index.html | 16 ++++++++++++++-- scripts.js | 4 ++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 19d0dee..d1f254f 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,20 @@

Welcome to Tic Tac Toe

- - + + + + + + + + + + + + + + diff --git a/scripts.js b/scripts.js index ba09e74..7d5c6ac 100644 --- a/scripts.js +++ b/scripts.js @@ -44,7 +44,7 @@ const addMarker = (id) => { console.log(`Therefore, a "${currentMarker}" should be placed in the square with the id: ${id}`) // @TODO-2: Build a line of code that will set the innerHTML property of the element that was clicked to the "currentMarker" - + document.getElementById(id).innerHTML = currentMarker // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line: // = currentMarker // .getElementById(id) @@ -86,7 +86,7 @@ const resetBoard = () => { // @TODO-3: To make your "Restart" button work you'll need to build a line of code here that: // collects all of the "td" elements into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp - + const squares = document.getElementsByTagName("TD") // @TODO-3.5: MIX & MATCH, You will need the following pieces of code to build that line: // squares // .getElementsByTagName("TD") From 08e72fc60f183190fe6d12d3a58704fd169fd517 Mon Sep 17 00:00:00 2001 From: amolin09 Date: Wed, 22 Feb 2023 19:30:36 -0600 Subject: [PATCH 2/4] push for branch --- index.html | 4 ++-- scripts.js | 25 ++----------------------- tictactoe.css | 1 + 3 files changed, 5 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index d1f254f..defb1c9 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
@@ -19,7 +19,7 @@

Welcome to Tic Tac Toe

- + diff --git a/scripts.js b/scripts.js index 7d5c6ac..88051da 100644 --- a/scripts.js +++ b/scripts.js @@ -27,15 +27,6 @@ const handleClick = (element) => { } - - - - - - - - - // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. const addMarker = (id) => { @@ -56,13 +47,6 @@ const addMarker = (id) => { - - - - - - - // This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" const changeMarker = () => { if(currentMarker === "X"){ @@ -74,13 +58,6 @@ const changeMarker = () => { - - - - - - - // This "resetBoard" function is called when the user clicks on the "Restart" button. const resetBoard = () => { @@ -103,4 +80,6 @@ const resetBoard = () => { // sets the innerHTML to null to replace the "X" or "O" squares[i].innerHTML = null } + + currentMarker = "X" } \ No newline at end of file diff --git a/tictactoe.css b/tictactoe.css index 981de05..d6da03e 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -13,4 +13,5 @@ td { table { margin: auto auto; + /* color: blue; */ } \ No newline at end of file From ee6977fe221edaa2d55691b24a82e919085929c6 Mon Sep 17 00:00:00 2001 From: amolin09 Date: Wed, 22 Feb 2023 20:23:48 -0600 Subject: [PATCH 3/4] added function to check for winner --- index.html | 20 +++++----- scripts.js | 114 ++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 93 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index defb1c9..ab424f1 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
@@ -19,21 +19,21 @@

Welcome to Tic Tac Toe

- - - + + + - - - + + + - - - + + + diff --git a/scripts.js b/scripts.js index 88051da..4fc3256 100644 --- a/scripts.js +++ b/scripts.js @@ -7,20 +7,17 @@ // next to each @TODO you will find tasks that need to be finished // The variable will change from X to O based on what player turn it is. We need to hold this so we can place an X or O on the board when they're clicked. +const board = [ + ["","",""], + ["","",""], + ["","",""]] let currentMarker = 'X' - - - -// this "handleClick" function is called when a box is clicked. Here, "element" will hold the same value as "this" does in the HTML. -// "this" is a special word in JS but "element" could have been "thing" or "el" or whatever we wanted it to be as long as we use it again in the "console.log" statement const handleClick = (element) => { // this uses the "log" method on the "console" to log out the element's id so we can see it with our human eyes console.log(`The element you clicked on has an id: ${element.id}`) - // this next line prevents an X being changed to an O or an O being changed to an X by... - // checking to see if the square clicked has anything in it, if not continue if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) } @@ -30,19 +27,16 @@ const handleClick = (element) => { // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. const addMarker = (id) => { - // @TODO-1: Open the console tab in your Chrome Inspector Tool and click on the top-left square to see what's logged to the console. - console.log(`*** The current marker is: ${currentMarker}. ***`) - console.log(`Therefore, a "${currentMarker}" should be placed in the square with the id: ${id}`) + // if(currentMarker === 'X'){ + // document.getElementById. + // } - // @TODO-2: Build a line of code that will set the innerHTML property of the element that was clicked to the "currentMarker" + const row = parseInt(id.charAt(0)) + const column = parseInt(id.charAt(2)) + board[row][column]= currentMarker document.getElementById(id).innerHTML = currentMarker - // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line: - // = currentMarker - // .getElementById(id) - // document - // .innerHTML - - changeMarker() + + checkForWin() } @@ -61,25 +55,83 @@ const changeMarker = () => { // This "resetBoard" function is called when the user clicks on the "Restart" button. const resetBoard = () => { - // @TODO-3: To make your "Restart" button work you'll need to build a line of code here that: - // collects all of the "td" elements into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp + const squares = document.getElementsByTagName("TD") - // @TODO-3.5: MIX & MATCH, You will need the following pieces of code to build that line: - // squares - // .getElementsByTagName("TD") - // = - // document - // const - // loops over the HTML Collection of TDs and clears out the Xs and Os for (i=0; i < squares.length; i++) { - - // will log out the id of each square as it loops over them. console.log(squares[i].id) - - // sets the innerHTML to null to replace the "X" or "O" squares[i].innerHTML = null } currentMarker = "X" +} + + + +const checkForWin = () => { + if(horizontalWin() || verticalWin() || diagonalWin()) { + window.alert(`Player ${currentMarker} won!`) + } else { + changeMarker() + + } +} + +const horizontalWin = () => { + if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") + || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")){ + return true + } + + else if((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") + || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")){ + return true + } + + else if((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") + || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")){ + return true + } + + else{ + return false + } +} + +const verticalWin = () => { + if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") + || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")){ + return true + } + + else if((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") + || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")){ + return true + } + + else if((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") + || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")){ + return true + } + + else{ + return false + } + +} + +const diagonalWin = () => { + if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") + || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")){ + return true + } + + else if((board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X") + || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O")){ + return true + } + + else{ + return false + } } \ No newline at end of file From 743d1db2de7a8b6fce396105da1ab1ef18b6805e Mon Sep 17 00:00:00 2001 From: amolin09 Date: Wed, 22 Feb 2023 21:58:47 -0600 Subject: [PATCH 4/4] added check for tie, added timeout for winner or tie alert --- scripts.js | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/scripts.js b/scripts.js index 4fc3256..b07bc9b 100644 --- a/scripts.js +++ b/scripts.js @@ -7,18 +7,20 @@ // next to each @TODO you will find tasks that need to be finished // The variable will change from X to O based on what player turn it is. We need to hold this so we can place an X or O on the board when they're clicked. -const board = [ +let board = [ ["","",""], ["","",""], ["","",""]] let currentMarker = 'X' +let turns = 0 +let gameOver = false const handleClick = (element) => { // this uses the "log" method on the "console" to log out the element's id so we can see it with our human eyes - console.log(`The element you clicked on has an id: ${element.id}`) + // console.log(`The element you clicked on has an id: ${element.id}`) - if(!document.getElementById(element.id).innerHTML){ + if((!document.getElementById(element.id).innerHTML) && (!gameOver)){ addMarker(element.id) } } @@ -37,6 +39,7 @@ const addMarker = (id) => { document.getElementById(id).innerHTML = currentMarker checkForWin() + turns ++ } @@ -59,19 +62,34 @@ const resetBoard = () => { const squares = document.getElementsByTagName("TD") for (i=0; i < squares.length; i++) { - console.log(squares[i].id) + // console.log(squares[i].id) squares[i].innerHTML = null } + board = [ + ["","",""], + ["","",""], + ["","",""]] currentMarker = "X" + gameOver = false + turns = 0 } const checkForWin = () => { if(horizontalWin() || verticalWin() || diagonalWin()) { - window.alert(`Player ${currentMarker} won!`) - } else { + gameOver = true + + + setTimeout(function() {window.alert(`Player ${currentMarker} won! Click Restart to play again!`)}, 100) + } + + else if(turns === 8){ + gameOver = true + setTimeout(function() {window.alert('It is a tie! Click Restart to play again!')}, 100) + } + else { changeMarker() }