Tic Tac Toe Bro

Developer
Vinny
Size
3,332 Kb
Views
26,312
  1. Tic Tac Toe Bro Previews
  2. Tic Tac Toe Bro HTML Codes
  3. Tic Tac Toe Bro CSS Codes
  4. Tic Tac Toe Bro JS Codes

How do I make an tic tac toe bro?

A tic tac toe game written with javascript and jquery. What is a tic tac toe bro? How do you make a tic tac toe bro? This script and codes were developed by Vinny on 15 October 2022, Saturday.

Tic Tac Toe Bro Previews
IQ Test

Tic Tac Toe Bro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic Tac Toe Bro</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Slackey' rel='stylesheet' type='text/css'>
<div id="sky-view"> <div class="header"> <h1>Play some Tic-Tac-Toe!</h1> <h3>Click any box to start (You are X)</h3> </div> <div id="tic-tac-box"> <ul class="row"> <li id="box1" class="box"></li> <li id="box2" class="box"></li> <li id="box3" class="box"></li> </ul> <ul class="row"> <li id="box4" class="box"></li> <li id="box5" class="box"></li> <li id="box6" class="box"></li> </ul> <ul class="row"> <li id="box7" class="box"></li> <li id="box8" class="box"></li> <li id="box9" class="box"></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic Tac Toe Bro - Script Codes CSS Codes

#sky-view{ -webkit-perspective: 1000;	-moz-perspective: 1000px;	-o-perspective: 1000;	perspective: 1000px;	position: absolute;	left: 0;	top: 0;	right: 0;	bottom: 0;	overflow: hidden;	background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);	background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);	background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);	background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);	background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);	background-image: -webkit-gradient(	linear,	left bottom,	left top,	color-stop(0.28, rgb(69,132,180)),	color-stop(0.64, rgb(31,71,120))	);
}
.header{ padding: 0; margin: 0 auto; margin-top: 5%; text-align: center; color: white; font-family: 'Slackey', cursive; text-shadow: -2px 7px 0px rgba(48, 48, 48,1);
}
.header h1{ font-weight: bold;
}
#tic-tac-box{ margin: 0 auto; border: 2px solid black; width: 400px; height:366px; margin-top:9%;
}
.row{ background-color: red; list-style-type: none; margin: 0; padding: 0;
}
.box{ border: 1px solid black; height: 120px; width: 32.8%; float: left; padding: 0;
}
.box:hover{ background-color: #EDEDED;
}
.exp{ font-size: 100px !important; margin:0 auto; padding-top:10px; padding-left:25px;
}
.fa-close{ color: #00078E; text-shadow: -3px 2px 0px rgba(255, 255, 255,1);
}
.fa-circle-o{ color: #E24444; text-shadow: -3px 2px 0px rgba(255, 255, 255,1);
}
#message{ text-align: center; position: absolute; padding: 50px; border-radius: 8px; border: 3px solid black; right: 39%; background-color: orange; display: none;
}

Tic Tac Toe Bro - Script Codes JS Codes

$(document).ready(function(){ var count = 0 var userClickArr = [], pcArr = [];//no Id why I named pc lol var userClass = ".fa-close", pcClass =".fa-circle-o"; function checkWin(arr){ var strNum = arr.join(''); var re = /123|456|789|147|258|369|357|159/g; if(strNum.search(re) != -1){ if(arr===pcArr){alert('Computer wins!')} if(arr===userClickArr){alert('You Win!');} $('span').remove(); userClickArr = []; pcArr = []; count = 0; } userClickArr = []; pcArr = []; }//endCheckWin function checkContain(arr,cl){ var divId = "#box"; for(var i = 1; i < 10; ++i){ divId = "#box"+ i.toString(); if($(divId).children(cl).length > 0 ){ arr.push(i); console.log(pcArr); } }//endFor console.log("userArr: "+userClickArr); console.log("comp array: " + pcArr); checkWin(arr); } //return a random box number to add the computer's choice function computerChoiceDiv(){ var randomNum = Math.floor(Math.random() * (10 - 1) + 1); var divId = '#box' + randomNum.toString(); return divId; } $('.box').click(function(){ if(count > 3){alert('ayy lmao its a Tyy!'); count=0;$('span').remove();return;} if($(this).children().length > 0){return;} var userClickId = "#" + $(this).attr('id'); var pcChoice = computerChoiceDiv(); $(this).append('<span class="exp fa fa-close"></span>'); //bool test if tthe div contains an image var contains = $(pcChoice).children('.exp').length; while(contains > 0 || userClickId === pcChoice){ pcChoice = computerChoiceDiv(); contains = $(pcChoice).children().length; } $(pcChoice).append('<span class="exp fa fa-circle-o"></span>'); count++; //only check for a win if the times clicked >= 3 if(count >= 3){ //check if either I won, or the computer won checkContain(userClickArr,userClass); checkContain(pcArr,pcClass); } }); //end click function
}); //end doc ready function
Tic Tac Toe Bro - Script Codes
Tic Tac Toe Bro - Script Codes
Home Page Home
Developer Vinny
Username vinnyA3
Uploaded October 15, 2022
Rating 3
Size 3,332 Kb
Views 26,312
Do you need developer help for Tic Tac Toe Bro?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vinny (vinnyA3) Script Codes
Name
Dragon Ball in Pure CSS
Growing Image Blocks
CSS Animations and Effects
Il Pomodoro Clock
Pure CSS Fullscreen Image Slider
Pure CSS Image Slider
Batman Emblem in Pure CSS - chrome tested only
Your Favorite Twitch App
Wikipedia Application
Rotating CSS Cube
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!