Bubble Game In Javascript

Akshdeep Singh August 16, 2023

   

Bubble Game in Javascript


Hello Coder! Welcome To The Codewaksh Blog. In This Blog, We Learn How To Write A Program Of Bubble Game in Javascript By Using Html and Css, Javascript.


I Hope You Enjoy Our Blog So Let’s Start With A  Html , css and javscruipt For Bubble Game in Javascript.




OverView of Project

Compatible Browers: Chrome, Edge, Firefox, Opera, Safari, etc
Responsive: Yes

How to Bubble Game In Javascript using HTML, CSS?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="main">
        <div id="container">
            <div id="panel-top">
                <div class="pt-container">
                    <div class="ptc-box">
                        <h4>Hit</h4>
                        <div class="result" id="result">6</div>
                    </div>
                    <div class="ptc-box">
                        <h4>Timer</h4>
                        <div class="result" id="timer">60</div>
                    </div>
                    <div class="ptc-box">
                        <h4>Score</h4>
                        <div class="result" id="re_score">0</div>
                    </div>
                </div>
            </div>
            <div class="panel-bottom" id="panel_bottom">
            </div>
        </div>
    </div>


    <script src="main.js"></script>
</body>
</html>

Explanation of Above Code <3,

The code starts with a tag.
This tells the browser that this document is encoded in UTF-8, which is an encoding of Unicode characters.
The next line starts with .
This sets up the viewport for mobile devices to be as wide as possible while still being able to see all of the content on screen at once without scrolling horizontally or vertically.
The width property specifies how many pixels wide the page should be and initial-scale specifies how much larger than 100% (the default) it should start out at when first loaded into memory by the browser.
Next comes a title tag and then a link tag pointing to style.css .
These tags are used for styling purposes and tell browsers what type of formatting they should use when rendering this web page's contents onto their screens.
The code is a simple HTML document with two divs.
The first div contains three boxes, and the second div contains two boxes.

CSS

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(155, 182, 155);
}

#container{
    height: 90%;
    width: 90%;
    max-width: 100%;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

#container .pt-container{
    width: 100%;
    background-color:rgb(121, 177, 121);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

#container .pt-container .ptc-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    font-size: 1.4rem;
}

#container .pt-container .ptc-box h4{
    color: #fff;
}

#container .pt-container .ptc-box .result{
    background-color: #fff;
    padding: 10px 12px;
    border-radius: 3px;
    font-weight: 800;
    color: #777;
}

#container .panel-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px;
    height: calc(100% - 100px);
    width: 100%;
}

#container .panel-bottom h1{
    font-size: 10rem;
    color: rgb(108, 172, 108);
}

#container .panel-bottom .bubble{
    width: 50px;
    height: 50px;
    font-weight: 800;
    font-size: 1.5rem;
    background-color: rgb(121, 177, 121);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: .2s ease;
    scale: 1;
}

#container .panel-bottom .bubble:hover{
    font-size: 1.7rem;
    background-color: rgb(108, 172, 108);
    scale: .9;
    cursor: pointer;
}

Explanation of Above Code <3,

In this CSS we give style all the elements and give proper padding, color, margin and better looks. Also we have import the google font in CSS.
copy all the CSS code and paste all these into your CSS file.

Css is All is you'r mind.   make sure do you'r best in css file <3

Java Script

let scoreval = 0;
let newhit = 0;
const Getnewhit = () => {
    newhit = Math.floor(Math.floor(Math.random() * 10));
  document.getElementById("result").innerHTML = newhit;
};

const makebubble = () => {
  let bubbles = "";
  for (let i = 0; i <= 107; i++) {
    let randomNumber = Math.floor(Math.floor(Math.random() * 10));
    bubbles += `<div class="bubble">${randomNumber}</div>`;
  }
  document.getElementById("panel_bottom").innerHTML = bubbles;
};

const TimerFunction = () => {
  let timer = 60;
  const timercount = () => {
    let timerfun = setInterval(function () {
      if (timer > 0) {
        timer--;
        document.getElementById("timer").innerHTML = timer;
      } else {
        clearInterval(timerfun);
        document.getElementById('panel_bottom').innerHTML = `<h1>Game Over !</h1>`
      }
    }, 1000);
  };
  timercount();
};

const scoreincrease = () => {
  scoreval += 10;
  document.getElementById("re_score").innerHTML = scoreval;
};
const scoredecrease = () => {
  scoreval -= 10;
  document.getElementById("re_score").innerHTML = scoreval;
};

document.getElementById("panel_bottom").addEventListener("click", (dets) => {
  let guessbubble = Number(dets.target.textContent);
  if ((guessbubble === newhit)) {
      scoreincrease();
    } else {
        scoredecrease()
    }
    makebubble();
    Getnewhit();
});

Getnewhit();
makebubble();
TimerFunction();

Explanation of Above Code <3,

The code starts by declaring a variable scoreval.
This is the number of points that the player has at the beginning of each round.
Next, it declares two functions called scoredecrease and scoreincrease which decrease or increase their respective variables by 10 points respectively.
The code then creates an event listener for when someone clicks on the "panel_bottom" element in order to make a guess bubble appear on screen.
If they click on this element again before time runs out, then they will be able to guess what number was chosen with their mouse cursor's position as well as how many bubbles are currently visible in total (the current value of bubbles).
The next function is TimerFunction which sets up an interval timer that will run every second and update its own text content with whatever value is stored in timerfun (which equals setInterval(function () {...}, 1000)).
After setting up this interval timer, it calls timercount() which updates its own text content with whatever value is stored in timerfun after running for one second.


You can also add your mind java script as per your sure.

Thank You!

Learn how to create a Bubble Game In Javascript using HTML, CSS, Javascript. in this article. Please leave a comment if we made a mistake or there was any confusion so we can respond or make learning easier for you.


Akshdeep Singh

Posted by Akshdeep Singh

Post a Comment

0 Comments