diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..ac514ac 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -8,18 +8,18 @@ // next to each @TODO you will find tasks that need to be finished // 4. GET THIS GAME WORKING!! -let currentMarker = 'X' +let currentMarker = "X" let board = [ - ['','',''], - ['','',''], - ['','',''] + ['', '', ''], + ['', '', ''], + ['', '', ''] ]; // is called when a square is clicked. "this" = element here const handleClick = (element) => { // check to see if the square clicked has anything in it, if not continue // this prevents an X being changed to an O - if(!document.getElementById(element.id).innerHTML){ + if (!document.getElementById(element.id).innerHTML) { addMarker(element.id) updateBoard(element.id) checkForWin() @@ -30,13 +30,13 @@ const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) // @TODO, Mix & Match. // You will need the following pieces: - + // = currentMarker // .getElementById(id) // document // .innerHTML - - // Arrange the above pieces into one a single line of code + document.getElementById(id).innerHTML = currentMarker + // to add an X or O to the board to the DOM so it can be scene on the screen. } @@ -44,7 +44,10 @@ const addMarker = (id) => { 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)) + const column = parseInt(id.charAt(2)) + console.log("handleclick", currentMarker) + board[row][column] = currentMarker + console.log(`you clicked the sq at ${row} and ${column}`) console.log(board) @@ -55,9 +58,15 @@ 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!`) + + if (horizontalWin() || verticalWin() || diagonalWin()) { + + // **BONUS** you could make the dismissal of this alert window reset the board.. + setTimeout( + function () { + window.alert(`Player ${currentMarker} won!`); + }, 10) + // console.log ("after alert", currentMarker) } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() @@ -66,19 +75,45 @@ 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")) { + 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 = () => { // @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")) { + 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 = () => { // @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")) { + 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 + } } const changeMarker = () => { // ternary operator: if it's an X make it an O, if O make it an X currentMarker = currentMarker === "X" ? "O" : "X" + } const resetBoard = () => { @@ -87,14 +122,19 @@ const resetBoard = () => { // collects all of the "td"s into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp const squares = document.getElementsByTagName("TD") - + // loops over the HTML Collections and clears out the Xs and Os - for (i=0; i -
@@ -38,5 +37,6 @@

Welcome to Tic Tac Toe

+ diff --git a/main.js b/main.js index 2994e56..3b961af 100644 --- a/main.js +++ b/main.js @@ -33,24 +33,60 @@ const printBoard = () => { } const horizontalWin = () => { - // 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 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[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 + } } const checkForWin = () => { - // Your code here call each of the check for types of wins + if(horizontalWin() || verticalWin() || diagonalWin()) { + console.log(`Player ${playerTurn} won!`) + return true + } else { + changeMarker() + } } const ticTacToe = (row, column) => { - // Your code here to place a marker on the board - // then check for a win + board[row][column] = playerTurn + + checkForWin() +} + +const changeMarker = () => { + if(playerTurn === "X"){ + playerTurn = "O" + } else { + playerTurn = "X" + } } const getPrompt = () => { @@ -64,7 +100,6 @@ const getPrompt = () => { }); } - // Unit Tests // You use them run the command: npm test main.js // to close them ctrl + C