From 1a91320424509997bd567862fff23bee81fe2685 Mon Sep 17 00:00:00 2001 From: Nate West Date: Mon, 16 Jan 2023 11:45:28 -0600 Subject: [PATCH 1/2] initial commit --- index.html | 22 ++++++++++++++++++---- scripts.js | 15 +++++++++++++++ 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 19d0dee..c914a8f 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,26 @@

Welcome to Tic Tac Toe

- - + + + + + + + + + + + + + + + + - - + + diff --git a/scripts.js b/scripts.js index ba09e74..823286c 100644 --- a/scripts.js +++ b/scripts.js @@ -14,6 +14,9 @@ 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 + +// function handleClick(element){} + 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 @@ -51,6 +54,15 @@ const addMarker = (id) => { // document // .innerHTML + document.getElementById(id).innerHTML = currentMarker; + + /// first-part is where you put the value (holder) + // = is assigning into the holder whatever is on the right side + + // holder = what I want to hold + + // const squares = document.getElementsByTagName("TD") <-- holding all the tds in squares + changeMarker() } @@ -94,6 +106,8 @@ const resetBoard = () => { // document // const +const squares = document.getElementsByTagName("TD"); + // loops over the HTML Collection of TDs and clears out the Xs and Os for (i=0; i < squares.length; i++) { @@ -103,4 +117,5 @@ 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 From 17ebaa2803134e75fbdf3f5663c11d08d5543b06 Mon Sep 17 00:00:00 2001 From: Nate West Date: Tue, 24 Jan 2023 11:32:43 -0600 Subject: [PATCH 2/2] adding win logic --- index.html | 18 +++---- scripts.js | 134 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 97 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index c914a8f..a301d62 100644 --- a/index.html +++ b/index.html @@ -19,23 +19,23 @@

Welcome to Tic Tac Toe

- - - + + + - - - + + + - - - + + +
diff --git a/scripts.js b/scripts.js index 823286c..a4094cd 100644 --- a/scripts.js +++ b/scripts.js @@ -1,22 +1,21 @@ -// *********************** -// INSTRUCTIONS -// *********************** - -// 1. Read the code below one block at a time. -// 2. Look for the @TODOs, and figure out how to fix them. - // 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. let currentMarker = 'X' +let board = [ + ["", "", ""], // <-- Row 1, index 0 + ["", "", ""], // <-- Row 2, index 1 + ["", "", ""] // <-- Row 3, index 2 +] +// checkForWin = () => { +// if (horizontalWin () || verticalWin () || diagonalWin () ) { +// // window.alert("Player " + currentMarker + " won!") +// window.alert('Player ${currentMarker} won!') +// } else { +// changeMarker () +// } +// } -// 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 - -// function handleClick(element){} - 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 @@ -46,24 +45,17 @@ const addMarker = (id) => { console.log(`*** The current marker is: ${currentMarker}. ***`) 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" - // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line: - // = currentMarker - // .getElementById(id) - // document - // .innerHTML - document.getElementById(id).innerHTML = currentMarker; - /// first-part is where you put the value (holder) - // = is assigning into the holder whatever is on the right side + const row = parseInt (id.charAt (0)); - // holder = what I want to hold + const column = parseInt (id.charAt (2)); - // const squares = document.getElementsByTagName("TD") <-- holding all the tds in squares + board[row][column] = currentMarker; - changeMarker() + // changeMarker() + checkForWin() } @@ -82,29 +74,12 @@ const changeMarker = () => { } else { currentMarker = "X" } + checkForWin() } - - - - - - - - - // 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 - - // @TODO-3.5: MIX & MATCH, You will need the following pieces of code to build that line: - // squares - // .getElementsByTagName("TD") - // = - // document - // const const squares = document.getElementsByTagName("TD"); @@ -117,5 +92,72 @@ const squares = document.getElementsByTagName("TD"); // sets the innerHTML to null to replace the "X" or "O" squares[i].innerHTML = null } - currentMarker = 'X' -} \ No newline at end of file + location.reload(); + 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][0] == "O" && board[2][0] == "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; + } + } + + checkForWin = () => { + if (horizontalWin () || verticalWin () || diagonalWin () ) { + // window.alert("Player " + currentMarker + " won!") + window.alert('Player ${currentMarker} won!') + } else { + changeMarker () + } + } \ No newline at end of file