purple_ghost

Pop the Balloons

@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: #9e52eb;
 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: #e3e3e3;
 width: 95%;
 color: black;
 height: auto;
 padding: 8px;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 align-items: center;
 justify-content: center;
 display: flex;
 flex-wrap: wrap;
 border-radius: 10px;
 border: 4px solid #3d6099;
}

.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;
 opacity: .3;
 border-radius: 50%;
 width: 10px;
 height: 10px;
 position: absolute;
 top: 5px;
 left: 23px;
}

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

// define variables
var timer, popped, popsound, gameoversound, congrats;
timer = 20;
popped = 0;
const balloon_colors = ['#a2ff7a', '#8bb6c7', '#3e084f', '#b05e12']; // misty green, cloud blue
                                                          // orchard and chocolate
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++) {
 createMGBalloons();
 createCBBalloons();
 createOBalloons();
 createCBalloons();
}

// 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 createMGBalloons() {
 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 createCBBalloons() {
 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 createOBalloons() {
 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 createCBalloons() {
 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";
 }
}