diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..9b2447c 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -14,11 +14,15 @@ let board = [ ['','',''], ['','',''] ]; +let scoreX = 0; +let scoreO =0; // 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 + document.getElementById("score").innerHTML = `X has ${scoreX} wins and O has ${scoreO} wins.`; + document.getElementById("turn").innerHTML = `${currentMarker} it is your turn`; if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) updateBoard(element.id) @@ -38,6 +42,10 @@ const addMarker = (id) => { // 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. + + + document.getElementById(id).innerHTML = currentMarker; + } // passes the element's id attribute from HTML to be used @@ -51,13 +59,21 @@ const updateBoard = (id) => { // @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 + + board[row][column] = currentMarker; } 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!`) + //window.alert(`Player ${currentMarker} won!`); + if(currentMarker === 'X'){ + scoreX++; + } else { scoreO++; } + if(window.confirm(`Player ${currentMarker} won!`)); { + resetBoard(); + } } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() @@ -66,19 +82,83 @@ const checkForWin = () => { const horizontalWin = () => { // @TODO, Your code here: to check for horizontal wins + // if(board[0][0] !== null){ + // console.log("Not Null"); + // } + if(board[0][0] === board[0][1] && board[0][0] === board[0][2]){ + //console.log("h1a") + //debugger + if(board[0][0] == 'X' || board[0][0] == "O"){ + //console.log("H1") + return true; + } + } + else if(board[1][0] === board[1][1] && board[1][0] === board[1][2]){ + if(board[1][0] == "X" || board[1][0] == "O"){ + //console.log("H2") + return true; + } + } + else if(board[2][0] === board[2][1] && board[2][0] === board[2][2]){ + if(board[2][0] == "X" || board[2][0] == "O"){ + // console.log("H3") + return true; + } + } + else { + return false; + } } const verticalWin = () => { // @TODO, Your code here: to check for vertical wins + if(board[0][0] === board[1][0] && board[0][0] === board[2][0]){ + if(board[0][0] == "X" || board[0][0] == "O"){ + //console.log("V1") + return true; + } + } + else if(board[0][1] === board[1][1] && board[0][1] === board[2][1]){ + if(board[0][1] == "X" || board[0][1] == "O"){ + //console.log("V2") + return true; + } + } + else if(board[0][2] === board[1][2] && board[0][2] === board[2][2]){ + if(board[0][2] == "X" || board[0][2] == "O"){ + // console.log("V3") + return true; + } + } + else { + return false; + } } const diagonalWin = () => { // @TODO, Your code here: to check for diagonal wins + if(board[0][0] === board[1][1] && board[0][0] === board[2][2]){ + if(board[0][0] == "X" || board[0][0] == "O"){ + // console.log("D1") + return true; + } + } + else if(board[0][2] === board[1][1] && board[0][2] === board[2][0]){ + if(board[0][2] == "X" || board[0][2] == "O"){ + // console.log("D2") + 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" + document.getElementById("turn").innerHTML = `${currentMarker} it is your turn`; + } const resetBoard = () => { @@ -95,8 +175,20 @@ const resetBoard = () => { } // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game + board = [ + ['','',''], + ['','',''], + ['','',''] + ]; + + document.getElementById("score").innerHTML = `X has ${scoreX} wins and O has ${scoreO} wins.`; } +const resetScore = () => { + scoreX = 0; + scoreO = 0; + document.getElementById("score").innerHTML = `X has ${scoreX} wins and O has ${scoreO} wins.`; +} // **BONUSES** // 1. Display the current player's turn diff --git a/index.html b/index.html index 10a15d1..bd786b2 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,11 @@
Get ready to play!
+Get ready to play!
+ +X has 0 wins and O has 0 wins.
- +