Skip to content

added html,css and js files for TicTacToe game #655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added html,css and js files for TicTacToe game #655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions TicTacToe game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TicTacToe</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1><em>Tic Tac Toe</em></h1>
</header>
<ul id="board">
<li id="spot1">+</li>
<li id="spot2">+</li>
<li id="spot3">+</li>
<li id="spot4">+</li>
<li id="spot5">+</li>
<li id="spot6">+</li>
<li id="spot7">+</li>
<li id="spot8">+</li>
<li id="spot9">+</li>
</ul>
<div class="clearfix"></div>
<footer>
<button id="reset">Reset Game</button>
</footer>
</div>
</body>
</html>
96 changes: 96 additions & 0 deletions TicTacToe game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
$(document).ready(function(){
var x = "x";
var o = "o";
var turns = 0;
// Spot vars
var spot1 = $('#spot1');
var spot2 = $('#spot2');
var spot3 = $('#spot3');
var spot4 = $('#spot4');
var spot5 = $('#spot5');
var spot6 = $('#spot6');
var spot7 = $('#spot7');
var spot8 = $('#spot8');
var spot9 = $('#spot9');

$('#board li').on('click', function(){
if(spot1.hasClass('o') && spot2.hasClass('o') && spot3.hasClass('o') ||
spot4.hasClass('o') && spot5.hasClass('o') && spot6.hasClass('o') ||
spot7.hasClass('o') && spot8.hasClass('o') && spot9.hasClass('o') ||
spot1.hasClass('o') && spot4.hasClass('o') && spot7.hasClass('o') ||
spot2.hasClass('o') && spot5.hasClass('o') && spot8.hasClass('o') ||
spot3.hasClass('o') && spot6.hasClass('o') && spot9.hasClass('o') ||
spot1.hasClass('o') && spot5.hasClass('o') && spot9.hasClass('o') ||
spot3.hasClass('o') && spot5.hasClass('o') && spot7.hasClass('o')
){
alert('Winner: O');
$('#board li').text('+');
$('#board li').removeClass('disable');
$('#board li').removeClass('o');
$('#board li').removeClass('x');
} else if(spot1.hasClass('x') && spot2.hasClass('x') && spot3.hasClass('x') ||
spot4.hasClass('x') && spot5.hasClass('x') && spot6.hasClass('x') ||
spot7.hasClass('x') && spot8.hasClass('x') && spot9.hasClass('x') ||
spot1.hasClass('x') && spot4.hasClass('x') && spot7.hasClass('x') ||
spot2.hasClass('x') && spot5.hasClass('x') && spot8.hasClass('x') ||
spot3.hasClass('x') && spot6.hasClass('x') && spot9.hasClass('x') ||
spot1.hasClass('x') && spot5.hasClass('x') && spot9.hasClass('x') ||
spot3.hasClass('x') && spot5.hasClass('x') && spot7.hasClass('x')
){
alert('Winner: X');
$('#board li').text('+');
$('#board li').removeClass('disable');
$('#board li').removeClass('o');
$('#board li').removeClass('x');
} else if(turns == 9){
alert('Tie Game');
$('#board li').text('+');
$('#board li').removeClass('disable');
$('#board li').removeClass('o');
$('#board li').removeClass('x');
turns = 0;
} else if($(this).hasClass('disable')){
alert('This spot is already filled');
} else if(turns%2 == 0){
turns++;
$(this).text(o);
$(this).addClass('disable o');
if(spot1.hasClass('o') && spot2.hasClass('o') && spot3.hasClass('o') ||
spot4.hasClass('o') && spot5.hasClass('o') && spot6.hasClass('o') ||
spot7.hasClass('o') && spot8.hasClass('o') && spot9.hasClass('o') ||
spot1.hasClass('o') && spot4.hasClass('o') && spot7.hasClass('o') ||
spot2.hasClass('o') && spot5.hasClass('o') && spot8.hasClass('o') ||
spot3.hasClass('o') && spot6.hasClass('o') && spot9.hasClass('o') ||
spot1.hasClass('o') && spot5.hasClass('o') && spot9.hasClass('o') ||
spot3.hasClass('o') && spot5.hasClass('o') && spot7.hasClass('o')
){
alert('Winner: O');
turns = 0;
}
} else {
turns++;
$(this).text(x);
$(this).addClass('disable x');
if(spot1.hasClass('x') && spot2.hasClass('x') && spot3.hasClass('x') ||
spot4.hasClass('x') && spot5.hasClass('x') && spot6.hasClass('x') ||
spot7.hasClass('x') && spot8.hasClass('x') && spot9.hasClass('x') ||
spot1.hasClass('x') && spot4.hasClass('x') && spot7.hasClass('x') ||
spot2.hasClass('x') && spot5.hasClass('x') && spot8.hasClass('x') ||
spot3.hasClass('x') && spot6.hasClass('x') && spot9.hasClass('x') ||
spot1.hasClass('x') && spot5.hasClass('x') && spot9.hasClass('x') ||
spot3.hasClass('x') && spot5.hasClass('x') && spot7.hasClass('x')
){
alert('Winner: X');
turns = 0;
}
}
});
// Reset Handler
$("#reset").click(function(){
$("#board li").text("+");
$("#board li").removeClass('disable');
$("#board li").removeClass('o');
$("#board li").removeClass('x');
turns = 0;
});
});
64 changes: 64 additions & 0 deletions TicTacToe game/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
body {
background-color:#1c1b1b;
color: #666;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1{
text-align: center;
color: azure;
}

.clearfix{
clear:both;
}

#container{
width:350px;
overflow:auto;
margin: 40px auto;
background: #666;
padding-bottom: 40px;
border-radius:10px;
}

#board li{
float: left;
margin:10px;
height: 70px;
width: 70px;
font-size: 55px;
background: #333;
color: #ccc;
list-style: none;
text-align:center;
border-radius: 5px;
}

#board li:hover,#reset:hover {
cursor: pointer;
background-color: black;
}

#reset{
border:0;
background-color: #444;
color: #fff;
width: 70%;
padding: 15px;
border-radius:5px;
}

.o{
color: green !important ;
}

.x{
color: red !important;
}

footer{
display: block;
text-align: center;
padding-top: 20px;
}
Binary file added bmi app/android/.gradle/7.4.2/checksums/checksums.lock
View file
Open in desktop
Binary file not shown.
Binary file added bmi app/android/.gradle/7.4.2/fileChanges/last-build.bin
View file
Open in desktop
Binary file not shown.
Binary file added bmi app/android/.gradle/7.4.2/fileHashes/fileHashes.lock
View file
Open in desktop
Binary file not shown.
Empty file added bmi app/android/.gradle/7.4.2/gc.properties
View file
Open in desktop
Empty file.
Empty file added bmi app/android/.gradle/vcs-1/gc.properties
View file
Open in desktop
Empty file.