Holi Re Holi
Celebration Of Hindu Festival HOLI
Non Stop 30 Minutes Holi DJ Songs
<!DOCTYPE html>
<html>
<head>
<title> SPARK9026 Bee Game </title>
<style>
body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial;
}
#beeBar
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
background: yellow;
border-radius: 15rem;
opacity: 80%;
}
#beeCntr
{
position: absolute;
top: 1%;
left: 2%;
font-size: 30px;
height: 7%;
width: 15%;
display: flex;
align-items: center;
justify-content: left;
background: lightblue;
border-radius: 15rem;
border:2px solid green;
}
#GStartB
{
position: absolute;
top: 1%;
left: 18%;
height: 8%;
width: 15%;
font-size: 30px;
background-color: orange;
border-radius: 15rem;
border:2px solid green;
align-items:center;
justify-content: center;
}
#beename
{
position: absolute;
top: 0%;
left: 110%;
font-size: 40px;
color: white;
width: 130%;
height: 110%;
background-image:repeating-radial-gradient(red 5%,green 20%,blue 40%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 15rem;
border:2px solid green;
}
#GStopB
{
position: absolute;
top: 1%;
left: 55%;
height: 8%;
width: 15%;
font-size: 30px;
align-items: center;
background: red;
border-radius: 15rem;
border:2px solid green;
}
#beeScr
{
position: absolute;
top: 0%;
left: 107%;
height: 100%;
width: 100%;
font-size: 30px;
align-items: left;
justify-content: left;
background: lightblue;
border-radius: 15rem;
border:2px solid green;
}
#beeLevel
{
position: absolute;
top: 1%;
left: 215%;
height: 95%;
width: 75%;
font-size: 30px;
align-items: center;
justify-content: center;
background: red;
border-radius: 15rem;
border:2px solid green;
}
#beeGN
{
position: absolute;
top: 120%;
left: -175%;
font-size: 47px;
color: white;
width: 375px;
height: 45px;
background-image:repeating-radial-gradient(red 5%, green 20%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 25rem;
border:5px solid green;
}
#backimge
{
position: absolute;
left: -340%;
top: 250%;
width: 600%;
height: 1000%;
display: flex;
background-image: url(fall-6.jpg);
opacity: 85%;
border:10px solid green;
}
#bee
{
position: absolute;
top: 111px;
left: -750px;
border-radius: 50%;
opacity: 100%;
color: orange;
}
#beeG
{
position: absolute;
top: 321px;
left: -50px;
height: 15px;
width: 75px;
background-color: black;
box-shadow: inset 0 0 10px rgba(0,0,255,1);
border-radius: 70%;
border:2px solid green;
}
#inputName
{
position: absolute;
top: 121px;
left: 835px;
background-color: blue;
border-radius: 70%;
box-shadow: inset 0 0 10px rgba(0,0,0,1);
border:2px solid green;
}
#beeFinish
{
position: absolute;
top: 121px;
left: 835px;
background-color: white;
border-radius: 70%;
box-shadow: inset 0 0 10px rgba(0,0,0,1);
border:2px solid green;
}
#bubbles
{
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top: 0px;
left: 0px;
}
#bubble
{
position: absolute;
bottom: 20px;
background: transparent;
box-shadow: inset 0 0 10px rgba(255,55,150,1);
background-image:repeating-radial-gradient(red 5%, green 10%, blue 40%);
border-radius: 50%;
animation: flying 60s infinite ease-in;
left: 10%;
animation-duration: 20s;
}
#bubble:nth-child(0)
{
height: 50px;
width: 75px;
right: 20%;
animation-duration: 10s;
}
#bubble:nth-child(1)
{
height: 20px;
width: 50px;
left: 32%;
animation-duration: 20s;
}
#bubble:nth-child(2)
{
height: 70px;
width: 50px;
left: 28%;
animation-duration: 40s;
}
#bubble:nth-child(4)
{
height: 40px;
width: 50px;
left: 42%;
animation-duration: 150s;
}
#bubble:nth-child(5)
{
height: 50px;
width: 100px;
left: 45%;
animation-duration: 17s;
}
#bubble:nth-child(6)
{
height: 20px;
width: 20px;
left: 50%;
animation-duration: 25s;
}
#bubble:nth-child(7)
{
height: 20px;
width: 50px;
left: 68%;
z-index=1;
animation-duration: 12s;
}
#bubble:nth-child(8)
{
height: 20px;
width: 10px;
left: 19%;
animation-duration: 50s;
}
#bubble:nth-child(9)
{
height: 10px;
width: 20px;
left: 85%;
animation-duration:15s;
}
@keyframes flying
{
0%
{
top: 130px;
left:-650px;
transform: translateY(350px);
}
20%
{
transform: translateX(1050px);
}
40%
{
transform: translateY(370px);
}
60%
{
transform: translateX(+350px);
}
80%
{
transform: translateY(450px);
}
100%
{
bottom: 968px;
transform: translateX(900px);
}
}
</style>
</head>
<body>
<div id="beeBar"></div>
<div id="beeCntr"> Timer : 0 </div>
<button id="GStartB" onmouseover = "colorChSr">Game Start </botton>
<div id="beename">SPARK9026 </div>
<button id="GStopB" onmouseover = "colorChSt">Game Stop </botton>
<div id="beeScr">Score : 0 </div>
<div id="beeLevel">Level : 0 </div>
<div id="beeGN">Bouncing Ball</div>
<div id="bee"></div>
<div id="beeG"></div>
<div id="inputName"></div>
<div id="beeFinish"></div>
<div id="backimge"> </div>
<div id="bubbles">
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
<div id="bubble"></div>
</div>
<script>
//======================//
//Global Variables And Constants
var cntr=0; var vert = 110; var hori=5; var c=0.2; var dic=0.2;
var d=0; var baU=0.01; var baD=0.005;
var rnd=0; var cntrScr=0; bSize=150;
let x=0; let y=0; var ctchr=0; var beeSize=0.21;
let speed= 100;
let lastPaintTime=0; let cntrL=1;
var ids=1;var cntrLvlC=0;
//======================//
//Speed Controller
var tm=10;
var tmX=0.0001;
// Stop Bee Game
const GSB=document.getElementById('GStartB');
GSB.addEventListener("click", ()=>
{ startB(ids)});
//======================//
//Start Game Bee Catcher
function startB(ids)
{
const GStartB=document.getElementById('GStartB');
GStartB.addEventListener("click", ()=>
{
var ids=setInterval(Anim, tm)
});
return ids;
const GStopB=document.getElementById('GStopB');
GStopB.addEventListener("click", ()=>
{
clearInterval(ids);
});
}
//Main Function
function Anim()
{
beeTimer();
beePath();
beeCatcherB();
beeColorC();
beeUD();
mve();
rndx(rnd);
beeNCC();
beeCheckB();
beeCatcherB();
}
//=============================//
//Game stop
//function GStop()
//{
//var id=setInterval(Anim, tm);
//const GStopper=document.querySelector("GStopB");
//GStopper.addEventListener("click",GStop);
//clearInterval(id);
//console.log(id);
//}
//document.querySelector("GStopB").addEventListener("click",() =>
//{
//clearInterval(clr);
//console.log(clr);
//});
//}
//=============================//
//Timer Counter
function beeTimer()
{
if(tm>5)
{
let beeCntr=document.getElementById("beeCntr");
cntr =cntr+ cntrL;
beeCntr.innerHTML="Timer : " + cntr;
beeCheckB();
tm=tm-tmX;
if (tm<=5)
{
tmX=0;
document.alert("Game finised");
GStop();
}else{
cntrlL=0;
};
};
}
//=============================//
//Score Counter
function GScore()
{
let beeScr=document.getElementById("beeScr");
cntrScr =cntrScr+ 1;
beeScr.innerHTML="Score : " + cntrScr;
}
//=============================//
//Boundries of Bee
function beeCheckB()
{
//Screen left side
if(vert>=1100-bSize)
{
c=-2
};
//Screen Bottom Side
if(hori>=405-bSize)
{
dic=-2
};
//=============================//
//Boundries of Bee
function beeCheckB()
{
//Screen left side
if(vert>=1100-bSize)
{
c=-2
};
//Screen Bottom Side
if(hori>=405-bSize)
{
dic=-2
};
//=============================//
//Screen Right Side
if(vert<=110)
{
c=0.2
};
//Screen Top Side
if(hori<=5)
{
dic=0.2
};
beeCatcherB();
}
//=============================//
//Level Counter
function beeLevelC()
{
let beeLvlC=document.getElementById("beeLevel");
cntrLvlC =cntrLvlC+ 1;
beeLvlC.innerHTML="Level : " + cntrLvlC;
for(var xn=0; xn++,){
startB();
};
console.log(cntrLvlC);
}
//=============================//
//Boundries of Catcher
function beeCatcherB()
{
if(x>=1000)
{
x=1000
};
if( x<=0)
{
x=0
};
}
//=============================//
//Screen this --> Side Boundry for Catcher
if(y>=1000)
{
(y=1000)
};
if( y<=0)
{
(y=0)
};
if((x<=1000) && (x>=0) && (y<=1000) && (y>=0))
{
mve()
beeCheckB();
beeCatcherB();
beeNCC();
}
//=============================//
//Bee running path
function beePath()
{
beeUD();
var bT =parseInt(window.getComputedStyle(bee).getPropertyValue("Top"));
var bB =parseInt(window.getComputedStyle(bee).getPropertyValue("Bottom"));
var bL =parseInt(window.getComputedStyle(bee).getPropertyValue("Left"));
var bR=parseInt(window.getComputedStyle(bee).getPropertyValue("Right"));
var CtT =parseInt(window.getComputedStyle(beeG).getPropertyValue("Top"));
var CtB =parseInt(window.getComputedStyle(beeG).getPropertyValue("Bottom"));
var CtL =parseInt(window.getComputedStyle(beeG).getPropertyValue("Left"));
var CtR=parseInt(window.getComputedStyle(beeG).getPropertyValue("Right"));
var xx=bT-CtT;
var yy=bB-CtB;
var zz=bL- CtL;
var xy=bR-CtR;
if(yy<=.5 && yy>=-.5 || xy<=.5 && xy>=-.5)
{
GScore();
if(c==1)
{
c=-2;
}else{
c=(250*Math.log(1));
};
if(dic==1){
dic=-2;
}else{
dic=(-4*Math.log(1));
};
}
beeCatcherB()
beeCheckB();
}
//=============================//
//===============//
//Keyboard Controller
//===============//
function mve()
{
document.addEventListener('keydown', (e) =>
{
e.preventDefault();
switch (e.key)
{
case 'ArrowUp' : beeG.style.top = Math.round((x=x-baD)) + "px" ; break ;
case 'ArrowDown' : beeG.style.top = Math.round((x=x+baD)) + "px" ; break ;
case 'ArrowLeft' : beeG.style.left = Math.round((y=y-baU)) + "px" ; break ;
case 'ArrowRight' : beeG.style.left =Math.round((y=y+baU)) + "px" ; break ;
Default:break;
}
});
beeCatcherB();
beeSzeB()
}
//=============================//
//Bee color changer
function beeColorC()
{
var target = document.getElementById("bee");
if(vert<=500 || hori<=500 || d<=100 )
{
target.style.border = 'red'
}
}
//=============================//
// Random number genrator between 0-1
function rndx(rnd)
{
var rnd=(Math.random(.2));
return rnd;
}
rnd=rndx(rnd);
//=============================//
//Movement of Bee Up and Down
function beeUD()
{
//var rnd=(Math.random());
var target = document.getElementById("bee");
hori = (hori+(dic+(rnd*1)));
target.style.marginTop = hori + 'px';
vert = (vert+(c+(rnd*0.7)));
target.style.marginLeft = vert + 'px';
beeCheckB();
beeCatcherB();
if(c==1)
{
target.style.background= 'blue';
}else{
target.style.background= 'red';
}
if (cntrScr >= (100))
{
beeCheckB();
beeCatcherB();
};
}
//======================//
// Bee Size controller OR Game Finish
function beeSzeB()
{
var main=2;
var target = document.getElementById("bee");
// If Bee Size lower than 2 than game will finsihed for New restart.
if(bSize<=12 && cntrScr>10)
{bSize=12
if(bSize<=12 && cntr>=5000)
{
bestGamerStore();
document.write("Game Finised. Your Score is " + cntrScr);
bSize=2;
clearInterval(ids);
};
};
//======================//
// Bee Size decreases automatically
bSize=bSize-(0.125899900);
console.log(bSize);
//======================//
// If Bee catcher catches the honey, increase the size of Bee.
target.style.width = bSize + 'px';
target.style.height = bSize + 'px';
//======================//
// If Bee Size > 10 and Timer Counter >200 and Score Greater than 1 and catcher catches the honey than increase the Bee Size per touch.
//Bee Bonus If catches the honey
console.log(rnd);
if(bSize>=30 && cntr>=20000 && rnd>=0.10911)
{
var strScr=cntrScr;
console.log(strScr,cntrScr);
target.style.height = bSize + 'px';
bSize= bSize+(main*20);
}
//======================//
// Oversize Bee Blocker
if(bSize>= 100 && cntr>=100)
{
target.style.height = bSize + 'px';
bSize=bSize-(main);
}
beeCheckB();
beeCatcherB();
}
//=============================//
function beeNCC()
{
var targetN = document.getElementById("beename");
if(c==-1);
{
targetN.style.color = 'black';
}
if(c==1);
{
targetN.style.color = 'white';
}
}
//=============================//
// Store the Gamer Name
function bestGamerStore(){
let objct={
name: "Spark9026",
ver:"9.0",
score: {cntrScr}
}
let objctSrlsd = JSON.stringify(objct);
localStorage.setItem("objct",objctSrlsd);
let objctDsrlsd=JSON.parse(localStorage.getItem("objct"));
console.log(objct,objctSrlsd,objctDsrlsd);
}
//======================//
function colorChSr()
{
console.log("x");
var targColorT = document.getElementById("GStartB");
targColorT.style.background = 'pink';
}
//======================//
function colorChSt()
{
console.log("x");
var targColorP = document.getElementById("GStopB");
targColorP.style.background = 'blue';
}
//======================//
</script>
</body>
</html>