diff --git a/unit_01/w02d05/homework/tic_tac_toe_extended_solution/css/style.css b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/css/style.css new file mode 100644 index 0000000..2c019a2 --- /dev/null +++ b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/css/style.css @@ -0,0 +1,37 @@ +#board { + min-width: 300px; + max-width: 800px; + min-height: 300px; + max-height: 800px; +/* background-color: pink;*/ + border-radius: 5%; +} + +.size { + border: 1px solid grey; + background-color: azure; + cursor: pointer; +} + +.square { + position: relative; + display: inline-block; + left: 1.5%; + top: 2px; +/* height: 32%; width: 32%;*/ + border-radius: 10%; + overflow: hidden; + background-color: white; + cursor: pointer; + border: 1px solid black; +} + +img { + height: 100%; width: 100%; +} + +#reset { + cursor: pointer; +} + + diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/depression.png b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/depression.png similarity index 100% rename from unit_01/w02d05/homework/tic_tac_toe_solution/depression.png rename to unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/depression.png diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/egg.png b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/egg.png similarity index 100% rename from unit_01/w02d05/homework/tic_tac_toe_solution/egg.png rename to unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/egg.png diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/o.png b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/o.png similarity index 100% rename from unit_01/w02d05/homework/tic_tac_toe_solution/o.png rename to unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/o.png diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/x.png b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/x.png similarity index 100% rename from unit_01/w02d05/homework/tic_tac_toe_solution/x.png rename to unit_01/w02d05/homework/tic_tac_toe_extended_solution/images/x.png diff --git a/unit_01/w02d05/homework/tic_tac_toe_extended_solution/index_extra.html b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/index_extra.html new file mode 100644 index 0000000..1097ffd --- /dev/null +++ b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/index_extra.html @@ -0,0 +1,25 @@ + + + EXTRA tic tac toe + + + +
+ 9 + 16 + 25 + 36 + 49 + 64 + 81 + 100 + 121 + 144 + 169 + 196 +

+
+
+ + + \ No newline at end of file diff --git a/unit_01/w02d05/homework/tic_tac_toe_extended_solution/js/app_extra.js b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/js/app_extra.js new file mode 100644 index 0000000..5757db1 --- /dev/null +++ b/unit_01/w02d05/homework/tic_tac_toe_extended_solution/js/app_extra.js @@ -0,0 +1,197 @@ +window.onload = function() { + console.log('app.js'); + + // the game will start when a size is selected + // will also reset the game when clicked + var sizeButtons = document.getElementsByClassName('size'); + for (var i=0; i < sizeButtons.length; i++) { + sizeButtons[i].addEventListener('click', setValues); + } + +} + +// global variables to be populated by setValues function +var turn, size, Xpositions, Opositions, windex; + +// setValues sets the variables for the game and invokes the makeBoard function +var setValues = function() { + turn = true; + size = this.innerText; + Xpositions = []; + Opositions = []; + + windex = []; + + // generates winning combinations for rows and columns according to the number of squares + for (var i=0; i < Math.sqrt(size); i++) { + var row = []; + for (var j=(i * Math.sqrt(size)); j < (Math.sqrt(size) + (i * Math.sqrt(size))); j++) { + row.push(j); + } + var col = []; + for (var j = i; j < (i + parseInt(size)); j += Math.sqrt(size)) { + col.push(j); + } + windex.push(row, col); + } + + // generates winning combinations for diagonals (top left to bottom right) + var diag1 = []; + for (var j=0; j < parseInt(size); j += (Math.sqrt(size) + 1)) { + diag1.push(j); + } + + // generates winning combinations for diagonals (top right to bottom left) + var diag2 = []; + for (var k=(Math.sqrt(size) - 1); k <= (size - Math.sqrt(size)); k += (Math.sqrt(size) - 1)) { + diag2.push(k); + } + windex.push(diag1, diag2); + + // makes the board according to the number of squares + makeBoard(); +} + +// generates the board according to the size variable, and +// adds an eventListener for each square (play function) +var makeBoard = function() { + var board = document.getElementById('board'); + board.innerHTML = ""; + for (var i=0; i < size; i++) { + var square = document.createElement('square'); + square.id = i; + square.className = "square"; + square.style.margin = "2px"; + square.style.width = (100 / Math.sqrt(size)) - 1 + "%"; + square.style.height = (100 / Math.sqrt(size)) - 1 + "%"; + var board = document.getElementById('board'); + board.appendChild(square); + square.addEventListener('click', play); + } +} + +var play = function() { + if (!this.className.includes("x") && !this.className.includes("o")) { + if (turn) { + this.innerHTML = ''; + this.className += ' x'; + Xpositions.push(this.id); + } else { + this.innerHTML = ''; + this.className += ' o'; + Opositions.push(this.id); + } + turn = !turn; + checkWin(); + } +} + +var checkWin = function() { + var squares = document.getElementsByClassName('square'); + if (checkPositions(Xpositions)) { + for (var i=0; i < squares.length; i++) { + squares[i].innerHTML = '' + } + } else if (checkPositions(Opositions)) { + for (var j=0; j < squares.length; j++) { + squares[j].innerHTML = '' + } + } +} + +var checkPositions = function(playerPositions) { + for (var i=0; i < windex.length; i++) { + var hits = 0; + for (var j=0; j < windex[i].length; j++) { + for (var k=0; k < playerPositions.length; k++) { + if (windex[i][j] == playerPositions[k]) { + hits++; + } + } + } + if (hits == Math.sqrt(size)) { return true }; + } + return false +} + +// EOF + + + + + + + + // if (size == 9) { + // windex = [ + // [0, 1, 2], [3, 4, 5], [6, 7, 8], + // [0, 3, 6], [1, 4, 7], [2, 5, 8], + // [0, 4, 8], [2, 4, 6] + // ]; + // } else if (size == 16) { + // windex = [ + // [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 23, 14, 15], + // [0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15], + // [0, 5, 10, 15], [3, 6, 9, 12] + // ]; + // } else if (size == 25) { + // windex = [ + // [0, 1, 2, 3, 4], [5, 6, 7, 8, 9], [10, 11, 12, 13, 14], [15, 16, 17, 18, 19], [20, 21, 22, 23, 24], + // [0, 5, 10, 15, 20], [1, 6, 11, 16, 21], [2, 7, 12, 17, 22], [3, 8, 13, 18, 23], [4, 9, 14, 19, 24], + // [0, 6, 12, 18, 24], [4, 8, 12, 16, 20] + // ]; + // } + + + // sets up arrays of winning row numbers + // for (var i=0; i < Math.sqrt(size); i++) { + // var row = []; + // for (var j=(i * Math.sqrt(size)); j < (Math.sqrt(size) + (i * Math.sqrt(size))); j++) { + // row.push(j); + // } + // winrar.push(row); + // } + + // console.log('rows: ', winrar); + + // var winwoop = []; + // for (var i=0; i < Math.sqrt(size); i++) { + // var col = []; + // for (var j = i; j < (i + parseInt(size)); j += Math.sqrt(size)) { + // col.push(j); + // } + // winwoop.push(col); + // } + + // console.log('columns: ', winwoop); + +// [0, 4, 8], [2, 4, 6] + // var windrip = []; + + // var diag1 = []; + // var diag2 = []; + + // for (var j=0; j < parseInt(size); j += (Math.sqrt(size) + 1)) { + // diag1.push(j); + // } + // for (var k=(Math.sqrt(size) - 1); k <= (size - Math.sqrt(size)); k += (Math.sqrt(size) - 1)) { + // diag2.push(k); + // } + + // console.log('diag1: ', diag1); + // console.log('diag2: ', diag2); + + + + + // 0, 3, 6 + // 1, 4, 7 + // 2, 5, 8 + + + + // sets up arrays of winning column numbers + + // sets up arrays of winning diagonal numbers + + // console.log(diag2); \ No newline at end of file diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/app.js b/unit_01/w02d05/homework/tic_tac_toe_solution/app.js deleted file mode 100644 index e74ccdb..0000000 --- a/unit_01/w02d05/homework/tic_tac_toe_solution/app.js +++ /dev/null @@ -1,88 +0,0 @@ -window.onload = function() { - - console.log('app.js'); - - var turn = true; - - var Xpositions = []; - var Opositions = []; - - var windex = [ - [0, 1, 2], [3, 4, 5], [6, 7, 8], - [0, 3, 6], [1, 4, 7], [2, 5, 8], - [0, 4, 8], [2, 4, 6] - ]; - - var squares = document.getElementsByClassName('square'); - - var play = function() { - - if (!this.className.includes("x") && !this.className.includes("o")) { - - if (turn) { - this.innerHTML = ''; - this.className += ' x'; - Xpositions.push(this.id); - } else { - this.innerHTML = ''; - this.className += ' o'; - Opositions.push(this.id); - } - turn = !turn; - checkWin(); - - } - } - - for (var i=0; i < squares.length; i++) { - squares[i].addEventListener('click', play); - } - - - - var checkWin = function() { - var squares = document.getElementsByClassName('square'); - if (checkX()) { - console.log('X WON!!!!!'); - for (var i=0; i < squares.length; i++) { - squares[i].innerHTML = '' - } - } else if (checkO()) { - console.log('O WON!!!!!'); - for (var j=0; j < squares.length; j++) { - squares[j].innerHTML = '' - } - } - } - - var checkX = function() { - for (var i=0; i < windex.length; i++) { - var hits = 0; - for (var j=0; j < windex[i].length; j++) { - for (var k=0; k < Xpositions.length; k++) { - if (windex[i][j] == Xpositions[k]) { - hits++; - } - } - } - if (hits == 3) { return true }; - } - return false - } - - var checkO = function() { - for (var i=0; i < windex.length; i++) { - var hits = 0; - for (var j=0; j < windex[i].length; j++) { - for (var k=0; k < Opositions.length; k++) { - if (windex[i][j] == Opositions[k]) { - hits++; - } - } - } - if (hits == 3) { return true }; - } - return false - } - -} \ No newline at end of file diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/style.css b/unit_01/w02d05/homework/tic_tac_toe_solution/css/style.css similarity index 64% rename from unit_01/w02d05/homework/tic_tac_toe_solution/style.css rename to unit_01/w02d05/homework/tic_tac_toe_solution/css/style.css index d5257b8..add8be0 100644 --- a/unit_01/w02d05/homework/tic_tac_toe_solution/style.css +++ b/unit_01/w02d05/homework/tic_tac_toe_solution/css/style.css @@ -3,10 +3,16 @@ max-width: 800px; min-height: 300px; max-height: 800px; - background-color: pink; +/* background-color: pink;*/ border-radius: 5%; } +.size { + border: 1px solid grey; + background-color: azure; + cursor: pointer; +} + .square { position: relative; display: inline-block; @@ -16,12 +22,16 @@ border-radius: 10%; overflow: hidden; background-color: white; + cursor: pointer; + border: 1px solid black; } img { height: 100%; width: 100%; } -h1 { - +#reset { + cursor: pointer; } + + diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/images/depression.png b/unit_01/w02d05/homework/tic_tac_toe_solution/images/depression.png new file mode 100644 index 0000000..5ba9013 Binary files /dev/null and b/unit_01/w02d05/homework/tic_tac_toe_solution/images/depression.png differ diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/images/egg.png b/unit_01/w02d05/homework/tic_tac_toe_solution/images/egg.png new file mode 100644 index 0000000..752756b Binary files /dev/null and b/unit_01/w02d05/homework/tic_tac_toe_solution/images/egg.png differ diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/images/o.png b/unit_01/w02d05/homework/tic_tac_toe_solution/images/o.png new file mode 100644 index 0000000..989ea33 Binary files /dev/null and b/unit_01/w02d05/homework/tic_tac_toe_solution/images/o.png differ diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/images/x.png b/unit_01/w02d05/homework/tic_tac_toe_solution/images/x.png new file mode 100644 index 0000000..d6a3263 Binary files /dev/null and b/unit_01/w02d05/homework/tic_tac_toe_solution/images/x.png differ diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/index.html b/unit_01/w02d05/homework/tic_tac_toe_solution/index.html index 67a244b..db6bb12 100644 --- a/unit_01/w02d05/homework/tic_tac_toe_solution/index.html +++ b/unit_01/w02d05/homework/tic_tac_toe_solution/index.html @@ -1,7 +1,7 @@ tic tac toe - +
@@ -17,6 +17,6 @@
- + \ No newline at end of file diff --git a/unit_01/w02d05/homework/tic_tac_toe_solution/js/app.js b/unit_01/w02d05/homework/tic_tac_toe_solution/js/app.js new file mode 100644 index 0000000..aa986df --- /dev/null +++ b/unit_01/w02d05/homework/tic_tac_toe_solution/js/app.js @@ -0,0 +1,63 @@ +window.onload = function() { + console.log('app.js'); + + var squares = document.getElementsByClassName('square'); + for (var i=0; i < squares.length; i++) { + squares[i].addEventListener('click', play); + } +} + +var turn = true; + +var Xpositions = [], + Opositions = []; + +var windex = [ + [0, 1, 2], [3, 4, 5], [6, 7, 8], + [0, 3, 6], [1, 4, 7], [2, 5, 8], + [0, 4, 8], [2, 4, 6] + ]; + +var play = function() { + if (!this.className.includes("x") && !this.className.includes("o")) { + if (turn) { + this.innerHTML = ''; + this.className += ' x'; + Xpositions.push(this.id); + } else { + this.innerHTML = ''; + this.className += ' o'; + Opositions.push(this.id); + } + turn = !turn; + checkWin(); + } +} + +var checkWin = function() { + var squares = document.getElementsByClassName('square'); + if (checkPositions(Xpositions)) { + for (var i=0; i < squares.length; i++) { + squares[i].innerHTML = '' + } + } else if (checkPositions(Opositions)) { + for (var j=0; j < squares.length; j++) { + squares[j].innerHTML = '' + } + } +} + +var checkPositions = function(playerPositions) { + for (var i=0; i < windex.length; i++) { + var hits = 0; + for (var j=0; j < windex[i].length; j++) { + for (var k=0; k < playerPositions.length; k++) { + if (windex[i][j] == playerPositions[k]) { + hits++; + } + } + } + if (hits == 3) { return true }; + } + return false +} \ No newline at end of file