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

draft submission for TicTacToe #21

Open
wants to merge 10 commits into
base: sat/master
Choose a base branch
from
Open

draft submission for TicTacToe #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d61b8c6
Rough outline of methods required for TicTicToe
trowbrsa Jan 28, 2016
17c926a
Changed logic of play
trowbrsa Jan 28, 2016
2e4bbae
Can now pass what tile has been clicked on to board array
trowbrsa Jan 29, 2016
b70af40
Added logic for assigning x and y value for player 1 and player 2
trowbrsa Jan 29, 2016
d373a19
Added a method to split slot class name so that we only have index va…
trowbrsa Jan 29, 2016
b2decb7
Updated board so that it now includes the position of the play for ea…
trowbrsa Jan 29, 2016
9f6840d
One successful iteration of a win
trowbrsa Jan 29, 2016
930abf9
Added additional win cases
trowbrsa Jan 29, 2016
e1fd889
Fixed syntax on win function
trowbrsa Jan 29, 2016
183e14b
Updated logic for player 1 and player 2 - player 1 now starts at index 0
trowbrsa Feb 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
14 changes: 13 additions & 1 deletion index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
html {

font-size: 16px;
color: white;
}

body {
background-color: black;
}

.slot {
background-color: gray;
width: 75px;
height: 75px;
margin: 5px;
}
28 changes: 24 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,33 @@
<body>
<h1>Tic Tac Toe</h1>
<div id="tic-tac-toe"></div>
<div class="board">
<div class="row">
<button class="slot 0"></button>
<button class="slot 1"></button>
<button class="slot 2"></button>
</div>
<div class="row">
<button class="slot 3"></button>
<button class="slot 4"></button>
<button class="slot 5"></button>
</div>
<div class="row">
<button class="slot 6"></button>
<button class="slot 7"></button>
<button class="slot 8"></button>
</div>
</div>
<div class="win message">
<p></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">
$(document).on('ready', function() {
console.log('create and begin the game here!');
})
// $(document).on('ready', function() {
// var game = new TicTacToe();
// game.play();
// })
</script>
</html>

86 changes: 81 additions & 5 deletions tic-tac-toe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,83 @@
function TicTacToe() {
$(document).on('ready', function() {
var game = new TicTacToe();

}
// click handler - keep it separate
// we could have saved the button clicking function to a variable and then passed that variable to click
$(":button").click( function(){
if (game.turns % 2 === 0) {
$(this).css('background-color', 'red');
} else {
$(this).css('background-color', 'green');
}
// this gives me the class that the person has clicked on and is storing the value so I can use it elsewhere
var position = $(this).attr("class").split(" ")[1];
game.play(position, game.marker());
});
});

TicTacToe.prototype = {

}
// creates a class that initializes constructor for tictactoe class
// create a function for each of these functions?
function TicTacToe() {
this.board = [];
this.player = "player1";
this.turns = 0;
}

TicTacToe.prototype.play = function(position, marker) {
this.turn();
Copy link

Choose a reason for hiding this comment

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

Watch your indentation here

Copy link

Choose a reason for hiding this comment

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

It seems like you would want to switch the players at the end of a turn instead of at the beginning of the turn, right? Will this then end up with player 2 as the first player?

this.board[position] = marker;
this.won();
};

TicTacToe.prototype.turn = function(){
this.turns++;
if (this.turns % 2 === 0) {
this.player = "player1";
} else {
this.player = "player2";
}
};

TicTacToe.prototype.marker = function(player){
if (this.player === "player1") {
return 'x';
} else {
return 'o';
}
};

TicTacToe.prototype.getPlayerName = function(){
if (this.turn % 2 === 0 ) {
Copy link

Choose a reason for hiding this comment

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

It seems like you should be able to use the this.player variable to retrieve this data as opposed to using the turn variable to determine which player it is again.

return "player 1";
} else {
return "player 2";
}
};

// create function for winMessage

TicTacToe.prototype.won = function(){
// could also pair this down by creating a row 1 variable
if (this.board.slice(0,2) === ['x','x','x'] || this.board.slice(0,2) === ['o','o','o']) {
Copy link

Choose a reason for hiding this comment

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

If you test out the slice(0,2) method in your console, you'll see that it gives you from index 0 up to and not including 2, so it will only give you the first two elements rather than the first three. I bet if you update these to be slice(0,3) it will get a step further.

console.log("You win!");
var div = $('<div class = "won_message"></div>');
var winMessage = $('<p></p>');
winMessage.text(this.getPlayerName() + "won!");
div.append(winMessage);
$('body').append('div');
debugger;
// return true;
} else if (this.board.slice(3,5) === ['x','x','x'] || this.board.slice(3,5) === ['o','o','o']) {
Copy link

Choose a reason for hiding this comment

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

Same comment re: the slice params, here and on line 73

console.log("You win!");
return true;
} else if (this.board.slice(6,8) === ['x','x','x'] || this.board.slice(6,8) === ['o','o','o']) {
console.log("You win!");
return true;
}
};
// if someone has taken 8 or 9 turns with no win, its a draw.


// var won = function(board){
// // loop through and see if someone has won horizontally, vertically, diagonally
// }