diff --git a/index.css b/index.css index ae8b9a0..ec76ddc 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,70 @@ html { - + font-family: 'Poiret One', cursive; +} + +h1 { + text-align: center; + font-size: 80px; + margin: 0; +} + +#tictactoe { + width: 60%; + margin-left: auto; + margin-right: auto; +} + +.box { + width: 32%; + height: 100%; + display:inline-block; + background-color: blue; +} + +#row1, #row2, #row3 { + margin-top: 5px; + width: 100%; + height: 200px; +} + +.c1 { + margin-left: 10px; +} + +#player-1-score, #player-2-score { + display: inline-block; + text-align: center; +} + +#player-1-score { + margin-right: 40px; +} + +#player-2-score { + margin-left: 40px; +} + +#player-scores { + width: 600px; + margin: auto; + text-align: center; + font-size: 30px; +} + +#reset-button { + font-family: 'Poiret One', cursive; + font-size: 30px; + width: 200px; + height:50px; + text-align: center; + margin:0 auto; + padding: 10px; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} + +#button-holder { + text-align: center; + margin-bottom: 30px; } diff --git a/index.html b/index.html index de8d985..a826eef 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Tic Tac Toe! + @@ -14,8 +15,47 @@

Tic Tac Toe

- +
+
+

Player 1

+

+
+ +
+

Player 2

+

+
+
+
+ +
+ + +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+ + + + diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 33c03a0..cec2a1b 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,7 +1,114 @@ -function TicTacToe() { +function TicTacToe() { + this.pickSpaces(); + this.resetButton(); } TicTacToe.prototype = { - -} + board_spaces: ["r1c1", "r1c2", "r1c3", "r2c1", "r2c2", "r2c3", "r3c1", "r3c2", "r3c3"], + player_1_score: [ 0, 0, 0, 0, 0, 0, 0, 0 ], + player_2_score: [ 0, 0, 0, 0, 0, 0, 0, 0 ], + player_1_wins: 0, + player_2_wins: 0, + moves: 0, + player: 1, + + pickSpaces: function(){ + var self = this; + $("#player-1-wins").html(this.player_1_wins); + $("#player-2-wins").html(this.player_2_wins); + self.board_spaces.forEach(function(box) { + $("." + box).click(function() { + if ($("." + box).css('background-color') == 'rgb(0, 0, 255)') { + self.markSpaces(self.player, box); + } + if (self.moves == 9) { + alert("It's a tie!"); + self.resetBoard(); + } + }); + }); + }, + + markSpaces: function(player, box) { + var color = (player == 1 ? 'red' : 'yellow'); + $("." + box).css('background-color', color); + this.moves++; + this.updateScore(box, player); + this.player = (player == 1 ? 2 : 1); + }, + + resetBoard: function(){ + this.board_spaces.forEach(function(box) { + $("." + box).css('background-color', 'blue'); + $("." + box).off('click'); + }); + this.pickSpaces(); + this.player_1_score = [ 0, 0, 0, 0, 0, 0, 0, 0 ]; + this.player_2_score = [ 0, 0, 0, 0, 0, 0, 0, 0 ]; + this.moves = 0; + }, + + resetButton: function(){ + var self = this; + $('#reset-button').click(function() { + self.resetBoard(); + }); + }, + + incrementScore: function(index, player) { + var self = this; + if (player == 1) { + self.player_1_score[index]++; + if (self.player_1_score[index] == 3) { + self.playerWin(1); + } + } else { + self.player_2_score[index]++; + if (self.player_2_score[index] == 3) { + self.playerWin(2); + } + } + }, + + playerWin: function(player) { + alert("Player " + player + " wins!"); + this.resetBoard(); + this.trackWins(player); + }, + + updateScore: function(space, player) { + var track_space = space.toString(); + var self = this; + if(track_space.substring(0,2) == "r1") { + self.incrementScore(0, player); + } else if (track_space.substring(0,2) == "r2") { + self.incrementScore(1, player); + } else if (track_space.substring(0,2) == "r3") { + self.incrementScore(2, player); + } + if (track_space.substring(2,4) == "c1") { + self.incrementScore(3, player); + } else if (track_space.substring(2,4) == "c2") { + self.incrementScore(4, player); + } else if (track_space.substring(2,4) == "c3") { + self.incrementScore(5, player); + } + if (["r1c1", "r2c2", "r3c3"].includes(track_space)) { + self.incrementScore(6, player); + } + if (["r1c3", "r2c2", "r3c1"].includes(track_space)) { + self.incrementScore(7, player); + } + }, + + trackWins: function(player) { + if (player == 1) { + this.player_1_wins++; + $("#player-1-wins").html(this.player_1_wins); + } else { + this.player_2_wins++; + $("#player-2-wins").html(this.player_2_wins); + } + }, +};