msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

added Tic Tac Toe web game

Browse Source 
It's beginner friendly and made using html, css and JS
pull/885/head
Ishita 3 years ago committed by GitHub
parent 3bbabbcc65
commit 7180489b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 266 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
Tic Tac Toe using vanilla javascript/excited.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
Tic Tac Toe using vanilla javascript/gameover.mp3
View File

Binary file not shown.

66
Tic Tac Toe using vanilla javascript/index.html
Unescape View File

@ -0,0 +1,66 @@
<!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>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li>MyTicTacToe.com</li>
</ul>
</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>Welcome to Tic Tac Toe </h1>
<div>
<span class="info">Turn for X</span>
<button id="reset">Reset</button>
</div>
<div class="imageBox">
<img src="excited.gif" alt="">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

BIN
Tic Tac Toe using vanilla javascript/music.mp3
View File

Binary file not shown.

69
Tic Tac Toe using vanilla javascript/script.js
Unescape View File

@ -0,0 +1,69 @@
console.log("Welcome to Tic Tac Toe");
let music = new Audio("music.mp3");
let audioturn = new Audio("ting.mp3");
let gameoveraudio = new Audio("gameover.mp3");
let turn = "X";
let gameover = false;
// Function to change turn
const changeTurn = ()=>{
return turn === "X"?"0":"X";
}
// Function to check for a Win
const checkWin = ()=>{
let boxtexts = 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((boxtexts[e[0]].innerText === boxtexts[e[1]].innerText) &&
(boxtexts[e[1]].innerText === boxtexts[e[2]].innerText) &&
(boxtexts[e[0]].innerText !== '')){
document.querySelector('.info').innerText = boxtexts[e[0]].innerText + " Won";
gameover = true;
document.querySelector('.imageBox').getElementsByTagName('img')[0].style.width = "200px";
document.querySelector(".line").style.width = "20vw";
document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`;
}
})
}
// Game Logic
let boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach(element =>{
let boxtext = element.querySelector(".boxText");
element.addEventListener('click',()=>{
if(boxtext.innerText === ''){
boxtext.innerText = turn;
turn = changeTurn();
audioturn.play();
checkWin();
if(!gameover){
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
}
}
})
})
// Add onClick Listener to RESET button
reset.addEventListener('click', ()=>{
let boxtexts = document.querySelectorAll('.boxText');
Array.from(boxtexts).forEach(element => {
element.innerText = "";
});
turn = "X";
gameOver = false;
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
document.querySelector('.imageBox').getElementsByTagName('img')[0].style.width = "0px";
document.querySelector(".line").style.width = "0";
})

131
Tic Tac Toe using vanilla javascript/style.css
Unescape View File

@ -0,0 +1,131 @@
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Libre+Baskerville:ital@1&family=New+Tegomin&family=Roboto:wght@300&family=Varela+Round&display=swap');
*{
margin: 0;
padding: 0;
}
nav{
background-color: rgb(68, 4, 68);
color: white;
height: 60px;
font-size: 27px;
display: flex;
align-items: center;
padding: 0 15px;
font-family: 'New Tegomin', serif;
}
nav ul{
list-style-type: none;
}
.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: 'Roboto', sans-serif;
position: relative;
}
.box{
border: 2px solid black;
font-size: 8vw;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.box:hover{
background-color: rgb(233, 223, 241);
}
.gameInfo{
padding: 0 34px;
font-family: 'Baloo Bhaina 2', cursive;
}
.gameInfo h1{
font-size: 2.5rem;
}
.imageBox img{
width: 0;
transition: width 1s ease-in-out;
}
.br-0{
border-right: 0;
}
.bl-0{
border-left: 0;
}
.bt-0{
border-top: 0;
}
.bb-0{
border-bottom: 0;
}
#reset{
margin: 0 24px;
padding: 1px 18px;
background-color: rgb(248, 209, 248);
border-radius: 6px;
cursor: pointer;
font-family: 'Baloo Bhaina 2';
font-size: 15px;
font-weight: bolder;
}
.info{
font-size: 22px;
font-weight: bold;
font-family: 'New Tegomin', serif;
}
.line{
background-color: black;
width: 0;
height: 3px;
position: absolute;
background-color: #911d91;
transition: width 1s ease-in-out;
}
@media screen and (max-width: 950px)
{
.gameContainer{
flex-wrap: wrap;
}
.gameInfo{
margin-top: 34px;
}
.gameInfo h1{
font-size: 1.5rem;
}
.container{
display: grid;
grid-template-columns: repeat(3, 20vw);
grid-template-rows: repeat(3, 20vw);
font-family: 'Roboto', sans-serif;
}
.line {
visibility: hidden;
}
}

BIN
Tic Tac Toe using vanilla javascript/ting.mp3
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save