diff --git a/AntiqueOlive.ttf b/AntiqueOlive.ttf new file mode 100644 index 0000000..cc398ea Binary files /dev/null and b/AntiqueOlive.ttf differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..4044757 Binary files /dev/null and b/favicon.ico differ diff --git a/images/ann.png b/images/ann.png new file mode 100644 index 0000000..5ca3186 Binary files /dev/null and b/images/ann.png differ diff --git a/images/banana.png b/images/banana.png new file mode 100644 index 0000000..00bd85c Binary files /dev/null and b/images/banana.png differ diff --git a/images/buster.jpg b/images/buster.jpg new file mode 100644 index 0000000..42aaa68 Binary files /dev/null and b/images/buster.jpg differ diff --git a/images/georgemichael.png b/images/georgemichael.png new file mode 100644 index 0000000..87263a2 Binary files /dev/null and b/images/georgemichael.png differ diff --git a/images/georgesr.jpg b/images/georgesr.jpg new file mode 100644 index 0000000..59a287e Binary files /dev/null and b/images/georgesr.jpg differ diff --git a/images/gob.jpg b/images/gob.jpg new file mode 100644 index 0000000..c9a5073 Binary files /dev/null and b/images/gob.jpg differ diff --git a/images/lindsay.jpg b/images/lindsay.jpg new file mode 100644 index 0000000..1e56d57 Binary files /dev/null and b/images/lindsay.jpg differ diff --git a/images/lucille.png b/images/lucille.png new file mode 100644 index 0000000..2398657 Binary files /dev/null and b/images/lucille.png differ diff --git a/images/maeby.png b/images/maeby.png new file mode 100644 index 0000000..361c7dc Binary files /dev/null and b/images/maeby.png differ diff --git a/images/michael.jpg b/images/michael.jpg new file mode 100644 index 0000000..d35dbeb Binary files /dev/null and b/images/michael.jpg differ diff --git a/images/tobias.jpg b/images/tobias.jpg new file mode 100644 index 0000000..3f55d0e Binary files /dev/null and b/images/tobias.jpg differ diff --git a/index.css b/index.css index ae8b9a0..f6b4359 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,71 @@ +@font-face { + font-family: antiqueOlive; + src: url("AntiqueOlive.ttf"); +} + html { - + +} + +body { + background-color: #F98F1B; + text-align: center; +} + +h1 { + font-family: 'antiqueOlive', cursive; + letter-spacing: -3px; + text-align: center; + color: black; + font-size: 48px; + margin-bottom: 10px; +} + +button { + margin-bottom: 10px; + font-size: 18px; +} + +.arrested-development { + font-family: 'antiqueOlive', cursive; +} + +h2 { + font-family: 'antiqueOlive', cursive; + text-align: center; + color: black; + font-size: 36px; + letter-spacing: -3px; +} + +div.row { + text-align: center; +} + +div.square { + border: 5px solid black; + background-color: white; + height: 150px; + width: 150px; + margin: 5px; + display: inline-block; + position: relative; +} + +img { + position: absolute; + left: 0px; + top: 50%; + transform: translateY(-50%); + width: 100%; + height: auto; +} + +.banana { + opacity: 0.3; + left: 25px; + margin-left: auto; + margin-right: auto; + height: 75%; + width: auto; } diff --git a/index.html b/index.html index de8d985..be487ba 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,68 @@ Tic Tac Toe! + + + -

Tic Tac Toe

-
+

Tic-TAc-G.O.B.

+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ + - diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 33c03a0..8cc803f 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,7 +1,178 @@ -function TicTacToe() { +var possiblePlayersOne = [ + { + name: "Ann", + pictureURL: "images/ann.png" + }, + { + name: "Lucille", + pictureURL: "images/lucille.png" + }, + { + name: "G.O.B.", + pictureURL: "images/gob.jpg" + }, + { + name: "Buster", + pictureURL: "images/buster.jpg" + }, + { + name: "Tobias", + pictureURL: "images/tobias.jpg" + }, +]; -} +var possiblePlayersTwo = [ + { + name: "George Michael", + pictureURL: "images/georgemichael.png" + }, + { + name: "George Sr.", + pictureURL: "images/georgesr.jpg" + }, + { + name: "Lindsay", + pictureURL: "images/lindsay.jpg" + }, + { + name: "Michael", + pictureURL: "images/michael.jpg" + }, + { + name: "Maeby", + pictureURL: "images/maeby.png" + }, +]; -TicTacToe.prototype = { - +function TicTacToe() { + this.board = [[0,0,0], [0,0,0], [0,0,0]]; + this.playerOne = possiblePlayersOne[Math.floor(Math.random() * possiblePlayersOne.length)]; // random from group 1 + this.playerTwo = possiblePlayersTwo[Math.floor(Math.random() * possiblePlayersTwo.length)]; // random from group 2 + this.currentPlayer = this.playerOne; + this.turns = 0; + this.over = false; } + +TicTacToe.prototype.updateBoard = function(square) { + switch ($(square).attr('id')) { + case "top-left": + this.board[0][0] = this.currentPlayer; + break; + case "top-mid": + this.board[0][1] = this.currentPlayer; + break; + case "top-right": + this.board[0][2] = this.currentPlayer; + break; + case "mid-left": + this.board[1][0] = this.currentPlayer; + break; + case "mid-mid": + this.board[1][1] = this.currentPlayer; + break; + case "mid-right": + this.board[1][2] = this.currentPlayer; + break; + case "bottom-left": + this.board[2][0] = this.currentPlayer; + break; + case "bottom-mid": + this.board[2][1] = this.currentPlayer; + break; + case "bottom-right": + this.board[2][2] = this.currentPlayer; + break; + } +}; + +TicTacToe.prototype.play = function() { + if (this.gameOver() === false) { + this.switchPlayer(); + } else if (this.gameOver() === true) { + this.over = true; + $("body").append("

It's a draw... I guess you could say you're tie-curious...

"); + } else if (this.gameOver().name === "Ann") { + this.over = true; + $("body").append("

Her?

"); + } else { + this.over = true; + $("body").append("

fAmily LOVe " + this.gameOver().name + "!

"); + } +}; + +TicTacToe.prototype.gameOver = function() { + var b = this.board; + var one = this.playerOne; + var two = this.playerTwo; + + // variables for the board + var topLeft = b[0][0], topMid = b[0][1], topRight = b[0][2]; // top + var midLeft = b[1][0], midMid = b[1][1], midRight = b[1][2]; // middle + var bottomLeft = b[2][0], bottomMid = b[2][1], bottomRight = b[2][2]; // bottom + + + // player one wins vertically + if (topLeft === one && midLeft === one && bottomLeft === one) { + return one; + } else if (topMid === one && midMid === one && bottomMid === one) { + return one; + } else if (topRight === one && midRight === one && bottomRight === one) { + return one; + } + + // player two wins vertically + if (topLeft === two && midLeft === two && bottomLeft === two) { + return two; + } else if (topMid === two && midMid === two && bottomMid === two) { + return two; + } else if (topRight === two && midRight === two && bottomRight === two) { + return two; + } + + // player one wins horizontally + if (topLeft === one && topMid === one && topRight === one) { + return one; + } else if (midLeft === one && midMid === one && midRight === one) { + return one; + } else if (bottomLeft === one && bottomMid === one && bottomRight === one) { + return one; + } + + // player two wins horizontally + if (topLeft === two && topMid === two && topRight === two) { + return two; + } else if (midLeft === two && midMid === two && midRight === two) { + return two; + } else if (bottomLeft === two && bottomMid === two && bottomRight === two) { + return two; + } + + // player one wins diagonally + if (topLeft === one && midMid === one && bottomRight === one) { + return one; + } else if (topRight === one && midMid === one && bottomLeft === one) { + return one; + } + + // player two wins diagonally + if (topLeft === two && midMid === two && bottomRight === two) { + return two; + } else if (topRight === two && midMid === two && bottomLeft === two) { + return two; + } + + // there's a draw if no one has won after 9 turns + if (this.turns > 8) { + return true; + } else { + return false; + } +}; + +TicTacToe.prototype.switchPlayer = function () { + if (this.currentPlayer === this.playerOne) { + this.currentPlayer = this.playerTwo; + } else { + this.currentPlayer = this.playerOne; + } +};