diff --git a/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/index.html b/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/index.html new file mode 100644 index 000000000..f17b64dcb --- /dev/null +++ b/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/index.html @@ -0,0 +1,50 @@ + + + + + + Document + + + + + +
+
+
+
+

Hit

+
+ 5 +
+
+
+

Timer

+
+ 60 +
+
+
+

Score

+
+ 0 +
+
+
+
+ +

5

+ +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/script.js b/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/script.js new file mode 100644 index 000000000..2398027fb --- /dev/null +++ b/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/script.js @@ -0,0 +1,49 @@ + +function makeBubble(){ + let some = ""; + for(let i=1; i<161;i++){ + some +=`
${Math.floor(Math.random()*10)}
`; + document.querySelector(".pbotm").innerHTML=some; +} +} +makeBubble(); + +var timer=60; +function runTimer(){ + var timeint=setInterval(function(){ + if(timer>0){ + timer--; + document.querySelector("#timerval").textContent=timer; + } + else{ + clearInterval(timeint); + document.querySelector("#pbtm").innerHTML=`

Game Over!!

`; + // document.querySelector("#pbtm").innerText=`Your Score is ${score}`; + } + + },1000) +} +runTimer(); +var rn=0; +function hitval(){ + rn = Math.floor(Math.random()*10); + document.querySelector("#hitter").textContent=rn; +} +hitval(); +var score=0; +function increaseScore(){ + score+=10; + document.querySelector("#scoreval").textContent=score; +} +document.querySelector("#pbtm").addEventListener("click", +function(dets){ + var clickedNum =Number(dets.target.textContent); + if(rn===clickedNum){ + increaseScore(); + } + hitval(); + makeBubble(); +}); + + + diff --git a/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/style.css b/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/style.css new file mode 100644 index 000000000..316816c94 --- /dev/null +++ b/4) BEATBOX using JS/JavscriptNewGame(Bubble-Game)/style.css @@ -0,0 +1,79 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.main{ + width:100%; + height:100vh; + background-color: rgb(202, 238, 202); + display:flex; + justify-content: center; + align-items: center; +} +.content{ + width:80%; + height:85%; + background-color: #fff; + /* display: flex; */ + border-radius: 10px; + overflow:hidden; +} +.ptop{ + width:100%; + height:6.1rem; + background-color:rgb(72,104,72); + display: flex; + justify-content: space-evenly; + align-items: center; + color:white; + padding:0px 30%; +} +.box{ + display:flex; + gap:1.2rem; + align-items: center; + padding: 0.8rem; + +} +.box2{ + color:rgb(53, 125, 53); + padding: 0.9rem 1.4rem ; + border-radius: 5px; + background-color: white; + font-weight: 600; + font-size: 1.5rem; +} +.pbotm{ + display: flex; + gap:0.9rem; + width:100%; + height:calc(85% - 1.6rem); + padding: 1.2rem 0.5rem; + flex-wrap:wrap; + +} +#pbtm { + display: flex; + justify-content: center; + align-items: center; + color:red; + +} +.bub{ + + display: flex; + align-items: center; + justify-content: center; + height:2.2rem; + width:2.2rem; + background-color: rgb(72,104,72); + border-radius: 50%; + color:white; + font-weight: 600; +} +.bub:hover{ + cursor: pointer; + background-color: rgb(6, 70, 6); +} +