Tic Tac Toe game
How do I make an tic tac toe game?
What is a tic tac toe game? How do you make a tic tac toe game? This script and codes were developed by Tushar Bandal on 15 December 2022, Thursday.
Tic Tac Toe game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic Tac Toe game</title> <link rel='stylesheet prefetch' href='https://getbootstrap.com/2.3.2/assets/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="tic-tac-toe">
<div class="span3 new_span">
<div class="row">
<h1 class="span3">Tic Tac Toe</h1>
<div class="span3">
<div class="input-prepend input-append"> <span class="add-on win_text">O won</span><strong id="o_win" class="win_times add-on">0</strong><span class="add-on">time(s)</span> </div> <div class="input-prepend input-append"> <span class="add-on win_text">X won</span><strong id="x_win" class="win_times add-on">0</strong><span class="add-on">time(s)</span> </div>
</div>
</div>
<ul class="row" id="game">
<li id="one" class="btn span1" >+</li>
<li id="two" class="btn span1">+</li>
<li id="three" class="btn span1">+</li>
<li id="four" class="btn span1">+</li>
<li id="five" class="btn span1">+</li>
<li id="six" class="btn span1">+</li>
<li id="seven" class="btn span1">+</li>
<li id="eight" class="btn span1">+</li>
<li id="nine" class="btn span1">+</li>
</ul>
<div class="clr"> </div>
<div class="row"><a href="#" id="reset" class="btn-success btn span3" >Restart</a></div></div>
</div> <script src='https://code.jquery.com/jquery-1.7.2.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Tic Tac Toe game - Script Codes CSS Codes
/*******tic-tac-toe******/
#tic-tac-toe .disable {text-transform:uppercase; font-size:30px; font-family:Georgia, "Times New Roman", Times, serif}
#tic-tac-toe #game li {float:left; padding:0; list-style:none; text-align:center; margin-bottom:20px; color:#fff; height:60px; line-height:60px; font-size:40px; color:#ccc}
#tic-tac-toe #game li.disable{color:#fff}
#tic-tac-toe #game {float:left; padding:0; clear:both}
.new_span {width:226px}
#tic-tac-toe #reset { padding:5px 10px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; clear:both; cursor:pointer; float:left; text-align:center; text-transform:uppercase; outline:none; width:204px}
.input-prepend span.pre_text {width:55px}
.input-prepend .span1{width:93px}
.input-prepend {margin-bottom:10px}
.clr {clear:both; height:0}
#tic-tac-toe h1 {text-align:center; font-size:28px}
#tic-tac-toe li::-moz-selection {background:none;color:#000;}
#tic-tac-toe li::-webkit-selection {background:none;color:#000;}
#tic-tac-toe {width:220px; margin:0 auto}
.input-append .win_times {background:#fff; width:101px}
.input-append .win_text {width:52px}
/*******tic-tac-toe END******/
Tic Tac Toe game - Script Codes JS Codes
// JavaScript Document
$(document).ready(function() {
var x = "x"
var o = "o"
var count = 0;
var o_win = 0;
var x_win = 0;
$('#game li').click(function(){ if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) { alert('O has won the game. Start a new game') $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') } else if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) { alert('X wins has won the game. Start a new game') $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') } else if (count == 9) { alert('Its a tie. It will restart.') $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') count = 0 } else if ($(this).hasClass('disable')) { alert('Already selected') } else if (count%2 == 0) { count++ $(this).text(o) $(this).addClass('disable o btn-primary') if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) { alert('O wins') count = 0 o_win++
$('#o_win').text(o_win) } } else { count++ $(this).text(x) $(this).addClass('disable x btn-info') if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) { alert('X wins') count = 0 x_win++ $('#x_win').text(x_win) } } }); $("#reset").click(function () { $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') count = 0 });
});
Developer | Tushar Bandal |
Username | tusharbandal |
Uploaded | December 15, 2022 |
Rating | 3.5 |
Size | 2,896 Kb |
Views | 10,120 |
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!
Name | Size |
Sticky footer | 2,541 Kb |
A Pen by tushar bandal | 2,234 Kb |
Nav to scroll sections | 2,508 Kb |
Drag and drop | 2,459 Kb |
Accordian | 2,326 Kb |
Theme setting | 4,286 Kb |
Custom Select Box | 2,568 Kb |
CSS3 Animation | 2,248 Kb |
Image hover effect. | 1,715 Kb |
Angular Accordion | 2,111 Kb |
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!
Name | Username | Size |
DFF Website | Hawcubite | 10,123 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Full page table inside the grid | Twikito | 1,864 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Popover Example | Seanboom | 2,429 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!