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

Tic Tac Toe #2

Open
wants to merge 12 commits into
base: ked/master
Choose a base branch
from
Open

Tic Tac Toe #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c13ff14
initial board setup
kedevlin Jan 28, 2016
8775c22
initial play turn functionality
kedevlin Jan 28, 2016
1e6e86f
error if spot has already been clicked
kedevlin Jan 28, 2016
76a8626
all 9 spots are clickable
kedevlin Jan 28, 2016
1bd6f6b
create winning scenario
kedevlin Jan 28, 2016
80cc514
remove table when a player wins
kedevlin Jan 28, 2016
1b75085
check for all winning scenarios
kedevlin Jan 28, 2016
5589ae7
refactor click function code
kedevlin Jan 29, 2016
29ed00e
change html for winning display
kedevlin Jan 29, 2016
0c1e257
Add background and refactor to make players objects
kedevlin Jan 29, 2016
11fbe44
Update CSS and remove unnecessary isTurn attribute
kedevlin Jan 29, 2016
4b9c154
add game over logic
kedevlin Jan 29, 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
50 changes: 49 additions & 1 deletion index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,51 @@
html {

background: url(./jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#board_title {
padding-bottom: 1%;
padding-top: 10%;
}

h1 {
text-align: center;
font-family: arial;
}

p {
text-align: center;
}

table {
border-collapse: collapse;
width: 30%;
margin: auto;
}

table td {
border: 1px solid black;
}

table tr:first-child td {
border-top: 0;
}

table tr:last-child td {
border-bottom: 0;
}

table tr td:first-child {
border-left: 0;
}

table tr td:last-child {
border-right: 0;
}

td {
padding: 10%;
}
51 changes: 47 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,58 @@
</head>

<body>
<h1>Tic Tac Toe</h1>
<h1 id="board_title">Tic Tac Toe</h1>
<div id="tic-tac-toe"></div>
<div id="board">
<table>
<tr>
<td class="row_0 column_0">
🍌
</td>
<td class="row_0 column_1">
🍌
</td>
<td class="row_0 column_2">
🍌
</td>
</tr>
<tr>
<td class="row_1 column_0">
🍌
</td>
<td class="row_1 column_1">
🍌
</td>
<td class="row_1 column_2">
🍌
</td>
</tr>
<tr>
<td class="row_2 column_0">
🍌
</td>
<td class="row_2 column_1">
🍌
</td>
<td class="row_2 column_2">
🍌
</td>
</tr>
</table>
<h1 class="board_footer">Abu vs. Ham</h1>
<p class="board_footer">
🐵&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;🐷
</p>
</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">



<!-- <script type="text/javascript">
$(document).on('ready', function() {
console.log('create and begin the game here!');
})
</script>
</script> -->
</html>

Binary file added jungle.jpg
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.
85 changes: 82 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,86 @@
function TicTacToe() {

this.board = [[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
this.player_1 = new Player(1, "Ham", "🐷");
Copy link

Choose a reason for hiding this comment

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

I like the way you've encapsulated the player properties in a separate object

this.player_2 = new Player(2, "Abu", "🐵");
this.current_player = this.player_1;
this.winning_sequence = null;
this.turnCount = 0;
}

TicTacToe.prototype = {

function Player(number, name, marker) {
Copy link

Choose a reason for hiding this comment

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

I think that this function can be outside of the TicTacToe prototype since it represents a different type of object.

this.number = number;
this.name = name;
this.marker = marker;
}

TicTacToe.prototype.playTurn = function(row, column) {
this.board[row][column] = this.current_player.number;
this.checkWinningBoard();
this.turnCount++;
if (this.winning_sequence) {
$("td").empty();
$(".board_footer").empty();
$(".row_" + this.winning_sequence[0][0] + ".column_" + this.winning_sequence[0][1]).text(this.current_player.marker);
$(".row_" + this.winning_sequence[1][0] + ".column_" + this.winning_sequence[1][1]).text(this.current_player.marker);
$(".row_" + this.winning_sequence[2][0] + ".column_" + this.winning_sequence[2][1]).text(this.current_player.marker);
$( "table").after("<h1>" + this.current_player.name + " Wins!" + "</h1>");
} else if (this.turnCount === 9) {
$(".board_footer").empty();
$( "table").after("<h1>Game Over</h1>");
} else {
this.switch_player();
}
};

TicTacToe.prototype.switch_player = function() {
if (this.current_player === this.player_1) {
this.current_player = this.player_2;
} else {
this.current_player = this.player_1;
}
};

TicTacToe.prototype.checkWinningBoard = function() {
if ((this.board[0][0] === this.current_player.number) && (this.board[0][1] === this.current_player.number) && (this.board[0][2] === this.current_player.number)) {
Copy link

Choose a reason for hiding this comment

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

I wonder if you could put all of these row/col values in an array and iterate over it to slightly more dynamically create this winning sequence instead of using this many conditionals.

this.winning_sequence = [[0, 0], [0, 1], [0, 2]];
} else if ((this.board[1][0] === this.current_player.number) && (this.board[1][1] === this.current_player.number) && (this.board[1][2] === this.current_player.number)) {
this.winning_sequence = [[1,0], [1,1], [1,2]];
} else if ((this.board[2][0] === this.current_player.number) && (this.board[2][1] === this.current_player.number) && (this.board[2][2] === this.current_player.number)) {
this.winning_sequence = [[2,0], [2,1], [2,2]];
} else if ((this.board[0][0] === this.current_player.number) && (this.board[1][0] === this.current_player.number) && (this.board[2][0] === this.current_player.number)) {
this.winning_sequence = [[0,0], [1,0], [2,0]];
} else if ((this.board[0][1] === this.current_player.number) && (this.board[1][1] === this.current_player.number) && (this.board[2][1] === this.current_player.number)) {
this.winning_sequence = [[0,1], [1,1], [2,1]];
} else if ((this.board[0][2] === this.current_player.number) && (this.board[1][2] === this.current_player.number) && (this.board[2][2] === this.current_player.number)) {
this.winning_sequence = [[0,2], [1,2], [2,2]];
} else if ((this.board[0][0] === this.current_player.number) && (this.board[1][1] === this.current_player.number) && (this.board[2][2] === this.current_player.number)) {
this.winning_sequence = [[0,0], [1,1], [2,2]];
} else if ((this.board[0][2] === this.current_player.number) && (this.board[1][1] === this.current_player.number) && (this.board[2][0] === this.current_player.number)) {
this.winning_sequence = [[0,2], [1,1], [2,0]];
}
};

$(document).ready(function() {
var game = new TicTacToe();

var make_clickable = function(row, column) {
$(".row_" + row + ".column_" + column).click(function() {
if (game.board[row][column] !== 0) {
throw new Error ("This spot is already claimed!");
Copy link

Choose a reason for hiding this comment

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

What happens to the users experience when this error is thrown?

}
$(this).text(game.current_player.marker);
game.playTurn(row,column);
});
};

for (var i = 0; i < (game.board.length); i++) {
var row = game.board[i];
for (var j = 0; j < (row.length); j++) {
make_clickable(i, j);
Copy link

Choose a reason for hiding this comment

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

I like the way you add this click handler to each row/col dynamically

}
}

});