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! #10

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

tic tac toe! #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aae91a3
setting up html/css for game board
jlikesplants Jun 30, 2016
f4a6191
oops forgot to do commits. players switch for each turn.
jlikesplants Jul 1, 2016
222a77a
well on the way to win function.
jlikesplants Jul 1, 2016
9d2a272
styling
jlikesplants Jul 1, 2016
29d9c2c
more styling but bad
jlikesplants Jul 1, 2016
ecfbcdb
players can choose who goes first, removed old function
jlikesplants Jul 1, 2016
dd71ff0
added draw/tie function
jlikesplants Jul 1, 2016
4b70c6e
adding some more styling
jlikesplants 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
Binary file added cat.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 dog.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.
59 changes: 58 additions & 1 deletion index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,60 @@
html {

font-family: 'Permanent Marker', cursive;
}

h1 {
text-align: center;
font-size: 60px;
}

.board table {
display: block;
margin-left: 30%;
margin-right: 30%;
}

.photos {
margin: 0 auto;
width: 345px;
text-align: center;
}

#choose_cat {
display: inline;
}

#choose_cat img {
width: 175px;
height: 175px;
}

#choose_dog {
display: inline;
}

#choose_dog img {
width: 145px;
height: 145px;
}

.checkbox {
width:150px;
height:150px;
border-color: black;
border-style: solid;
border-radius: 4px;
}

.checkbox:hover {
background-color: #ffdc73;
}

.checkbox .cat {
width:150px;
height:150px;
}

.checkbox .dog {
width:150px;
height:150px;
}
35 changes: 32 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe!</title>
<title>Tic Tac Toe</title>
<meta charset="utf-8">
<link href="index.css" media="screen" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
</head>

<body>
<h1>Tic Tac Toe</h1>
<div id="tic-tac-toe"></div>
<div class='photos'>
<div id='choose_cat'>
<img src='cat.png'>
</div>
<div id='choose_dog'>
<img src='dog.jpg'>
</div>
<p>Click an animal to begin.</p>
</div>
<div class='board'>
<table>
<tr id="row1">
<td class="checkbox"><img class="image" id="1"></td>
<td class="checkbox"><img class="image" id="2"></td>
<td class="checkbox"><img class="image" id="3"></td>
</tr>
<tr id="row2">
<td class="checkbox"><img class="image" id="4"></td>
<td class="checkbox"><img class="image" id="5"></td>
<td class="checkbox"><img class="image" id="6"></td>
</tr>
<tr id="row3">
<td class="checkbox"><img class="image" id="7"></td>
<td class="checkbox"><img class="image" id="8"></td>
<td class="checkbox"><img class="image" id="9"></td>
</tr>
</table>
</div>
<div class="showimagediv">
</div>
</body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="tic-tac-toe.js"></script>
Expand All @@ -18,4 +48,3 @@ <h1>Tic Tac Toe</h1>
})
</script>
</html>

135 changes: 130 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,132 @@
function TicTacToe() {

}
$(document).ready(function () {

TicTacToe.prototype = {

}
function TicTacToe() {
this.current_player = 1
this.turns = 0
}

var game = new TicTacToe()

TicTacToe.prototype.square_free = function (checkbox) {
var image = $(checkbox).find('.image')
if (image.hasClass('cat') || image.hasClass('dog')) {
return true
}
}

TicTacToe.prototype.switch_player = function () {
if (game.current_player === 1) {
game.current_player = 2
} else {
game.current_player = 1
}
}

TicTacToe.prototype.play = function (checkbox) {
var image = $(checkbox).find('.image')
if (game.square_free) {
if (game.current_player === 1) {
image.addClass('cat')
image.attr('src', 'cat.png')
} else {
image.addClass('dog')
image.attr('src', 'dog.jpg')
}
game.turns += 1
console.log(game.turns)
game.win()
game.draw()
game.switch_player()
} else {
alert("Please choose a free square.")
}
}

TicTacToe.prototype.win = function () {
var cat_box = {
'#1': ('image cat' === $('.checkbox').find( '#1' )[0].className),
'#2': ('image cat' === $('.checkbox').find( '#2' )[0].className),
'#3': ('image cat' === $('.checkbox').find( '#3' )[0].className),
'#4': ('image cat' === $('.checkbox').find( '#4' )[0].className),
'#5': ('image cat' === $('.checkbox').find( '#5' )[0].className),
'#6': ('image cat' === $('.checkbox').find( '#6' )[0].className),
'#7': ('image cat' === $('.checkbox').find( '#7' )[0].className),
'#8': ('image cat' === $('.checkbox').find( '#8' )[0].className),
'#9': ('image cat' === $('.checkbox').find( '#9' )[0].className)
}

if( cat_box['#1'] && cat_box['#2'] && cat_box['#3'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#1'] && cat_box['#4'] && cat_box['#7'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#1'] && cat_box['#5'] && cat_box['#9'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#4'] && cat_box['#5'] && cat_box['#6'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#7'] && cat_box['#8'] && cat_box['#9'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#2'] && cat_box['#5'] && cat_box['#8'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#3'] && cat_box['#6'] && cat_box['#9'] ) {
alert('kitties rule, puppies drool!')
} else if ( cat_box['#3'] && cat_box['#5'] && cat_box['#7'] ) {
alert('kitties rule, puppies drool!')
}

var dog_box = {
'#1': ('image dog' === $('.checkbox').find( '#1' )[0].className),
'#2': ('image dog' === $('.checkbox').find( '#2' )[0].className),
'#3': ('image dog' === $('.checkbox').find( '#3' )[0].className),
'#4': ('image dog' === $('.checkbox').find( '#4' )[0].className),
'#5': ('image dog' === $('.checkbox').find( '#5' )[0].className),
'#6': ('image dog' === $('.checkbox').find( '#6' )[0].className),
'#7': ('image dog' === $('.checkbox').find( '#7' )[0].className),
'#8': ('image dog' === $('.checkbox').find( '#8' )[0].className),
'#9': ('image dog' === $('.checkbox').find( '#9' )[0].className)
}

if( dog_box['#1'] && dog_box['#2'] && dog_box['#3'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#1'] && dog_box['#4'] && dog_box['#7'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#1'] && dog_box['#5'] && dog_box['#9'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#4'] && dog_box['#5'] && dog_box['#6'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#7'] && dog_box['#8'] && dog_box['#9'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#2'] && dog_box['#5'] && dog_box['#8'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#3'] && dog_box['#6'] && dog_box['#9'] ) {
alert('WOOF WOOF WOOF!')
} else if ( dog_box['#3'] && dog_box['#5'] && dog_box['#7'] ) {
alert('WOOF WOOF WOOF!')
}
}

// TicTacToe.prototype.reset = function () {
// var cat = $('checkbox').find('#1')
// cat.removeClass('image cat')
// console.log("reset")
// }

TicTacToe.prototype.draw = function () {
if ((game.turns === 9) && !game.win()) {
alert("It's a draw.")
}
}

$('#choose_cat').click(function() {
game.current_player = 1
})

$('#choose_dog').click(function() {
game.current_player = 2
})

$('.checkbox').click(function() {
game.play(this)
})

})