Skip to content

Instantly share code, notes, and snippets.

@marcuszierke

marcuszierke/ticTacToe.html

Created October 31, 2017 18:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcuszierke/5c0e0f8ae6c38a8a10b727bb4cc57871 to your computer and use it in GitHub Desktop.
Save marcuszierke/5c0e0f8ae6c38a8a10b727bb4cc57871 to your computer and use it in GitHub Desktop.
Download ZIP
Another Free Code Camp challenge to code the Tic Tac Toe game
Raw
ticTacToe.html
<html>
<head>
<meta charset="utf-8">
<title>Free Code Camp - Tic Tac Toe Game</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/redmond/jquery-ui.css">
<style type="text/css"><
body {
background-color: white;
color: white;
}
h2 {
color: black;
margin-top: 20px;
margin-bottom: 20px;
}
#turnX, #turnO {
margin-left: auto;
height: 40px;
}
.container-inner {
position: absolute;
width: 300px;
left: 50%;
margin-left: -127.5px;
}
.col-4 {
margin-left: -15px;
height: 100px;
}
.btn {
background-color: black;
color: white !important;
border-radius: 0;
font-size: 20px;
height: 100px;
width: 100px;
border-color: transparent;
}
.btn:hover {
background-color: black;
border-color: transparent;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.js"></script>
<script type="text/javascript" src="ticTacToeCode.js"></script>
</head>
<div class="container text-center">
<h2>Free Code Camp - Tic Tac Toe Game</h2>
<div class="btn btn-primary" id="turnX">TurnX</div>
<div class="btn btn-primary" id="turnO">TurnO</div>
</div>
<br>
<div class="container">
<div class="container-inner">
<div class="row">
<div class="col-4">
<a class="btn btn-primary tic" id="0">#</a>
</div>
<div class="col-4">
<a class="btn btn-primary tic" id="1">#</a>
</div>
<div class="col-4">
<a class="btn btn-primary tic" id="2">#</a>
</div>
</div>
<div class="row">
<div class="col-4">
<a class="btn btn-primary tic" id="3">#</a>
</div>
<div class="col-4">
<a class="btn btn-primary tic" id="4">#</a>
</div>
<div class="col-4">
<a class="btn btn-primary tic" id="5">#</a>
</div>
</div>
<div class="row">
<div class="col-4">
<a class="btn btn-primary tic" id="6">#</a>
</div>
<div class="col-4">
<a class="btn btn-primary tic" id="7">#</a>
</div>
<div class="col-4">
<div class="btn btn-primary tic" id="8">#</div>
</div>
</div>
</div>
</div>
</html>
Raw
ticTacToeCode.js
$(document).ready(function() {
//sets the players turn to X
var playersTurn = "X";
//sets the computers turn to O
var computersTurn = "O";
//array with saved turns
var turns = ["#","#","#","#","#","#","#","#","#"];
var gameOn = false;
//keeps track of computers turn so no loop
var count = 0;
//change player's turn to X
$("#turnX").click(function() {
playersTurn = "X";
computersTurn = "O";
$("#turnO").addClass("btn-primary");
$("#turnX").removeClass("btn-primary");
$("#turnX").css({'background-color' : 'white', 'color' : 'black'});
$("#turnO").css({'background-color' : 'black', 'color' : 'white'});
reset();
});
//change player's turn to X
$("#turnO").click(function() {
playersTurn = "O";
computersTurn = "X";
$("#turnX").addClass("btn-primary");
$("#turnO").removeClass("btn-primary");
$("#turnO").css({'background-color' : 'white', 'color' : 'black'});
$("#turnX").css({'background-color' : 'black', 'color' : 'white'});
reset();
});
//function if it's the computer's turn
function computerTurn() {
//used to break the while loop
var taken = false;
while(taken === false && count !== 5) {
//generate computer's random turn
var computersMove = (Math.random() * 10).toFixed();
var move = $("#" + computersMove).html();
if(move === "#") {
$("#" + computersMove).html(computersTurn);
turns[computersMove] = computersTurn;
taken = true;
}
}
}
//changes button to Players input
$(".tic").click(function() {
var slot = $(this).attr("id");
var spotTaken = $("#" + slot).html();
if(spotTaken === "#") {
count++;
turns[slot] = playersTurn;
$("#" + slot).html(playersTurn);
winCondition(turns, playersTurn);
if(gameOn === false) {
computerTurn();
winCondition(turns, computersTurn);
}
}
});
//resets the game
function reset() {
turns = ["#","#","#","#","#","#","#","#","#"];
$(".tic").html("#");
count = 0;
gameOn = true;
}
//defines the rules for winning a tic tac toe game
function winCondition(turns, currentPlayer) {
if(turns[0] === currentPlayer && turns[1] === currentPlayer && turns[2] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with first row!");
}
else if(turns[3] === currentPlayer && turns[4] === currentPlayer && turns[5] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with second row!");
}
else if(turns[6] === currentPlayer && turns[17] === currentPlayer && turns[8] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with third row!");
}
else if(turns[0] === currentPlayer && turns[3] === currentPlayer && turns[6] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with first column!");
}
else if(turns[1] === currentPlayer && turns[4] === currentPlayer && turns[7] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with second column!");
}
else if(turns[2] === currentPlayer && turns[5] === currentPlayer && turns[8] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with third column!");
}
else if(turns[0] === currentPlayer && turns[4] === currentPlayer && turns[8] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with diagonal from top left to bottom right!");
}
else if(turns[6] === currentPlayer && turns[4] === currentPlayer && turns[2] === currentPlayer) {
gameOn = true;
reset();
alert("Player " + currentPlayer + " won the game with diagonal bottom left to top right!");
}
else {
gameOn = false;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment