Coding with Rumaysa

Catch the Ghost [GAME + DEMO]

@import url('https://fonts.googleapis.com/css2?family=Chela+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

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

h1 {
text-transform: uppercase;
font-family: Chela One, sans-serif;
font-size: 40px;
}

h3, p {
font-family: Special Elite, sans-serif;
}

p {
font-weight: 700;
}

.doors {
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: 4px solid red;
color: black;
}

.doors h1 {
display: none;
}

.door {
background-color: #7a4500;
width: 120px;
height: 170px;
position: relative;
margin-right: 10px;
margin-bottom: 31px;
}

.door::before, .door::after {
content: "";
background-color: #593200;
position: absolute;
width: 100px;
left: 9%;
height: 55px;
}

.door::before {
top: 10%;
}

.door::after {
bottom: 8%;
}

.door .handle {
background-color: #f0e40a;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
top: 45%;
right: 3%;
}

.ghost {
position: relative;
width: 120px;
height: 170px;
background-color: #e8e8e8;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
margin-right: 10px;
margin-bottom: 31px;
}

.ghost::before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background-color: #212121;
top: 90px;
left: 48px;
}

.eye {
background-color: #212121;
border-radius: 50%;
width: 40px;
height: 40px;
position: absolute;
top: 40px;
}

.eye::after {
content: "";
background-color: white;
left: 5px;
top: -1px;
width: 28px;
height: 28px;
border-radius: 50%;
position: absolute;
}

.eye.left {
left: 15px;
}

.eye.right {
right: 15px;
}

// define variables
var lives, foundGhost, doorBehind, wrong, foundit, gameoversound, congrats;
lives = 3;
foundGhost = false;
doorBehind = "d" + (Math.floor(Math.random() * 10) + 1);
gameoversound = new Audio("https://justcodaborate.org/project_assets/gameover.wav");
congrats = new Audio("https://justcodaborate.org/project_assets/congrats.wav");
wrong = new Audio("https://justcodaborate.org/project_assets/wrong.wav");
foundit = new Audio("https://justcodaborate.org/project_assets/found%20it.wav");

// select elements
var doors = document.querySelector(".doors");
var game_over = document.querySelector(".game-over");
var lives_left = document.getElementById("lives_left");

// generate doors
for(var i = 1; i < 11; i++) {
 var door_div = document.createElement("div");
 door_div.setAttribute("class","door");
 door_div.setAttribute("onclick","openDoor(this)");
 door_div.setAttribute("id","d"+i);

var handle_div = document.createElement("div");
 handle_div.setAttribute("class","handle");
 door_div.appendChild(handle_div);

doors.appendChild(door_div);
}

function subtractLife() {
 lives -= 1;
 lives_left.innerHTML = lives;

if(lives == 0) {
  endGame();
 }
}

// open door function
function openDoor(elem) {
 if(elem.id == doorBehind) {
  var handle = elem.querySelector(".handle");
  handle.remove();

elem.setAttribute("class","ghost");
  var eye1, eye2;
  eye1 = document.createElement("div");
  eye2 = document.createElement("div");

eye1.setAttribute("class","eye left");
  eye2.setAttribute("class","eye right");
  elem.appendChild(eye1);
  elem.appendChild(eye2);
  
  foundit.play();

setTimeout(function() {
   foundGhost = true;
   endGame();
  }, 1000);
 } else if(lives != 0 && elem.id != doorBehind) {
  subtractLife();
  wrong.play();
  elem.style.visibility = "hidden";
 }
}

// hide doors function
function hideDoors() {
 var allDoors = document.querySelectorAll(".door");
 for(var j = 0; j < allDoors.length; j++){
  allDoors[j].style.display = "none";
 }
 
 if(foundGhost) {
  var ghost = document.querySelector(".ghost");
  ghost.style.display = "none";
 }
}