From fe146e25d481fdd382837a8793f95207c183c49e Mon Sep 17 00:00:00 2001 From: Kd125 Date: Wed, 18 Jan 2023 17:36:43 -0600 Subject: [PATCH 1/3] new update --- dom-tictactoe.js | 45 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b5c261b..144db2a 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -30,7 +30,8 @@ const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) // @TODO, Mix & Match. // You will need the following pieces: - + const clickedElement = document.getElementById(id); + clickedElement.innerHTML = currentMarker; // = currentMarker // .getElementById(id) // document @@ -43,11 +44,14 @@ const addMarker = (id) => { // passes the element's id attribute from HTML to be used const updateBoard = (id) => { // parses the id string into a number then captures the first and last part of the newly created number as row & column - const row = parseInt(id.charAt(0)) - const column = parseInt(id.charAt(2)) + const row = parseInt(id.charAt(0)); + const column = parseInt(id.charAt(2)); + + console.log(`you clicked the sq at ${row} and ${column}`); + console.log(board); + + - console.log(`you clicked the sq at ${row} and ${column}`) - console.log(board) // @TODO, Your code here: use the above information to change the board variable(array of arrays) // HINT: in your browser open up the dev tools -> console @@ -65,15 +69,40 @@ const checkForWin = () => { } const horizontalWin = () => { - // @TODO, Your code here: to check for horizontal wins + 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") + || (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") + || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O") + || (board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") + || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) + { + window.alert("Congrats! You Won!") + } + else{} } const verticalWin = () => { - // @TODO, Your code here: to check for vertical wins + 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") + || (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") + || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O") + || (board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") + || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) + { + window.alert("Congrats! You Won!") + } } const diagonalWin = () => { - // @TODO, Your code here: to check for diagonal wins + 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") + || (board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X") + || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O") + || (board[2][2] == "X" && board[1][1] == "X" && board[0][2] == "X") + || (board[2][2] == "O" && board[1][1] == "O" && board[0][2] == "O")) + { + window.alert("Congrats! You Won!") + } } const changeMarker = () => { From 8b67aa067e68859aa3b8ac7c232669216a663abd Mon Sep 17 00:00:00 2001 From: Kd125 Date: Wed, 18 Jan 2023 18:53:34 -0600 Subject: [PATCH 2/3] new commit --- dom-tictactoe.js | 39 ++++++++++++++------------------------- index.html | 1 + 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 144db2a..004814c 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -22,20 +22,15 @@ const handleClick = (element) => { if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) updateBoard(element.id) - checkForWin() + } } const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) - // @TODO, Mix & Match. - // You will need the following pieces: + const clickedElement = document.getElementById(id); clickedElement.innerHTML = currentMarker; - // = currentMarker - // .getElementById(id) - // document - // .innerHTML // Arrange the above pieces into a single line of code // to add an X or O to the board to the DOM so it can be scene on the screen. @@ -48,12 +43,10 @@ const updateBoard = (id) => { const column = parseInt(id.charAt(2)); console.log(`you clicked the sq at ${row} and ${column}`); + board[row][column] = currentMarker; console.log(board); + checkForWin(); - - - - // @TODO, Your code here: use the above information to change the board variable(array of arrays) // HINT: in your browser open up the dev tools -> console } @@ -69,40 +62,31 @@ const checkForWin = () => { } const horizontalWin = () => { - if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") + return((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O") || (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O") || (board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) - { - window.alert("Congrats! You Won!") - } - else{} } const verticalWin = () => { - if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") + return((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O") || (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O") || (board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) - { - window.alert("Congrats! You Won!") - } + } const diagonalWin = () => { - if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") + return((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O") || (board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O") || (board[2][2] == "X" && board[1][1] == "X" && board[0][2] == "X") || (board[2][2] == "O" && board[1][1] == "O" && board[0][2] == "O")) - { - window.alert("Congrats! You Won!") - } } const changeMarker = () => { @@ -122,7 +106,12 @@ const resetBoard = () => { console.log(squares[i]) squares[i].innerHTML = null } - + + board = [ + ['','',''], + ['','',''], + ['','',''] + ]; // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game } diff --git a/index.html b/index.html index 10a15d1..80e3a4d 100644 --- a/index.html +++ b/index.html @@ -38,5 +38,6 @@

Welcome to Tic Tac Toe

+ From fedbe80f2ca3996960f89cad115da812bf376705 Mon Sep 17 00:00:00 2001 From: Kd125 Date: Wed, 18 Jan 2023 20:03:57 -0600 Subject: [PATCH 3/3] New updates --- dom-tictactoe.js | 2 -- main.js | 32 ++++++++++++++++++++++++++------ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 004814c..19cb2be 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -53,10 +53,8 @@ const updateBoard = (id) => { const checkForWin = () => { // calls each checkForWin possibility and if any are true gives a page alert, if(horizontalWin() || verticalWin() || diagonalWin()) { - // **BONUS** you could make the dismissal of this alert window reset the board... window.alert(`Player ${currentMarker} won!`) } else { - // if no win, change the marker from X to O, or O to X for the next player. changeMarker() } } diff --git a/main.js b/main.js index 96293a9..34c4e21 100644 --- a/main.js +++ b/main.js @@ -33,24 +33,44 @@ const printBoard = () => { } const horizontalWin = () => { - // Your code here to check for horizontal wins + return((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") + || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O") + || (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") + || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O") + || (board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") + || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) } const verticalWin = () => { - // Your code here to check for vertical wins + return((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") + || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O") + || (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") + || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O") + || (board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") + || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) } const diagonalWin = () => { - // Your code here to check for diagonal wins + return((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") + || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O") + || (board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X") + || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O") + || (board[2][2] == "X" && board[1][1] == "X" && board[0][2] == "X") + || (board[2][2] == "O" && board[1][1] == "O" && board[0][2] == "O")) } + const checkForWin = () => { - // Your code here call each of the check for types of wins + return(horizontalWin() || verticalWin() || diagonalWin()) } const ticTacToe = (row, column) => { - // Your code here to place a marker on the board - // then check for a win + + board[row][column] = playerTurn; + if(!checkForWin()){ + playerTurn = playerTurn === "X" ? "O" : "X" + } + } const getPrompt = () => {