From aed4675edca6e7ef6b7b9d8a32b47e0a1175614f Mon Sep 17 00:00:00 2001 From: Jacoblynch99 Date: Tue, 21 Jul 2020 08:28:03 -0500 Subject: [PATCH] project update --- .vscode/settings.json | 2 +- dom-tictactoe.js | 46 +++++++++++++++++++++++++++++++++++-------- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..cbb7b3a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..6498ae1 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -7,7 +7,7 @@ // 3. Look for the @TODO, to fix // next to each @TODO you will find tasks that need to be finished // 4. GET THIS GAME WORKING!! - +let turn = 0; let currentMarker = 'X' let board = [ ['','',''], @@ -22,7 +22,7 @@ const handleClick = (element) => { if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) updateBoard(element.id) - checkForWin() + changeMarker() } } @@ -30,7 +30,7 @@ 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 @@ -45,6 +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)) + board[row][column] = currentMarker + addMarker(id) + turn++; + if (turn >= 5) { + checkForWin() + } console.log(`you clicked the sq at ${row} and ${column}`) console.log(board) @@ -57,23 +63,45 @@ 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() + window.alert(`Player ${currentMarker} won! `) } } 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 = () => { @@ -88,13 +116,15 @@ 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