Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mr-Nobody003
Mr-Nobody003 authored May 31, 2024
1 parent d354afb commit ca9d915
Show file tree
Hide file tree
Showing 7 changed files with 358 additions and 0 deletions.
Binary file added Colorful-Flowers(chosic.com).mp3
View file
Binary file not shown.
Binary file added gameover.mp3
View file
Binary file not shown.
Binary file added gameover.webp
View file
Binary file not shown.
58 changes: 58 additions & 0 deletions gamepage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIC TAC TOE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<nav>
<div class="name">Tic Tac Toe</div>
<div class="switch">
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</div>
</nav>

<div class="gamecontainer">
<div class="container">
<div class="line"></div>
<div class="box bt-0 bl-0"><span class="boxtext"></span></div>
<div class="box bt-0"><span class="boxtext"></span></div>
<div class="box bt-0 br-0"><span class="boxtext"></span></div>
<div class="box bl-0"><span class="boxtext"></span></div>
<div class="box"><span class="boxtext"></span></div>
<div class="box br-0"><span class="boxtext"></span></div>
<div class="box bl-0 bb-0"><span class="boxtext"></span></div>
<div class="box bb-0"><span class="boxtext"></span></div>
<div class="box bb-0 br-0"><span class="boxtext"></span></div>
</div>
<div class="gameinfo">
<h1>
<div>
<span class="info">Turn for X</span>
<button id="reset">Reset</button>
<button id="music" >&#128266</button>
</div>
</h1>
<div class="imgbox">
<img src="gameover.webp" alt="pic">
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
110 changes: 110 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
console.log("TIC TAC TOE by MR.Nobody");
console.log("Refference taken from code-with-harry yt");
console.log("Music credits: ");
console.log("Colorful Flowers by Tokyo Music Walker | https://soundcloud.com/user-356546060")
console.log("Music promoted by https://www.chosic.com/free-music/all/")
console.log("Creative Commons CC BY 3.0")
console.log("https://creativecommons.org/licenses/by/3.0/")
//music files
let music = new Audio("Colorful-Flowers(chosic.com).mp3");
music.play();
let audioTurn = new Audio("turn.WAV");
let gameover = new Audio("gameover.mp3");

let turn = 'X';
let game_over = false;
const musicButton = document.getElementById('music');

musicButton.addEventListener('click', () => {
if (music.paused) {
music.play();
//musicButton.classList.remove('strikethrough');
musicButton.innerHTML = '&#128266';
} else {
music.pause();
//musicButton.classList.add('strikethrough');
musicButton.innerHTML = '🔇';
}
});

//function for winner
const checkwin = () => {
let boxtext = document.getElementsByClassName('boxtext');
let wins = [
[0, 1, 2, 5, 5, 0],
[3, 4, 5, 5, 15, 0],
[6, 7, 8, 5, 25, 0],
[0, 3, 6, -5, 15, 90],
[1, 4, 7, 5, 15, 90],
[2, 5, 8, 15, 15, 90],
[0, 4, 8, 5, 15, 45],
[2, 4, 6, 5, 15, 135],
]
wins.forEach(e => {
if ((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "")
) {
document.querySelector('.info').innerText = boxtext[e[0]].innerText + " won";
game_over = true;
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "30vw";
// gameover.play();
//gameover.loop=true;
music.pause();
document.querySelector(".line").style.transform = `translate(${e[3]}vw,${e[4]}vw) rotate(${e[5]}deg)`
document.querySelector(".line").style.width = "20vw";

gameover.addEventListener('ended', function () {
this.currentTime = 0.1;
this.play();
}, false);

gameover.play();
}
})
}
//funtion to change turn
const changeturn = () => {
if (!game_over) {
return turn === "X" ? "0" : "X"
}
else {
return turn === " ";
}
}
//Game logic
let boxes = document.getElementsByClassName("box");

Array.from(boxes).forEach(element => {
let boxtext = element.querySelector('.boxtext');
element.addEventListener('click', () => {
if ( !game_over && boxtext.innerText === '') {
boxtext.innerText = turn;
turn = changeturn();
audioTurn.play();
checkwin();
if (!game_over) {
document.getElementsByClassName('info')[0].innerText = "Turn for " + turn;
}
}
})
})
//reset
reset.addEventListener('click', () => {
let boxtexts = document.querySelectorAll('.boxtext');
Array.from(boxtexts).forEach(element => {
element.innerText = ""
});
turn = 'X';
game_over = false;
document.querySelector(".line").style.width = "0px";
document.getElementsByClassName('info')[0].innerText = "Turn for " + turn;
gameover.pause();
music.play();
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px";

})

//dark mode
const checkbox = document.getElementById("checkbox")
checkbox.addEventListener("change", () => {
document.body.classList.toggle("dark")
})
190 changes: 190 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

* {
margin: 0;
padding: 0;
}

nav {
background-color: rgb(147, 87, 215);
color: whitesmoke;
margin: 0;
padding: 0 12px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-family: cursive;
}

.name {
margin: 0;
padding: 0;
display: flex;
height: 7vh;
font-size: 5vh;
align-items: center;
}

body {
transition: background 0.2s linear;
}

body.dark {
background-color: #252629;
color: #fff;
}

body.dark span {
color: aliceblue;
}

body.dark .box:hover {
background-color: rgba(30, 28, 28, 0.267);
}

.checkbox {
opacity: 0;
position: absolute;
}

.checkbox-label {
background-color: #111;
width: 50px;
height: 25px;
border-radius: 50px;
position: relative;
padding: 5px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.fa-moon {
color: #f1c40f;
}

.fa-sun {
color: #f39c12;
}

.checkbox-label .ball {
background-color: #fff;
width: 30px;
height: 30px;
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}

.checkbox:checked+.checkbox-label .ball {
transform: translateX(24px);
}

.info {
font-size: 25px;
}

.gamecontainer {
display: flex;
justify-content: center;
margin-top: 50px;
}

.container {
display: grid;
grid-template-columns: repeat(3, 10vw);
grid-template-rows: repeat(3, 10vw);
font-family: cursive;
position: relative;
}

.box {
border: 1px solid rgb(138, 0, 251);
font-size: 8vw;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}

.box:hover {
background-color: whitesmoke;
}

.gameinfo {
padding: 0;
margin-left: 10vw;
}

.imgbox img {
width: 0;
transition: width 1s ease-in-out;
}

.bl-0 {
border-left: 0;
}

.br-0 {
border-right: 0;
}

.bt-0 {
border-top: 0;
}

.bb-0 {
border-bottom: 0;
}

#reset {
margin: 0 23px;
padding: 1px 18px;
background-color: #bba9ef;
height: 30px;
border-radius: 6px;
cursor: pointer;
font-family: monospace;
font-size: 15px;
font-weight: bolder;
}

.line {
background-color: rgb(237, 18, 18);
width: 0;
height: 10px;
position: absolute;
transition: width 1s ease-in-out;
border-radius: 5px
}
#music{
border-radius: 50%;
width: 30px;
height: 30px;
background-color: black;
border: none;
}
body.dark #music{
background-color: #fff;
}
/* @media screen and (max-width:950px) {
.gamecontainer {
flex-wrap: wrap;
}
.gameinfo {
margin-top: 34px;
}
.gameinfo h1 {
font-size: 2.5rem;
}
.container{
grid-template-columns: repeat(3,20vw);
grid-template-rows: repeat(3,20vw);
}
} */
Binary file added turn.wav
View file
Binary file not shown.

0 comments on commit ca9d915

Please sign in to comment.