diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..39da995 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,10 +116,12 @@ 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; iWelcome to Tic Tac Toe - +
- - - + + + - - - + + + - - - + + +
diff --git a/main.js b/main.js index 2994e56..1b3d479 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,10 @@ 'use strict'; -// brings in the assert module for unit testing -const assert = require('assert'); -// brings in the readline module to access the command line +// brings in the assert module for unit testing +const assert = require('assert'); +// brings in the readline module to access the command line const readline = require('readline'); +const { get } = require('http'); // use the readline module to print out to the command line const rl = readline.createInterface({ input: process.stdin, @@ -18,9 +19,14 @@ let board = [ [' ', ' ', ' '] ]; + // assigns the first mark as 'X' // using let because the variable is expected to change from 'X' to 'O' and back +let winnerMarker = 'O'; let playerTurn = 'X'; +let turn = 0; + + // is a function that print the current status of the board using the variable - board const printBoard = () => { @@ -32,25 +38,65 @@ const printBoard = () => { console.log('2 ' + board[2].join(' | ')); } + +const changeMarker = () => { + playerTurn = playerTurn === "X" ? "O" : "X" + winnerMarker = winnerMarker === "O" ? "X" : "O" +} + + + 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("************ " + winnerMarker + " Wins! *************") + return true + } + } const ticTacToe = (row, column) => { // Your code here to place a marker on the board // then check for a win + board[row][column] = playerTurn + changeMarker() + turn++ + if (turn >= 5) { + checkForWin() + } } const getPrompt = () => { @@ -92,6 +138,11 @@ if (typeof describe === 'function') { assert.equal(diagonalWin(), true); }); it('should detect a win', () => { + ticTacToe(0, 0) + ticTacToe(0, 1) + ticTacToe(1, 1) + ticTacToe(0, 2) + ticTacToe(2, 2) assert.equal(checkForWin(), true); }); });