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

ticTacToe.html #8

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ticTacToe.html #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 36 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<!-- set viewport to device width to allow responsiveness -->
<head>
<meta charset="utf-8">
<!-- set viewport to device width to allow responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS from CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- link to custom stylesheet (always require after Bootstrap) -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- jQuery from CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- jQuery from CDN -->


<!-- link to custom javascript file (always require after external JS libraries) -->
<!-- link to custom javascript file (always require after external JS libraries) -->
<script type="text/javascript" src="ticTacToe.js"></script>

<title>Tic Tac Toe</title>
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="container text-center">
<div class="row">
<div class="col-md-12">
<h1>Tic Tac Toe</h1>
<h1>Tic Tac Toe</h1>
<hr>
</div>
</div>
Expand All @@ -35,15 +36,32 @@ <h1>Tic Tac Toe</h1>
<!-- you can put rows inside of columns! -->
<!-- Bootstrap subdivides these 'nested' rows into 12 columns, too! -->
<div class="row">
<div class="col-md-4 box">a</div>
<div class="col-md-4 box">a</div>
<div class="col-md-4 box">a</div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>


<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>

<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
<button class="btn btn-lg btn-danger" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>

</body>
</html>

19 changes: 19 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
tictactoe.js
#board {
margin-top: 10px;
margin-bottom: 10px;
}

.box {
border: 1px solid black;
cursor: pointer;
font-size: 60px;
height: 150px;
padding: 40px 0;
background-color: purple;
}
.X {
color: black;
}


.O {
color: grey;
}

.btn-danger {
background-color: purple;
border-color: black;
}
132 changes: 130 additions & 2 deletions ticTacToe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,134 @@
// wait for the DOM to finish loading
$(document).ready(function{
$(document).ready(function(){
// all code to manipulate the DOM
// goes inside this function

// select all the necessary elements
// we speed up the site a little by using the $() selector once
// and saving variables instead of selecting over and over
var $board = $('#board'),
$boxes = $('.box'),
$reset = $('#reset');

// player "X" always goes first, and player "O" always goes second
var turn = "X";

// count how many moves have happened since reset
// a full game is 9 moves
var moves = 0;

// helper function to change turn to the next player
var changeTurn = function() {
if (turn === "X") {
turn = "O";
} else {
turn = "X";
}
};

// helper function to reset board
var resetGame = function() {
// reset the board itself
$boxes.text("");
$boxes.removeClass("X");
$boxes.removeClass("O");

// reset the variables that track game progress

// player X always goes first
turn = "X";

// reset moves count
moves = 0;
};

// helper function to check for wins
// returns true if the player passed into the function ("X" or "O")
var allThree = function(player, box1, box2, box3) {
// note that $boxes.get(i) returns a plain dom element
// so all of these boxes are passed in as non-jQuery DOM elements
// we convert them to jQuery using $()
return ($(box1).text() === player) && ($(box2).text() === player) && ($(box3).text() === player);
};

// check for wins across both diagonals
// returns true if player owns all three boxes in one of the diagonals
var winsDiagonal = function(player) {
return allThree(player, $boxes.get(0), $boxes.get(4), $boxes.get(8)) ||
allThree(player, $boxes.get(2), $boxes.get(4), $boxes.get(6));
};

// check for wins on columns
// returns true if player owns all three boxes in one of the columns
var winsColumn = function(player) {
return allThree(player, $boxes.get(0), $boxes.get(3), $boxes.get(6)) ||
allThree(player, $boxes.get(1), $boxes.get(4), $boxes.get(7)) ||
allThree(player, $boxes.get(2), $boxes.get(5), $boxes.get(8));
};

// check for wins on columns
// returns true if player owns all three boxes in one of the rows
var winsRow = function(player) {
return allThree(player, $boxes.get(0), $boxes.get(1), $boxes.get(2)) ||
allThree(player, $boxes.get(3), $boxes.get(4), $boxes.get(5)) ||
allThree(player, $boxes.get(6), $boxes.get(7), $boxes.get(8));
};

// checks for wins on full board
// returns true if player is winner of a row, column, or diagonal
var winnerIs = function(player) {
return winsRow(player) || winsColumn(player) || winsDiagonal(player);
};

// helper function to check for winner
var getWinner = function() {
if (winnerIs("X")) {
return "X";
}
else if (winnerIs("O")) {
return "O";
}
else {
return null;
}
};

// listen for clicks on each box
// ('event delegation' is a more efficient way to do this part,
// but we'll keep it simple for now)
$boxes.on('click', function() {
// check if this box is already claimed
if ($(this).text() === "") {

// box is empty! continue with the turn
// mark this box
$(this).text(turn);
$(this).addClass(turn);
// increase move counter
moves += 1;

// check for a winner
var winner = getWinner();
if (winner) {
// there is a winner!
// alert the win and reset the game
alert("Player " + winner + " won!");
resetGame();
} else if (moves < 9) {
// there is no winner, yet,
// but since fewer than 9 moves have been made,
// there are empty spaces left. on to the next turn!
changeTurn();
} else {
// there is no winner, and there are no empty spaces
// alert the result and reset the game
alert("Neither player wins!");
resetGame();
}
}
});

// listen for clicks on `reset` button to reset the board
$reset.on('click', function () {
resetGame();
});
});
67 changes: 67 additions & 0 deletions tictactoe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- set viewport to device width to allow responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS from CDN -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- link to custom stylesheet (always require after Bootstrap) -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- jQuery from CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- link to custom javascript file (always require after external JS libraries) -->
<script type="text/javascript" src="ticTacToe.js"></script>

<title>Tic Tac Toe</title>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col-md-12">
<h1>Tic Tac Toe</h1>
<hr>
</div>
</div>
<div class="row">

<!-- a column represents our game board -->
<!-- the `offset` class helps us center the board -->
<div class="col-md-6 col-md-offset-3" id="board">

<!-- you can put rows inside of columns! -->
<!-- Bootstrap subdivides these 'nested' rows into 12 columns, too! -->
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>

<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>

<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
<button class="btn btn-lg btn-danger" id="reset">Reset</button>
</div>
</div>
</div>

</body>
</html>