Bubble Game using Javascript

Last Updated : 27 Jun, 2024

In this article, we will create a Bubble Game using JavaScript. The Bubble Game is a classic interactive web game where players aim to pop bubbles that appear on the screen. It incorporates elements such as a hit counter, timer, and score tracker to enhance the gaming experience.

Using JavaScript, players can interact with the game dynamically, aiming to achieve the highest score within a given time limit. This game not only provides entertainment but also serves as a practical example of interactive web application development using fundamental JavaScript concepts like event handling, DOM manipulation, and game logic implementation.

Prerequisite

Example

HTML

<!--index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="refresh" content="1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="main">
    <div id="panel">
       <div id="ptop">
        <h1></h1>
       <div class="elem">
           <h2>Hit</h2>
           <div id="hitval" class="box">0</div>
       </div>
       <div class="elem">
           <h2>Timer</h2>
           <div id="timerval" class="box">60</div>
       </div>
        <div class="elem">
            <h2>Score</h2>
            <div id="scoreval" class="box">0</div>
        </div>
        </div>
        <div id="pbtm">
    
        </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

/*style.css*/

*{
    margin: 0;
    padding: 0;
    font-family: "Gilroy";
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
#main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(99, 125, 99);
}
#panel{
    overflow: hidden;
    width: 80%;
    height: 80%;
    border-radius: 10px;
    background-color: #fff;
}
#ptop{
    padding: 0px 30%;
    justify-content: space-between;
    display: flex;
    align-items: center;
    color: #fff;
    width: 100%;
    height: 100px;
    background-color: rgb(70, 83, 70);
}

.elem{
    display: flex;
    align-items: center;
    gap: 20px;
}

.elem h2{
    font-weight: 500;
    font-size: 22px;
}
.box{
    color: rgb(135, 209, 135);
    font-weight: 600;
    font-size: 25px;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 5px;
}

#pbtm{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
    width: 100%;
    height: calc(100%-100px);
}
.bubble{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgb(70, 103, 70);
    color: #fff;
    border-radius: 50%;
}
.bubble:hover {
    cursor: pointer;
    background-color: rgb(10, 95, 10);
}

JavaScript

//script.js

var timer=59;
var score=0;
var hitrm=0;
function increaseScore(){
 score+=10;
 document.querySelector("#scoreval").textContent=score;
}
function makeNewHit(){
     hitrm=Math.floor(Math.random()*10);
    document.querySelector("#hitval").textContent=hitrm;
}
function makebubble(){
var clutter="";
for(let i=1;i<=114;i++){
    var count=Math.floor(Math.random()*10);
    clutter+=`<div class="bubble">${count}</div>`
}
document.querySelector("#pbtm").innerHTML=clutter;
}

function runtimer(){
var timerint=setInterval(function(){
    if(timer>0){
        timer--;
        document.querySelector("#timerval").textContent=timer;
    }
    else{
        clearInterval(timerint);
        document.querySelector("#pbtm").innerHTML=`<h1> Game Over </h1>`;
    }
},2000)
}

document.querySelector("#pbtm").addEventListener("click",function(dets){
    var clickednum=Number(dets.target.textContent);
    if(clickednum === hitrm)
    increaseScore();
    makebubble();
    makeNewHit();
})

runtimer();
increaseScore();
makeNewHit();
runtimer();
makebubble();

Output

Step-by-Step Explaination

Step 1: Start the Game

The timer will start counting down immediately after you start.

Step 2: Aim Your Cursor or Finger

Move your cursor (if using a mouse) or your finger (if using a touchscreen device) to aim at the bubbles that appear on the screen.

Step 3: Pop the Bubbles

Click or tap on the bubbles to pop them. Each successful hit increases your score. The bubbles will appear at random positions and might move at different speeds.

Step 4: Keep an Eye on the Timer

Watch the countdown timer, usually displayed at the top of the screen. Try to pop as many bubbles as you can before the timer runs out.

Step 5: Focus on Popping More Bubbles

Stay focused and aim to pop bubbles quickly and accurately. Larger bubbles are usually easier to hit, but some games might offer more points for smaller or moving bubbles.

Step 6: Use Power-Ups (if available)

Some games include power-ups like time extensions, score multipliers, or bubble explosions that pop multiple bubbles at once. Use these strategically to boost your score.

Step 7: Game Over and View Your Score

When the timer reaches zero, the game ends. Your final score will be displayed, showing how many bubbles you popped and the total points you accumulated.

Tips for High Scores

Be Quick and Accurate:

Pop bubbles as soon as they appear to maximize your score.
Avoid missing bubbles as each miss is a missed opportunity for points.

Prioritize Larger Bubbles:

Larger bubbles are generally easier to hit and pop.
Some games might reward more points for smaller or moving bubbles, so adjust your strategy accordingly.

Stay Focused:

Concentrate on the screen and anticipate where the next bubble might appear.
Maintain a steady hand or precise tapping to ensure accuracy.

By following these steps and utilizing the tips provided, you'll be well-prepared to enjoy and excel in the bubble game. Happy popping!

How to Change an Uncontrolled Input in React?

bahadurl91x7

Improve

Article Tags :