Coding with Rumaysa

Pop the Balloons! [GAME + DEMO]

@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
 background-color: #ffb22e;
 text-align: center;
 color: white;
}

h1 {
 text-transform: uppercase;
 font-family: Bebas Neue;
 font-size: 40px;
}

h3, p {
 font-family: Rampart One;
}

p {
 font-weight: 700;
}

.balloons {
 background-color: white;
 width: 95%;
 height: auto;
 padding: 8px;
 position: relative;
 left: 50%;
 align-items: center;
 justify-content: center;
 text-align: center;
 transform: translateX(-50%);
 display: flex;
 flex-wrap: wrap;
 border-radius: 10px;
 border: 4px solid gray;
 color: black;
}

.balloons h1 {
 display: none;
}

.balloon {
 border-radius: 50%;
 width: 40px;
 height: 50px;
 position: relative;
 margin-right: 10px;
 margin-bottom: 31px;
 cursor: pointer;
}

.balloon::before {
 content: '';
 background-color: silver;
 border-radius: 50%;
 width: 10px;
 height: 10px;
 position: absolute;
 top: 5px;
 left: 23px;
 opacity: .3;
}

.balloon::after {
 content: '';
 background-color: silver;
 width: 1px;
 height: 31px;
 position: absolute;
 top: 42px;
 z-index: -1;
}

// define variables
var timer, score, popped, popsound, gameoversound, congrats;
timer = 20;
score = popped = 0;
const balloon_colors = ["red","blue","purple","green"];
popsound = new Audio("https://justcodaborate.org/project_assets/popsound.wav");
gameoversound = new Audio("https://justcodaborate.org/project_assets/gameover.wav");
congrats = new Audio("https://justcodaborate.org/project_assets/congrats.wav");

// select elements
var balloons = document.querySelector(".balloons");
var game_over = document.querySelector(".game-over");
var time_left = document.getElementById("time_left");
var number_popped = document.getElementById("number-popped");

// generate balloons
for(var i = 0; i < 13; i++) {
 createRedBalloons();
 createBlueBalloons();
 createPurpleBalloons();
 createGreenBalloons();
}

// end game and run timer
var downloadTimer = setInterval(function(){
 if(timer <= 0){
  clearInterval(downloadTimer);
  game_over.style.display = "block";
  time_left.innerHTML = "0";
  if(popped==52) {
   game_over.innerHTML = "congrats! you popped all the balloons!";
   congrats.play();
  } else if(popped==0) {
   game_over.innerHTML = "GAME OVER <br> you popped no balloons!";
   gameoversound.play();
   hideBalloons();
  } else if(popped==51) {
   game_over.innerHTML = "well done! you nearly popped all the balloons!";
   congrats.play();
   hideBalloons();
  } else {
   game_over.innerHTML = "GAME OVER <br> you popped: "+popped+"/52";
   gameoversound.play();
   hideBalloons();
  }
 } else {
  time_left.innerHTML = timer;
 }
 timer -= 1;
}, 1000);

// create balloon functions
function createRedBalloons() {
 var balloon_div = document.createElement("div");
 balloon_div.setAttribute("class","balloon");
 balloon_div.setAttribute("onclick","popBalloon(this)");
 balloon_div.style.background = balloon_colors[0];
 balloons.appendChild(balloon_div);
}

function createBlueBalloons() {
 var balloon_div = document.createElement("div");
 balloon_div.setAttribute("class","balloon");
 balloon_div.setAttribute("onclick","popBalloon(this)");
 balloon_div.style.background = balloon_colors[1];
 balloons.appendChild(balloon_div);
}

function createPurpleBalloons() {
 var balloon_div = document.createElement("div");
 balloon_div.setAttribute("class","balloon");
 balloon_div.setAttribute("onclick","popBalloon(this)");
 balloon_div.style.background = balloon_colors[2];
 balloons.appendChild(balloon_div);
}

function createGreenBalloons() {
 var balloon_div = document.createElement("div");
 balloon_div.setAttribute("class","balloon");
 balloon_div.setAttribute("onclick","popBalloon(this)");
 balloon_div.style.background = balloon_colors[3];
 balloons.appendChild(balloon_div);
}

// pop balloon function
function popBalloon(elem) {
 elem.style.display = "none";
 popped++;
 number_popped.innerText = popped;
 popsound.play();

if(timer != 0 && popped==52) {
  timer = 0;
 }
}

// hide remaining balloons function
function hideBalloons() {
 var balloons_remaining = document.querySelectorAll(".balloon");
 for(var j = 0; j < balloons_remaining.length; j++){
  balloons_remaining[j].style.display = "none";
 }
}