diff --git a/BubbleGame/AnuragC07/index.html b/BubbleGame/AnuragC07/index.html new file mode 100644 index 000000000..859f814cb --- /dev/null +++ b/BubbleGame/AnuragC07/index.html @@ -0,0 +1,34 @@ + + + + + + + Bubble Game + + + +
+
+
+

hit

+

5

+
+
+

timer

+

60

+
+
+

score

+

0

+
+
+
+
+ 5 +
+
+
+ + + diff --git a/BubbleGame/AnuragC07/readme.md b/BubbleGame/AnuragC07/readme.md new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/BubbleGame/AnuragC07/readme.md @@ -0,0 +1 @@ + diff --git a/BubbleGame/AnuragC07/script.js b/BubbleGame/AnuragC07/script.js new file mode 100644 index 000000000..aceb9411e --- /dev/null +++ b/BubbleGame/AnuragC07/script.js @@ -0,0 +1,58 @@ +var timer = 60; +var score = 0; +var hitrn; + + +function increaseScore() { + score += 10; + document.querySelector("#scoreVal").textContent = score; +} + +function getNewHit() { + hitrn = Math.floor(Math.random() * 10); + document.querySelector("#hitNum").textContent = hitrn; +} + + + +function makeBubble() { + var clutter = ""; + for (var i = 1; i <= 180; i++) { + var rn = Math.floor(Math.random() * 10) + clutter += `
${rn}
`; + } + document.querySelector("#pbtm").innerHTML = clutter; +} + + + +function runTimer() { + var timerInt = setInterval(function () { + if (timer > 0) { + timer--; + document.querySelector("#timerInterval").textContent = timer; + } + else { + clearInterval(timerInt); + document.querySelector("#pbtm").innerHTML = `

Game Over
+ Your Score is = ${score}

`; + document.querySelector("#hitNum").textContent = 0; + document.querySelector("#scoreVal").textContent = 0; + } + }, 1000); +} + + +document.querySelector("#pbtm") + .addEventListener("click", function(dets){ + var clickednum = Number(dets.target.textContent); + if(clickednum == hitrn) { + increaseScore(); + makeBubble(); + getNewHit(); + } + }); + +runTimer(); +makeBubble(); +getNewHit(); diff --git a/BubbleGame/AnuragC07/style.css b/BubbleGame/AnuragC07/style.css new file mode 100644 index 000000000..b3bcadf2a --- /dev/null +++ b/BubbleGame/AnuragC07/style.css @@ -0,0 +1,69 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + overflow: hidden; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +body { + background:rgb(181, 181, 255); +} +.outer-box { + border: 0px solid red; + border-radius: 12px; + height: 90vh; + width: 80%; + margin: auto; + margin-top: 30px; +} +.panel-top { + display: flex; + flex-direction: row; + padding: 20px 30%; + justify-content: space-around; + border: 0px solid red; + background: rgb(33, 33, 88); + color: white; +} +.score { + display: flex; + flex-direction: row; + gap: 10px; +} +.score h2 { + font-size: 25px; +} +.score p{ + font-size: 25px; + border: 2px solid white; + border-radius: 5px; + background: white; + color: rgb(33, 33, 88); + font-weight: 400; + width: 50px; + display: flex; + justify-content: center; +} +.panel-bottom { + background:rgb(255, 255, 255); + height: 90%; +} + + +.bubble { + display: inline-block; + padding-left: 18px; + padding-top: 10px; + font-size: 25px; + background: rgb(26, 26, 98); + margin: 8px; + color: white; + border-radius: 50%; + height: 50px; + width: 50px; +} +.bubble:hover { + background: rgb(11, 11, 60); + color: rgb(117, 117, 235); + cursor: pointer; +}