diff --git a/index.css b/index.css index ae8b9a0..3d8d755 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,88 @@ html { - + text-align: center; + font-family: 'Delius Unicase', cursive; +} + +body { + background-image: url("starsbg.png"); +} + +/*** +TITLE AND MESSAGE +***/ + +h1 { + font-size: 4rem; + margin-top: 0rem; + margin-bottom: 0rem; + color: #B345B9; +} + +#message { + font-size: 1.5rem; + margin-top: 0rem; + margin-bottom: .5rem; + color: #F04DB5; + font-weight: bold; +} + +/*** +GAME BOARD +***/ + +/*entire table*/ +#game-board { + width: 40%; + font-size: 6rem; + border-collapse: collapse; + border-spacing: 0; + margin-top: 3rem; + margin-left: auto; + margin-right: auto; +} + +/*size of each space*/ +td { + padding: 5rem; + cursor: pointer; +} + +/*hover img over space*/ +.space_hover { + background-image: url("moon.png"); + background-size: 40%; + background-repeat: no-repeat; + background-position: center; +} + +/*horizontal lines*/ +#top-row, #middle-row { + border-bottom: .5rem solid #A908E2; +} + +/*vertical lines*/ +#space-1, #space-4, #space-7, #space-2, #space-5, #space-8 { + border-right: .5rem solid #BB29EF; +} + +/*** +SPACE MARKERS +***/ + +/*player 1 space marker*/ +.player_1 { + background-image: url("locket.png"); + background-size: 85%; + background-repeat: no-repeat; + background-position: center; + transition: all .3s ease-in; +} + +/*player 2 space marker*/ +.player_2 { + background-image: url("locket2.png"); + background-size: 85%; + background-repeat: no-repeat; + background-position: center; + transition: all .3s ease-in; } diff --git a/index.html b/index.html index de8d985..a8ade39 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,40 @@ Tic Tac Toe! + +

Tic Tac Toe

-
+ +

+ +
+ + + + + + + + + + + + + + + + + +
+ +
+ + - diff --git a/locket.png b/locket.png new file mode 100644 index 0000000..f808a7a Binary files /dev/null and b/locket.png differ diff --git a/locket2.png b/locket2.png new file mode 100644 index 0000000..b2527fb Binary files /dev/null and b/locket2.png differ diff --git a/moon.png b/moon.png new file mode 100644 index 0000000..76f30ea Binary files /dev/null and b/moon.png differ diff --git a/starsbg.png b/starsbg.png new file mode 100644 index 0000000..e32cc8c Binary files /dev/null and b/starsbg.png differ diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 33c03a0..015469b 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,7 +1,121 @@ +$(document).on('ready', function() { + + var game = new TicTacToe(); + + function updateMessage(message) { + $('#message').text(message) + } + + $('td').hover( + function(){ $(this).addClass('space_hover') }, + function(){ $(this).removeClass('space_hover') } + ) + + $('td').click(function() { + var space = $(this) + var board = $('#game-board') + + if (game.isSpaceEmpty(space)) { + if (game._current_player === "Player 2") { + space.addClass("player_2") + if (game.checkIfWon(board,"player_2")) { + alert(game._current_player + " won!") + game.reset(board,game) + updateMessage("Your turn, " + game._current_player) + } else { + if (game.checkIfDraw(board)) { + alert("It's a draw!") + game.reset(board,game) + updateMessage("Your turn, " + game._current_player) + } + game.changePlayer() + updateMessage("Your turn, " + game._current_player) + } + } else { + space.addClass("player_1") + if (game.checkIfWon(board,"player_1")) { + alert(game._current_player + " won!") + game.reset(board,game) + updateMessage("Your turn, " + game._current_player) + } else { + if (game.checkIfDraw(board)) { + alert("It's a draw!") + game.reset(board,game) + updateMessage("Your turn, " + game._current_player) + } + game.changePlayer() + updateMessage("Your turn, " + game._current_player) + } + } + } + }) +}) + + function TicTacToe() { + this._current_player = "Player 1" + this._message = $('#message').text("Your turn, " + this._current_player) -} + this.changePlayer = function() { + if (this._current_player === "Player 1") { + this._current_player = "Player 2" + } else { + this._current_player = "Player 1" + } + } + + this.isSpaceEmpty = function(td) { + if (td.hasClass('player_2') || td.hasClass('player_1')) { + return false + } else { + return true + } + } + + this.checkIfWon = function(board, player) { + var won = false + if(board.find('#space-1').hasClass(player) && board.find('#space-2').hasClass(player) && board.find('#space-3').hasClass(player)) { + won = true + } else if (board.find('#space-1').hasClass(player) && board.find('#space-4').hasClass(player) && board.find('#space-7').hasClass(player)) { + won = true + } else if (board.find('#space-1').hasClass(player) && board.find('#space-5').hasClass(player) && board.find('#space-9').hasClass(player)) { + won = true + } else if (board.find('#space-4').hasClass(player) && board.find('#space-5').hasClass(player) && board.find('#space-6').hasClass(player)) { + won = true + } else if (board.find('#space-7').hasClass(player) && board.find('#space-8').hasClass(player) && board.find('#space-9').hasClass(player)) { + won = true + } else if (board.find('#space-2').hasClass(player) && board.find('#space-5').hasClass(player) && board.find('#space-8').hasClass(player)) { + won = true + } else if (board.find('#space-3').hasClass(player) && board.find('#space-6').hasClass(player) && board.find('#space-9').hasClass(player)) { + won = true + } else if (board.find('#space-3').hasClass(player) && board.find('#space-5').hasClass(player) && board.find('#space-7').hasClass(player)) { + won = true + } + return won; + } + + this.checkIfDraw = function(board) { + var draw = false + if(board.find('#space-1').is(".player_1,.player_2") && board.find('#space-2').is(".player_1,.player_2") && board.find('#space-3').is(".player_1,.player_2")) { + if(board.find('#space-4').is(".player_1,.player_2") && board.find('#space-5').is(".player_1,.player_2") && board.find('#space-6').is(".player_1,.player_2")) { + if(board.find('#space-7').is(".player_1,.player_2") && board.find('#space-8').is(".player_1,.player_2") && board.find('#space-9').is(".player_1,.player_2")) { + var draw = true + } + } + } + return draw + } + + this.reset = function(board,game) { + if (game._current_player === "Player 1") { + game._current_player = "Player 2" + } else { + game._current_player = "Player 1" + } + + board.find('td').each(function() { + $(this).removeClass('player_1').removeClass('player_2'); + }); + } -TicTacToe.prototype = { - }