Skip to content

Instantly share code, notes, and snippets.

@LeonGr
Created September 17, 2014 19:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeonGr/4435987a5f7af252339a to your computer and use it in GitHub Desktop.
Save LeonGr/4435987a5f7af252339a to your computer and use it in GitHub Desktop.
var turn = 1, withAi, firstMove, hard;
// Set all blocks taken to false
blockTaken0 = false,
blockTaken1 = false,
blockTaken2 = false,
blockTaken3 = false,
blockTaken4 = false,
blockTaken5 = false,
blockTaken6 = false,
blockTaken7 = false,
blockTaken8 = false;
// As the function says: listens if a field is clicked by a player
function clickListener(){
var block0 = $(".block0"),
block1 = $(".block1"),
block2 = $(".block2"),
block3 = $(".block3"),
block4 = $(".block4"),
block5 = $(".block5"),
block6 = $(".block6"),
block7 = $(".block7"),
block8 = $(".block8");
$(block0).click(function(){
if (!blockTaken0) {
blockTaken0 = turn;
setMark(0);
checkWinner();
}
});
$(block1).click(function(){
if (!blockTaken1) {
blockTaken1 = turn;
setMark(1);
checkWinner();
}
});
$(block2).click(function(){
if (!blockTaken2) {
blockTaken2 = turn;
setMark(2);
checkWinner();
}
});
$(block3).click(function(){
if (!blockTaken3) {
blockTaken3 = turn;
setMark(3);
checkWinner();
}
});
$(block4).click(function(){
if (!blockTaken4) {
blockTaken4 = turn;
setMark(4);
checkWinner();
}
});
$(block5).click(function(){
if (!blockTaken5) {
blockTaken5 = turn;
setMark(5);
checkWinner();
}
});
$(block6).click(function(){
if (!blockTaken6) {
blockTaken6 = turn;
setMark(6);
checkWinner();
}
});
$(block7).click(function(){
if (!blockTaken7) {
blockTaken7 = turn;
setMark(7);
checkWinner();
}
});
$(block8).click(function(){
if (!blockTaken8) {
blockTaken8 = turn;
setMark(8);
checkWinner();
}
});
}
// makes the field blue or red according to who's turn it is
// also checks of the ai should make the next turn
function setMark(field) {
if (!withAi) {
if (turn == 1) {
$(".block" + field).css('background-color', '#0086ff');
$(".field").css('border', '2px solid #ff0000');
turn = 2;
}
else if (turn == 2) {
$(".block" + field).css('background-color', '#ff0000');
$(".field").css('border', '2px solid #0086FF');
turn = 1;
}
}
else if (withAi) {
if (turn == 1) {
$(".block" + field).css('background-color', '#0086ff');
$(".field").css('border', '2px solid #ff0000');
turn = 2;
checkWinner();
aiTurn();
}
else if (turn == 2){
$(".block" + field).css('background-color', '#ff0000');
$(".field").css('border', '2px solid #0086FF');
turn = 1;
}
}
}
function aiTurn(){
if (hard == false){
// this is all divided by horizontal vertical and diagonal
if (blockTaken4 == false) {
blockTaken4 = 2;
setMark(4);
checkWinner();
}
// checks if Ai can win
else if(blockTaken0 == 2 && blockTaken2 == 2 && !blockTaken1){
blockTaken1 = 2;
setMark(1);
checkWinner();
}
else if(blockTaken3 == 2 && blockTaken5 == 2 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken6 == 2 && blockTaken8 == 2 && !blockTaken7){
blockTaken7 = 2;
setMark(7);
checkWinner();
}
else if(blockTaken0 == 2 && blockTaken6 == 2 && !blockTaken3){
blockTaken3 = 2;
setMark(3);
checkWinner();
}
else if(blockTaken1 == 2 && blockTaken7 == 2 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken2 == 2 && blockTaken8 == 2 && !blockTaken5){
blockTaken5 = 2;
setMark(5);
checkWinner();
}
else if(blockTaken0 == 2 && blockTaken8 == 2 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken2 == 2 && blockTaken6 == 2 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken0 == 2 && blockTaken1 == 2 && !blockTaken2){
blockTaken2 = 2;
setMark(2);
checkWinner();
}
else if(blockTaken3 == 2 && blockTaken4 == 2 && !blockTaken5){
blockTaken5 = 2;
setMark(5);
checkWinner();
}
else if(blockTaken6 == 2 && blockTaken7 == 2 && !blockTaken8){
blockTaken8 = 2;
setMark(8);
checkWinner();
}
else if(blockTaken0 == 2 && blockTaken3 == 2 && !blockTaken6){
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if(blockTaken1 == 2 && blockTaken4 == 2 && !blockTaken7){
blockTaken7 = 2;
setMark(7);
checkWinner();
}
else if(blockTaken2 == 2 && blockTaken5 == 2 && !blockTaken8){
blockTaken8 = 2;
setMark(8);
checkWinner();
}
else if(blockTaken0 == 2 && blockTaken4 == 2 && !blockTaken8){
blockTaken8 = 2;
setMark(8);
checkWinner();
}
else if(blockTaken2 == 2 && blockTaken4 == 2 && !blockTaken6){
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if(blockTaken1 == 2 && blockTaken2 == 2 && !blockTaken0){
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if(blockTaken4 == 2 && blockTaken5 == 2 && !blockTaken3){
blockTaken3 = 2;
setMark(3);
checkWinner();
}
else if(blockTaken7 == 2 && blockTaken8 == 2 && !blockTaken6){
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if(blockTaken3 == 2 && blockTaken6 == 2 && !blockTaken0){
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if(blockTaken4 == 2 && blockTaken7 == 2 && !blockTaken1){
blockTaken1 = 2;
setMark(1);
checkWinner();
}
else if(blockTaken5 == 2 && blockTaken8 == 2 && !blockTaken2){
blockTaken2 = 2;
setMark(2);
checkWinner();
}
else if(blockTaken4 == 2 && blockTaken8 == 2 && !blockTaken0){
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if(blockTaken4 == 2 && blockTaken6 == 2 && !blockTaken2){
blockTaken2 = 2;
setMark(2);
checkWinner();
}
// Checks if Ai should block the opponent
else if(blockTaken0 == 1 && blockTaken2 == 1 && !blockTaken1){
blockTaken1 = 2;
setMark(1);
checkWinner();
}
else if(blockTaken3 == 1 && blockTaken5 == 1 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken6 == 1 && blockTaken8 == 1 && !blockTaken7){
blockTaken7 = 2;
setMark(7);
checkWinner();
}
else if(blockTaken0 == 1 && blockTaken6 == 1 && !blockTaken3){
blockTaken3 = 2;
setMark(3);
checkWinner();
}
else if(blockTaken1 == 1 && blockTaken7 == 1 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken2 == 1 && blockTaken8 == 1 && !blockTaken5){
blockTaken5 = 2;
setMark(5);
checkWinner();
}
else if(blockTaken0 == 1 && blockTaken8 == 1 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken2 == 1 && blockTaken6 == 1 && !blockTaken4){
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if(blockTaken0 == 1 && blockTaken1 == 1 && !blockTaken2){
blockTaken2 = 2;
setMark(2);
checkWinner();
}
else if(blockTaken3 == 1 && blockTaken4 == 1 && !blockTaken5){
blockTaken5 = 2;
setMark(5);
checkWinner();
}
else if(blockTaken6 == 1 && blockTaken7 == 1 && !blockTaken8){
blockTaken8 = 2;
setMark(8);
checkWinner();
}
else if(blockTaken0 == 1 && blockTaken3 == 1 && !blockTaken6){
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if(blockTaken1 == 1 && blockTaken4 == 1 && !blockTaken7){
blockTaken7 = 2;
setMark(7);
checkWinner();
}
else if(blockTaken2 == 1 && blockTaken5 == 1 && !blockTaken8){
blockTaken8 = 2;
setMark(8);
checkWinner();
}
else if(blockTaken0 == 1 && blockTaken4 == 1 && !blockTaken8){
blockTaken8 = 2;
setMark(8);
checkWinner();
}
else if(blockTaken2 == 1 && blockTaken4 == 1 && !blockTaken6){
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if(blockTaken1 == 1 && blockTaken2 == 1 && !blockTaken0){
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if(blockTaken4 == 1 && blockTaken5 == 1 && !blockTaken3){
blockTaken3 = 2;
setMark(3);
checkWinner();
}
else if(blockTaken7 == 1 && blockTaken8 == 1 && !blockTaken6){
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if(blockTaken3 == 1 && blockTaken6 == 1 && !blockTaken0){
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if(blockTaken4 == 1 && blockTaken7 == 1 && !blockTaken1){
blockTaken1 = 2;
setMark(1);
checkWinner();
}
else if(blockTaken5 == 1 && blockTaken8 == 1 && !blockTaken2){
blockTaken2 = 2;
setMark(2);
checkWinner();
}
else if(blockTaken4 == 1 && blockTaken8 == 1 && !blockTaken0){
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if(blockTaken4 == 1 && blockTaken6 == 1 && !blockTaken2){
blockTaken2 = 2;
setMark(2);
checkWinner();
}
else if (blockTaken4 != false && !blockTaken0) {
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if (!blockTaken0) {
blockTaken0 = 2;
setMark(0);
checkWinner();
}
else if (!blockTaken1) {
blockTaken1 = 2;
setMark(1);
checkWinner();
}
else if (!blockTaken2) {
blockTaken2 = 2;
setMark(2);
checkWinner();
}
else if (!blockTaken3) {
blockTaken3 = 2;
setMark(3);
checkWinner();
}
else if (!blockTaken4) {
blockTaken4 = 2;
setMark(4);
checkWinner();
}
else if (!blockTaken5) {
blockTaken5 = 2;
setMark(5);
checkWinner();
}
else if (!blockTaken6) {
blockTaken6 = 2;
setMark(6);
checkWinner();
}
else if (!blockTaken7) {
blockTaken7 = 2;
setMark(7);
checkWinner();
}
else if (!blockTaken8) {
blockTaken8 = 2;
setMark(8);
checkWinner();
}
}
else if (hard){
alert("Unfortunatly I am still working on the hard mode. Sorry for the inconvenience");
}
}
// checks for winner using turn 1 & 2
function checkField(player) {
if (blockTaken0 == player && blockTaken1 == player && blockTaken2 == player) {
$(".block0, .block1, .block2").css("background-color", "#00d500");
return true;
}
if (blockTaken3 == player && blockTaken4 == player && blockTaken5 == player) {
$(".block3, .block4, .block5").css("background-color", "#00d500");
return true;
}
if (blockTaken6 == player && blockTaken7 == player && blockTaken8 == player) {
$(".block6, .block7, .block8").css("background-color", "#00d500");
return true;
}
if (blockTaken0 == player && blockTaken3 == player && blockTaken6 == player) {
$(".block0, .block3, .block6").css("background-color", "#00d500");
return true;
}
if (blockTaken1 == player && blockTaken4 == player && blockTaken7 == player) {
$(".block1, .block4, .block7").css("background-color", "#00d500");
return true;
}
if (blockTaken2 == player && blockTaken5 == player && blockTaken8 == player) {
$(".block2, .block5, .block8").css("background-color", "#00d500");
return true;
}
if (blockTaken0 == player && blockTaken4 == player && blockTaken8 == player) {
$(".block0, .block4, .block8").css("background-color", "#00d500");
return true;
}
if (blockTaken2 == player && blockTaken4 == player && blockTaken6 == player) {
$(".block2, .block4, .block6").css("background-color", "#00d500");
return true;
}
if (blockTaken0 && blockTaken1 && blockTaken2 && blockTaken3 && blockTaken4 && blockTaken5 && blockTaken6 && blockTaken7 && blockTaken8) {
resetGame();
}
}
function checkWinner(){
if (checkField(1)) {
turn = 0;
resetGame();
$(".field").css('border', '2px solid #00d500');
}
else if (checkField(2)) {
turn = 0;
resetGame();
$(".field").css('border', '2px solid #00d500');
}
}
// resets the game
function resetGame(){
$(".block0").animate({
left: '-200px'
}, 1000);
$(".block3").animate({
left: '-150px'
}, 1000);
$(".block6").animate({
top: '200px'
}, 1000);
$(".block7").animate({
top: '150px'
}, 1000);
$(".block1").animate({
top: '-200px'
}, 1000);
$(".block2").animate({
left: '200px'
}, 1000);
$(".block4").animate({
top: '100px',
left: '-200px'
}, 1000 );
$(".block5").animate({
left: '300px'
}, 1000);
$(".block8").animate({
left: '100px',
top: '50px'
}, 1000);
$("#resetbutton").show('slow');
$("#resetbutton").click(function(){
resetVars();
$(".field").css("background-color", "#e9e9e9").animate({
left: "0",
right: "0",
bottom: "0",
top: "0"
}, 1000)
$("#resetbutton").hide('slow');
$(".field").css('border', '2px solid #0086FF');
});
}
function resetVars(){
blockTaken0 = false;
blockTaken1 = false;
blockTaken2 = false;
blockTaken3 = false;
blockTaken4 = false;
blockTaken5 = false;
blockTaken6 = false;
blockTaken7 = false;
blockTaken8 = false;
turn = 1;
}
$(document).ready(function(){
withAi = false;
firstMove = true;
hard = false;
// choose game mode and reset field+vars when clicking pvp/pvai
$("#pvp").click(function(){
$("#pvp").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#ai").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #0086FF');
resetVars();
withAi = false;
$("#firstmove").text('Blue');
$("#secondmove").text('Red');
});
$("#ai").click(function(){
$("#ai").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#pvp").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #0086FF');
resetVars();
withAi = true;
$("#firstmove").text('Player');
$("#secondmove").text('Ai');
});
$("#firstmove").click(function(){
$("#firstmove").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#secondmove").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #0086FF');
resetVars();
firstMove = true;
});
$("#secondmove").click(function(){
if (withAi){
$("#secondmove").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#firstmove").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #0086FF');
resetVars();
firstMove = false;
turn = 2;
aiTurn();
}
else if (!withAi){
$("#secondmove").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#firstmove").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #ff0000');
resetVars();
firstMove = false;
turn = 2;
}
});
$("#easy").click(function(){
$("#easy").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#hard").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #0086FF');
resetVars();
hard = false;
});
$("#hard").click(function(){
if (withAi){
$("#hard").css("border-top", '2px solid #7b787a').css('border-bottom', 'none').css('top', '1px');
$("#easy").css("border-bottom", '2px solid #7b787a').css('border-top', 'none').css('top', '-1px');
$(".field").css("background-color", "#e9e9e9");
$(".field").css('border', '2px solid #0086FF');
resetVars();
hard = true;
}
});
clickListener();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment