Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sailor moon tic tac toe #3

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

sailor moon tic tac toe #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b100f9b
gameboard table created
annamm77 Jun 30, 2016
fbb1874
initial gameboard css styling
annamm77 Jun 30, 2016
8c3d065
alternates colors on click
annamm77 Jun 30, 2016
5e278fa
message displays whose turn it is
annamm77 Jun 30, 2016
0fd7369
cannot move on space that is occupid
annamm77 Jun 30, 2016
bacfd0f
gameover function knows if theres a winning row or not
annamm77 Jun 30, 2016
283630e
alert pops up when a player won
annamm77 Jun 30, 2016
2984bd7
changed red and blue to player 1 and player 2
annamm77 Jul 1, 2016
1bd1e93
fixed can't win bug
annamm77 Jul 1, 2016
cd368e5
recognizes a draw
annamm77 Jul 1, 2016
b031693
alert message displays for draw
annamm77 Jul 1, 2016
cc50be6
gameboard resets and player turns reset after win or draw
annamm77 Jul 1, 2016
a917c79
added bg image, styling, player images
annamm77 Jul 1, 2016
70f46ae
added hover state for spaces
annamm77 Jul 1, 2016
9a57acc
changing font colors
annamm77 Jul 1, 2016
fae115e
more styling. bug where player doesnt reset when theres a draw
annamm77 Jul 1, 2016
8e96921
sweet animations for player markers
annamm77 Jul 1, 2016
5bce54b
removed old pic
annamm77 Jul 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 86 additions & 1 deletion index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
***/
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commenting style looks helpful! Especially if you've got a long file of css!


/*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;
}
30 changes: 28 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,40 @@
<head>
<title>Tic Tac Toe!</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Delius+Unicase:400,700' rel='stylesheet' type='text/css'>
<link href="index.css" media="screen" rel="stylesheet" type="text/css">
</head>

<body>

<h1>Tic Tac Toe</h1>
<div id="tic-tac-toe"></div>

<p id="message"></p>

<div id="tic-tac-toe">

<table id="game-board">
<tr id="top-row">
<td id="space-1"></td>
<td id="space-2"></td>
<td id="space-3"></td>
</tr>
<tr id="middle-row">
<td id="space-4"></td>
<td id="space-5"></td>
<td id="space-6"></td>
</tr>
<tr id="bottom-row">
<td id="space-7"></td>
<td id="space-8"></td>
<td id="space-9"></td>
</tr>
</table>

</div>

</body>

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="tic-tac-toe.js"></script>
<script type="text/javascript">
Expand All @@ -18,4 +45,3 @@ <h1>Tic Tac Toe</h1>
})
</script>
</html>

Binary file added locket.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added locket2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added moon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added starsbg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 117 additions & 3 deletions tic-tac-toe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed from line 18 to here there is some repetition depending on whose turn it is. I wonder if a helper method could have been created to reduce the repetition. Like a play_game method or something.

}
}
})
})


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
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

checkIfWon does what it needs to do! Is there a way to make this more concise to get rid of all of the else if statements? But it might not be worth it, because it's not like you're going to make this a larger game. It will only ever be these 8 statements. Also, since only one of the conditions will be true at a time, they could all just be if statements.

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 = {

}