From dccb4339722014165ccafacb8fde45b0560ab8ea Mon Sep 17 00:00:00 2001 From: nlewis989 <71626506+nlewis989@users.noreply.github.com> Date: Wed, 29 Sep 2021 13:30:04 -0500 Subject: [PATCH] final edit --- .gitignore | 3 ++ dom-tictactoe.js | 50 ++++++++++++++++++++++----- main.js | 90 +++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 126 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index bee4a0f..915f054 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,6 @@ npm-debug.log* # OS artifacts *.DS_Store + +.fake +.ionide \ No newline at end of file diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b5c261b..aaf6483 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -28,14 +28,15 @@ const handleClick = (element) => { const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) - // @TODO, Mix & Match. + document.getElementById(id).innerHTML = currentMarker; + // @TODO, Mix & Match. // You will need the following pieces: - + // = currentMarker // .getElementById(id) // document - // .innerHTML - + // .innerHTML + // Arrange the above pieces into 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. } @@ -44,7 +45,7 @@ const addMarker = (id) => { const updateBoard = (id) => { // parses the id string into a number then captures the first and last part of the newly created number as row & column const row = parseInt(id.charAt(0)) - const column = parseInt(id.charAt(2)) + const column = parseInt(id.charAt(2)) console.log(`you clicked the sq at ${row} and ${column}`) console.log(board) @@ -66,14 +67,47 @@ 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[1][0] == 'X' && board[1][1] == 'X' && board[1][2] == 'X') || + (board[2][0] == 'X' && board[2][1] == 'X' && board[2][2] == 'X') || + (board[0][0] == 'O' && board[0][1] == 'O' && board[0][2] == 'O') || + (board[1][0] == 'O' && board[1][1] == 'O' && board[1][2] == 'O') || + (board[2][0] == 'O' && board[2][1] == 'O' && board[2][2] == 'O') + ) { + return true; + } + } 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][1] == 'X' && board[1][1] == 'X' && board[2][1] == 'X') || //or + (board[0][2] == 'X' && board[1][2] == 'X' && board[2][2] == 'X') || //or + (board[0][0] == 'O' && board[1][0] == 'O' && board[2][0] == 'O') || + (board[0][1] == 'O' && board[1][1] == 'O' && board[2][1] == 'O') || //or + (board[0][2] == 'O' && board[1][2] == 'O' && board[2][2] == 'O') + // (board[0][0] == board [1][0] && board[0][0] == board[2][0]) || //or + // (board[0][1] == board [1][1] && board[0][1] == board[2][1]) || + // (board[0][2] == board [1][2] && board[0][2] == board[2][2]) + ) { + return true; + } } 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][2] == 'X' && board[1][1] == 'X' && board[2][0] == 'X') || + (board[0][0] == 'O' && board[1][1] == 'O' && board[2][2] == 'O') || + (board[0][2] == 'O' && board[1][1] == 'O' && board[2][0] == 'O') + ) { + return true; + } } const changeMarker = () => { @@ -85,15 +119,15 @@ const resetBoard = () => { // sanity check: this tells us the function is being called console.log("the board was cleared!") - // collects all of the "td"s into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp + // 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 { console.log(' 0 1 2'); console.log('0 ' + board[0].join(' | ')); @@ -32,25 +37,86 @@ const printBoard = () => { console.log('2 ' + board[2].join(' | ')); } +// check possiblities of all the ways of wins const horizontalWin = () => { - // Your code here to check for horizontal wins + + // box 1 equals box 2 and box 1 equals + if ( + (board[0][0] == 'X' && board[0][1] == 'X' && board[0][2] == 'X') || + (board[1][0] == 'X' && board[1][1] == 'X' && board[1][2] == 'X') || //or + (board[2][0] == 'X' && board[2][1] == 'X' && board[2][2] == 'X') || //or + (board[0][0] == 'O' && board[0][1] == 'O' && board[0][2] == 'O') || + (board[1][0] == 'O' && board[1][1] == 'O' && board[1][2] == 'O') || //or + (board[2][0] == 'O' && board[2][1] == 'O' && board[2][2] == 'O') + // (board[1][0] == board [1][1] && board[1][0] == board[1][2]) || + // (board[2][0] == board [2][1] && board[2][0] == board[2][2]) + + ) { + return true; + } + } 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][1] == 'X' && board[1][1] == 'X' && board[2][1] == 'X') || //or + (board[0][2] == 'X' && board[1][2] == 'X' && board[2][2] == 'X') || //or + (board[0][0] == 'O' && board[1][0] == 'O' && board[2][0] == 'O') || + (board[0][1] == 'O' && board[1][1] == 'O' && board[2][1] == 'O') || //or + (board[0][2] == 'O' && board[1][2] == 'O' && board[2][2] == 'O') + // (board[0][0] == board [1][0] && board[0][0] == board[2][0]) || //or + // (board[0][1] == board [1][1] && board[0][1] == board[2][1]) || + // (board[0][2] == board [1][2] && board[0][2] == board[2][2]) + ) { + return true; + } } + 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][2] == 'X' && board[1][1] == 'X' && board[2][0] == 'X') || + (board[0][0] == 'O' && board[1][1] == 'O' && board[2][2] == 'O') || + (board[0][2] == 'O' && board[1][1] == 'O' && board[2][0] == 'O') + ) { + return true; + } } const checkForWin = () => { // Your code here call each of the check for types of wins + // check all 3 types of wins + //if verticalwin returns true OR diagonal OR horizontal + if (verticalWin() || diagonalWin() || horizontalWin()) { + return true; + } } + + +// == comparison +//= assigning +// pass a argument of row and column const ticTacToe = (row, column) => { - // Your code here to place a marker on the board - // then check for a win + + if (board[row][column] == ' ') { + board[row][column] = playerTurn; + if (checkForWin() == true) { + console.log('congrats player ' + playerTurn + ' won!') + } + if (playerTurn == 'X') { + playerTurn = 'O' + } else { + playerTurn = 'X' + } + } else { + console.log('This space is taken') + } } const getPrompt = () => { @@ -64,6 +130,12 @@ const getPrompt = () => { }); } +/** + * call on the TTT index with rows and columns + * we check horizontal, verticle and diaginal wins + * both of the player can play 9 times to find winner and loser or tied + */ + // Unit Tests // You use them run the command: npm test main.js @@ -73,22 +145,22 @@ if (typeof describe === 'function') { describe('#ticTacToe()', () => { it('should place mark on the board', () => { ticTacToe(1, 1); - assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + assert.deepEqual(board, [[' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' ']]); }); it('should alternate between players', () => { ticTacToe(0, 0); - assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + assert.deepEqual(board, [['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' ']]); }); it('should check for vertical wins', () => { - board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; + board = [[' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' ']]; assert.equal(verticalWin(), true); }); it('should check for horizontal wins', () => { - board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; + board = [['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' ']]; assert.equal(horizontalWin(), true); }); it('should check for diagonal wins', () => { - board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; + board = [['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X']]; assert.equal(diagonalWin(), true); }); it('should detect a win', () => { @@ -104,4 +176,4 @@ if (typeof describe === 'function') { getPrompt(); -} +} \ No newline at end of file