From f80200004f4432b75bcbbd1a87a07c2bbd26761c Mon Sep 17 00:00:00 2001 From: sashagarsson Date: Mon, 16 Jan 2023 11:28:23 -0600 Subject: [PATCH 1/3] TicTacToe-101 --- index.html | 20 ++++++++++++++++++-- scripts.js | 4 ++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 19d0dee..89cbbbf 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,24 @@

Welcome to Tic Tac Toe

- - + + + + + + + + + + + + + + + + + + diff --git a/scripts.js b/scripts.js index ba09e74..281bf8a 100644 --- a/scripts.js +++ b/scripts.js @@ -9,6 +9,7 @@ // 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 curr @@ -51,6 +52,7 @@ const addMarker = (id) => { // document // .innerHTML + document.getElementById(id).innerHTML = currentMarker; changeMarker() } @@ -94,6 +96,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++) { From 871bd96edd0c12f428bc61c8f607bf649b265c2e Mon Sep 17 00:00:00 2001 From: sashagarsson Date: Tue, 24 Jan 2023 09:22:21 -0600 Subject: [PATCH 2/3] TicTacToe-101 --- .vscode/settings.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..4c7ff40 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 -} \ No newline at end of file + "liveServer.settings.port": 5502 +} From 2f60f5a3be2fceb79d9dfc906455ca918db65dde Mon Sep 17 00:00:00 2001 From: sashagarsson Date: Tue, 24 Jan 2023 11:32:44 -0600 Subject: [PATCH 3/3] adding win logic --- index.html | 18 +++---- scripts.js | 135 ++++++++++++++++++++++++++--------------------------- 2 files changed, 76 insertions(+), 77 deletions(-) diff --git a/index.html b/index.html index 89cbbbf..1898873 100644 --- a/index.html +++ b/index.html @@ -19,24 +19,24 @@

Welcome to Tic Tac Toe

- - - + + + - - - + + + - - - + + + diff --git a/scripts.js b/scripts.js index 281bf8a..ad5c982 100644 --- a/scripts.js +++ b/scripts.js @@ -1,110 +1,109 @@ -// *********************** -// 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 curr - - - -// 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 +let board = [ + ["", "", ""], // <-- Row 1, index 0 + ["", "", ""], // <-- Row 2, index 1 + ["", "", ""] // <-- Row 3, index 2 +] 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) } + } - - - - - - - - - - -// 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}`) - - // @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; - changeMarker() -} - - - + const row = parseInt(id.charAt(0)); +const column = parseInt(id.charAt(2)); - - - - -// This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" +board[row][column] = currentMarker; + checkForWin() + // changeMarker() +} const changeMarker = () => { if(currentMarker === "X"){ currentMarker = "O" } 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") ; - // 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 } -} \ 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][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; } + +} + +checkForWin = () => { + if (horizontalWin() || verticalWin() || diagonalWin()) { + // window.alert("Player " + currentMarker + " won!") + window.alert(`Player ${currentMarker} won!`) + } + else { + changeMarker() + } + } + \ No newline at end of file