PAAD GOLI PAAD

by WildFalcon47
380 lines5.7 KB
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAAD GOLI PAAD</title>

<style>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  overflow:hidden;
  background:#87CEEB;
  font-family:Arial,sans-serif;
}

#game{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:linear-gradient(#87CEEB 0%,#dff7ff 65%,#79c85a 65%);
}

/* Ground */
#ground{
  position:absolute;
  bottom:0;
  width:100%;
  height:35%;
  background:#55a943;
  border-top:8px solid #39852e;
}

/* Player */
#player{
  position:absolute;
  left:70px;
  bottom:35%;
  width:70px;
  height:100px;
}

/* Head */
.head{
  position:absolute;
  left:15px;
  top:0;
  width:45px;
  height:45px;
  background:#f2b27f;
  border:3px solid #222;
  border-radius:50%;
}

/* Hair */
.head:before{
  content:"";
  position:absolute;
  left:2px;
  top:-5px;
  width:37px;
  height:15px;
  background:#222;
  border-radius:50% 50% 20% 20%;
}

/* Body */
.body{
  position:absolute;
  left:22px;
  top:42px;
  width:28px;
  height:35px;
  background:#ff4444;
  border:3px solid #222;
  border-radius:8px;
}

/* Arms */
.arm{
  position:absolute;
  top:47px;
  width:10px;
  height:38px;
  background:#f2b27f;
  border:3px solid #222;
  border-radius:8px;
  transform-origin:top center;
}

.arm.left{
  left:12px;
  animation:armRun .22s infinite alternate;
}

.arm.right{
  left:50px;
  animation:armRun2 .22s infinite alternate;
}

/* Legs */
.leg{
  position:absolute;
  top:72px;
  width:12px;
  height:35px;
  background:#244b9b;
  border:3px solid #222;
  border-radius:8px;
  transform-origin:top center;
}

.leg.left{
  left:24px;
  animation:legRun .22s infinite alternate;
}

.leg.right{
  left:40px;
  animation:legRun2 .22s infinite alternate;
}

/* Running animations */
@keyframes legRun{
  from{transform:rotate(32deg);}
  to{transform:rotate(-32deg);}
}

@keyframes legRun2{
  from{transform:rotate(-32deg);}
  to{transform:rotate(32deg);}
}

@keyframes armRun{
  from{transform:rotate(-35deg);}
  to{transform:rotate(35deg);}
}

@keyframes armRun2{
  from{transform:rotate(35deg);}
  to{transform:rotate(-35deg);}
}

/* Burger */
.burger{
  position:absolute;
  width:55px;
  height:42px;
  font-size:42px;
  animation:fall linear forwards;
}

@keyframes fall{
  from{
    top:-60px;
  }
  to{
    top:100%;
  }
}

/* HUD */
#score{
  position:absolute;
  top:15px;
  left:15px;
  font-size:24px;
  font-weight:bold;
  color:white;
  text-shadow:2px 2px #222;
}

#barBox{
  position:absolute;
  top:15px;
  right:15px;
  width:130px;
  height:25px;
  border:3px solid #222;
  background:white;
  border-radius:15px;
  overflow:hidden;
}

#bar{
  width:30%;
  height:100%;
  background:#22c55e;
  transition:.2s;
}

#gameOver{
  display:none;
  position:absolute;
  top:40%;
  width:100%;
  text-align:center;
  color:white;
  font-size:38px;
  font-weight:bold;
  text-shadow:3px 3px #222;
}

#restart{
  margin-top:15px;
  padding:12px 25px;
  font-size:20px;
  border:0;
  border-radius:10px;
}
</style>
</head>

<body>

<div id="game">

  <div id="score">🍔 Burger: 0</div>

  <div id="barBox">
    <div id="bar"></div>
  </div>

  <div id="player">
    <div class="head"></div>
    <div class="body"></div>
    <div class="arm left"></div>
    <div class="arm right"></div>
    <div class="leg left"></div>
    <div class="leg right"></div>
  </div>

  <div id="ground"></div>

  <div id="gameOver">
    💨 PAAD GOLI PAAD 💨
    <br>
    <button id="restart" onclick="location.reload()">RESTART</button>
  </div>

</div>

<script>

let score = 0;
let fullness = 30;
let gameRunning = true;

const game = document.getElementById("game");
const player = document.getElementById("player");
const scoreText = document.getElementById("score");
const bar = document.getElementById("bar");
const gameOver = document.getElementById("gameOver");

function createBurger(){

  if(!gameRunning) return;

  const burger = document.createElement("div");

  burger.className = "burger";
  burger.innerHTML = "🍔";

  burger.style.left =
    (Math.random() * (window.innerWidth - 60)) + "px";

  burger.style.animationDuration =
    (2 + Math.random() * 2) + "s";

  game.appendChild(burger);

  const check = setInterval(()=>{

    if(!gameRunning){
      clearInterval(check);
      return;
    }

    const a = player.getBoundingClientRect();
    const b = burger.getBoundingClientRect();

    if(
      a.left < b.right &&
      a.right > b.left &&
      a.top < b.bottom &&
      a.bottom > b.top
    ){

      score++;
      fullness += 15;

      if(fullness > 100)
        fullness = 100;

      scoreText.innerHTML =
        "🍔 Burger: " + score;

      bar.style.width =
        fullness + "%";

      burger.remove();
      clearInterval(check);

      // Fart sound
      playFart();
    }

    if(b.top > window.innerHeight){
      burger.remove();
      clearInterval(check);
    }

  },30);
}

/* Burger spawn */
setInterval(()=>{
  createBurger();
},900);


/* Fart sound */
function playFart(){

  const audio =
    new Audio(
      "https://www.myinstants.com/media/sounds/fart-with-reverb.mp3"
    );

  audio.volume = 0.5;
  audio.play().catch(()=>{});
}


/* Fullness decreases */
setInterval(()=>{

  if(!gameRunning) return;

  fullness -= 2;

  if(fullness < 0)
    fullness = 0;

  bar.style.width =
    fullness + "%";

},500);


/* When full → character flies */
setInterval(()=>{

  if(fullness >= 100 && gameRunning){

    gameRunning = false;

    player.style.transition = "2s";
    player.style.bottom = "120%";
    player.style.transform = "rotate(720deg)";

    playFart();

    setTimeout(()=>{
      gameOver.style.display = "block";
    },1500);
  }

},100);


</script>

</body>
</html>
Game Source: PAAD GOLI PAAD

Creator: WildFalcon47
Libraries: none
Complexity: complex (380 lines, 5.7 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: paad-goli-paad-wildfalcon47" to link back to the original. Then publish at arcadelab.ai/publish.