Skip to content

Instantly share code, notes, and snippets.

@furball514

furball514/index.html

Created February 7, 2017 21:13
Show Gist options
  • Save furball514/8ccaa94acb629937dc49c0ddbe9cefcf to your computer and use it in GitHub Desktop.
Save furball514/8ccaa94acb629937dc49c0ddbe9cefcf to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe Game
Raw
index.html
<head>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
</head>
<body>
<h6>NOTE: IF YOU WIN WITH NO CAUSE, PLEASE <a href=""> REFRESH </a> THE PAGE.</h6>
<h6>BEST VIEWED ON A MEDIUM SIZED SCREEN. </h6>
<div class="container">
<h1> tic </h1>
<h1> tac </h1>
<h1> toe </h1>
<div>
<h3> CLICK TO CHOOSE </h3>
<div class="row">
<a id="chooseX" class="col-md-1"> X </a>
<a id="chooseO" class="col-md-1"> <span class="fa fa-circle-o"> </span> </a>
<a id="reset"> Reset </a> </div>
</div>
<div class="well">
<div class="row">
<button id="1" class="btn col-md-1 one"> </button>
<button id="2" class="btn col-md-1 two"> </button> <button id="3" class="btn col-md-1 three"> </button> </div>
<div class="row">
<button id="4" class="btn col-md-1 four"> </button>
<button id="5" class="btn col-md-1 five"> </button> <button id="6" class="btn col-md-1 six" > </button> </div>
<div class="row">
<button id="7" class="btn col-md-1 seven"> </button> <button id="8" class="btn col-md-1 eight"> </button> <button id="9" class="btn col-md-1 nine"> </button>
</div>
</div>
</div>
</body>
<!-- test with hashtags else do &diams; -->
<!-- try fa times and fa circle o -->
<!--modal -->
</div>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
YOU WIN!!!!!!
<a class="btn-close trigger"></a>
</div>
<div class="content">
<span class="fa fa-trophy"> </span> CONGRATULATIONS!!!!!
</div>
Raw
script.js
//NOTE: IF YOU WIN WITHOUT ANY CAUSE PLEASE REFRESH THE PAGE.
//BEST VIEWED ON LAPTOP
function main() {
var computer = 'O';
var player = 'X';
var arr = [1,2,3,4,5,6,7,8,9];
var locked=[];
//VARIABLES FOR WINCONDITION
var onu;
var rendu;
var moonu;
var naalu;
var anju;
var aru;
var elu;
var ettu;
var ombat;
// var open =[];
//var rem;
//console.log(arr.splice(0,1))
/* rem = arr.indexOf(2);
if(rem != -1) {
arr.splice(rem, 1);
}
console.log(arr)*/
//var i = 0;
$('#chooseX').click(function(){
computer ='O';
player ='X'; $('#chooseX').addClass('red');
$('#chooseO').removeClass('red');
alert ('dont change your choice!');
});
$('#chooseO').click(function(){
// rendu =player;
computer ='X';
player ='O'; $('#chooseO').addClass('red');
$('#chooseX').removeClass('red');
alert ('dont change your choice!');
});
$('#1').click(function(){
$('#1').text(player);
/* rem = arr.indexOf(1);
if(rem != -1) {
arr.splice(rem, 0);} */
onu = 'taken';
locked.push(1) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
//open=arr.splice(0,1);
setTimeout(play,1000);
});
$('#2').click(function(){
$('#2').text(player);
/* rem = arr.indexOf(2);
if(rem != -1) {
arr.splice(rem, 1);
}*/rendu = 'taken';
locked.push(2) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
setTimeout(play,1000);
});
$('#3').click(function(){
$('#3').text(player);
moonu = 'taken';
locked.push(3) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
/* rem = arr.indexOf(3);
if(rem != -1) {
arr.splice(rem, 2);
}*/
setTimeout(play,1000);
});
$('#4').click(function(){
$('#4').text(player);
naalu = 'taken';
locked.push(4) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
/* rem = arr.indexOf(4);
if(rem != -1) {
arr.splice(rem, 3);
}*/
setTimeout(play,1000);
});
$('#5').click(function(){
$('#5').text(player);
anju = 'taken';
/* rem = arr.indexOf(5);
if(rem != -1) {
arr.splice(rem, 4);
} */
locked.push(5) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
setTimeout(play,1000);
});
$('#6').click(function(){
$('#6').text(player);
aru = 'taken';
/* rem = arr.indexOf(6);
if(rem != -1) {
arr.splice(rem, 5);
}*/
locked.push(6) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
setTimeout(play,1000);
});
$('#7').click(function(){
$('#7').text(player);
/* rem = arr.indexOf(7);
if(rem != -1) {
arr.splice(rem, 6);
}*/elu = 'taken';
locked.push(7) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});
setTimeout(play,1000);
});
$('#8').click(function(){
$('#8').text(player);
locked.push(8) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});ettu = 'taken';
/* rem = arr.indexOf(8);
if(rem != -1) {
arr.splice(rem, 7);
}*/
setTimeout(play,1000);
});
$('#9').click(function(){
$('#9').text(player);
locked.push(9) ;
arr = $.grep(arr, function(value) {
return $.inArray(value, locked) < 0;
});ombat = 'taken';
/* rem = arr.indexOf(9);
if(rem != -1) {
arr.splice(rem, 8);
}*/
setTimeout(play,1000);
});
function play () {
//Math.floor(Math.random() * arr.length -1);
//var open =[];
var randomNumber=Math.floor(Math.random() * arr.length+1);
if(arr[randomNumber]===undefined) {alert('Error!Please Refresh Page!');}
$('#' + arr[randomNumber ]).text(computer) ;
if(arr[randomNumber]!==undefined){locked.push(arr[randomNumber]);}
console.log(randomNumber,arr[randomNumber]);
if (arr[randomNumber]==1) {onu='ctaken'}
else if (arr[randomNumber]==2) {rendu='ctaken'}
else if (arr[randomNumber]==3) {moonu='ctaken'}
else if (arr[randomNumber]==4) {naalu='ctaken'}
else if (arr[randomNumber]==5) {anju='ctaken'}
else if (arr[randomNumber]==6) {aru='ctaken'}
else if (arr[randomNumber]==7) {elu='ctaken'}
else if (arr[randomNumber]==8) {ettu='ctaken'}
else if (arr[randomNumber]==9) {ombat='ctaken'}
if (onu==='ctaken'&&rendu==='ctaken'&&moonu==='ctaken') {cwin();}
else if (onu==='ctaken'&&naalu==='ctaken'&&elu==='ctaken') {cwin();}
else if (onu==='ctaken'&&anju==='ctaken'&&ombat==='ctaken') {cwin();}
else if (rendu==='ctaken'&&anju==='ctaken'&&ettu==='ctaken'){cwin();}
else if (moonu==='ctaken'&&aru==='ctaken'&&ombat==='ctaken'){cwin();}
else if (moonu==='ctaken'&&anju==='ctaken'&&elu==='ctaken') {cwin();}
else if (naalu==='ctaken'&&anju==='ctaken'&&aru==='ctaken'){cwin();}
else if (elu==='ctaken'&&ettu==='ctaken'&&ombat==='ctaken') {cwin();}
if (onu==='taken'&&rendu==='taken'&&moonu==='taken') {win();}
else if (onu==='taken'&&naalu==='taken'&&elu==='taken') {win();}
else if (onu==='taken'&&anju==='taken'&&ombat==='taken') {win();}
else if (rendu==='taken'&&anju==='taken'&&ettu==='taken'){win();}
else if (moonu==='taken'&&aru==='taken'&&ombat==='taken'){win();}
else if (moonu==='taken'&&anju==='taken'&&elu==='taken') {win();}
else if (naalu==='taken'&&anju==='taken'&&aru==='taken'){win();}
else if (elu==='taken'&&ettu==='taken'&&ombat==='taken') {win();}
//TRIED VARIOUS DIFFERENCES TO CODE
/* if(arr[randomNumber]===undefined) {
var randomNumber=Math.floor(Math.random() * arr.length +1);
$('#' + arr[randomNumber]).text(computer) ;}
else if(arr[randomNumber]==3) { var randomNumber=Math.floor(Math.random() * arr.length +1);
$('#' + arr[randomNumber]).text(computer) ; }
else{var randomNumber=Math.floor(Math.random() * arr.length +1);
$('#' + arr[randomNumber]).text(computer) ; }
/* var slot;
while (slot!== locked)
{var randomNumber=Math.floor(Math.random()*9);
console.log(arr[randomNumber])*/
}
// var randomNumber = Math.floor(Math.random() * 4);
$('#reset').click(function (){
var arr = [1,2,3,4,5,6,7,8,9];
$('#8').text('');
$('#9').text('');
$('#1').text('');
$('#2').text('');
$('#3').text('');
$('#4').text('');
$('#5').text('');
$('#6').text('');
$('#7').text('');
var computer = 'O';
var player = 'X';
$('#chooseO').removeClass('red');
$('#chooseX').removeClass('red');
locked=[];
var onu ='';
var rendu='';
var moonu='';
var naalu='';
var anju='';
var aru='';
var elu='';
var ettu='';
var ombat='';
});
function win () {$('.head').html('YOU WIN!!!!!!' +
'<a class="btn-close trigger"></a>');
$('.content').html('<span class="fa fa-trophy"> </span> CONGRATULATIONS!!!!!');
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
// reset();
}
function cwin () {$('.head').html('YOU LOSE:(' +
'<a class="btn-close trigger"></a>');
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
$('.content').html('<span class="fa fa-frown-o"> </span> Sorry');
return false;
// reset();
}
$('.head').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
// reset();
});
}
$(document).ready(main);
//MY OPTIONS
//FIX INNFINITE LOOP ERR OR
//SWITCH CASE BREAK
//WHILE LOPP
//IF ELSE
//TRIED
//myArray = $.grep(myArray, function(value) {
// return $.inArray(value, toRemove) < 0;
//});
//AND
//rem = arr.indexOf(9);
// if(rem != -1) {
//arr.splice(rem, 8);
// AND
//third array
//TO LOCK SLOTS
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
* {margin:0;
padding:0;
box-sizing:border-box;}
h1 {font-family:'Bungee Shade';
text-align:center;
font-size:3em;
}
body {background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/retina_wood.png');
font-size:5em;
}
.well{background-image:url("http://www.wordmstemplates.com/wp-content/uploads/2015/08/lined-paper-template-6589.png");
height:700px;
width:600px;
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -0%);
background-size: 100% 100%;
background-repeat: no-repeat;}
.btn {background-color:rgba(245, 245, 245, 0.18);
height:150px;
width:150px;
font-size:2em;
color:#000F55;}
a {border:2px solid;
color: navy;
font-size:1.5em;
box-shadow: 0 3px 0 0 #222121, inset -1px -3px 10px 1px #515151;
}
a:active {
transform: translate(0, 3px);
box-shadow: none;
}
a,
a:hover,
a:active,
a:visited {
text-decoration: none !important;
outline: none !important;}
.red{background-color:red;}
/* ^TO BE USED IN CLICK Fn */
.one {border-right:3px solid black;
border-bottom:3px solid black;
margin-left:76.5px;
margin-top:145px;
}
.two {border-right:3px solid black;
border-bottom:3px solid black;
border-left:3px solid black;
margin-top:145px;
}
.three {border-left:3px solid black;
border-bottom:3px solid black;
margin-top:145px;
}
.four {border-top:3px solid black;
border-right:3px solid black;
border-bottom:3px solid black;
margin-left:76.5px;
}
.five {border:3px solid black;
}
.six {border-left:3px solid black;
border-bottom:3px solid black;
border-top:3px solid black;
}
.seven {border-right:3px solid black;
border-top:3px solid black;
margin-left:76.5px;}
.eight {border-right:3px solid black;
border-top:3px solid black;
border-left:3px solid black;
}
.nine {border-left:3px solid black;
border-top:3px solid black;}
#chooseX{font-weight:bold;
}
#reset{font-size:1em;
margin-left:200px;}
/*modal */
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(245,245,245,0.25);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
}
.modal{
width:600px;
height:400px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:50%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:red;
color:white;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
background:#3D9970;;
}
/* modal inspired by kevin haag */
.fa-trophy{color:#FFD700;}
h3 {margin-left:-25px;}
.fa-frown-o{color:#C0C0C0;}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.9/font-awesome-animation.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment