diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..c800416 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -30,12 +30,12 @@ const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) // @TODO, Mix & Match. // You will need the following pieces: - + document.getElementById(id).innerHTML = currentMarker // = currentMarker // .getElementById(id) // document // .innerHTML - + // Arrange the above pieces into one 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. } @@ -45,11 +45,12 @@ const updateBoard = (id) => { // parses the id string into a number then captures the first and last part the newly create number as row & column 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) // @TODO, Your code here: use the above information to change the board variable(array of arrays) + board[row][column] = currentMarker + // HINT: in your browser open up the dev tools -> console } @@ -61,20 +62,46 @@ const checkForWin = () => { } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() - } + } } const horizontalWin = () => { - // @TODO, Your code here: to check for horizontal wins -} - -const verticalWin = () => { - // @TODO, Your code here: to check for vertical wins + // 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")) { + 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 diagonalWin = () => { - // @TODO, Your code here: to check for diagonal wins -} + const verticalWin = () => { + // 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")) { + 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 = () => { + // 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")) { + 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 changeMarker = () => { // ternary operator: if it's an X make it an O, if O make it an X @@ -95,6 +122,12 @@ const resetBoard = () => { } // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game + board = [ + ["", "", ""], + ["", "", ""], + ["", "", ""] +] + } // **BONUSES** diff --git a/index.html b/index.html index 10a15d1..8538886 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,7 @@ - - +