Gas Trophy Game

by StealthScout36

135 lines2.8 KB

<!DOCTYPE html>
<html>
<head>
  <title>Gas Trophy Game</title>
</head>

<body style="margin:0; font-family:Arial; background:linear-gradient(#1e1e2f, #2a2a40); color:white; text-align:center;">

<audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3"></audio>
<audio id="winSound" src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"></audio>

<!-- LOBBY -->
<div id="lobby" style="margin-top:80px;">

  <h1 style="font-size:60px; color:#ffcc00;">🔥 GAS GAME</h1>

  <h2>🏆 Celkem: <span id="totalTrophies">0</span></h2>

  <h3 id="selectedChar">Vybráno: Gas | 0 🏆</h3>

  <h2 style="margin-top:30px;">CHOOSE A CHARACTER</h2>

  <div>
    <button onclick="selectChar('Gas')">Gas (FREE)</button>
    <button onclick="buyChar('Frost')">Frost (10)</button>
    <button onclick="buyChar('Volt')">Volt (55)</button>
    <button onclick="buyChar('Rocky')">Rocky (100)</button>
    <button onclick="buyChar('Shadow')">Shadow (1000)</button>
  </div>

  <br><br>

  <button onclick="playGame()" style="padding:20px 50px; font-size:22px;">▶ PLAY</button>

</div>

<!-- RESULT -->
<div id="resultScreen" style="display:none; margin-top:120px;">
  <h1>🎮 RESULT</h1>
  <h2 id="resultText"></h2>

  <button onclick="back()">🏠 BACK</button>
</div>

<script>

// DATA
let selectedChar="Gas";

let charTrophies={
  Gas:0,
  Frost:0,
  Volt:0,
  Rocky:0,
  Shadow:0
};

let ownedChars={
  Gas:true,
  Frost:false,
  Volt:false,
  Rocky:false,
  Shadow:false
};

let total=0;

// SOUND
function playClick(){document.getElementById("clickSound").play();}
function playWin(){document.getElementById("winSound").play();}

// SELECT
function selectChar(name){
  if(!ownedChars[name]) return alert("❌ Nemáš postavu!");
  selectedChar=name;
  updateUI();
}

// BUY
function buyChar(name){

  let cost={
    Frost:10,
    Volt:55,
    Rocky:100,
    Shadow:1000
  };

  if(ownedChars[name]) return alert("už máš");

  if(total < cost[name]) return alert("❌ Nemáš dost 🏆");

  total -= cost[name];
  ownedChars[name]=true;

  updateUI();
  alert("✅ Koupil jsi " + name);
}

// GAME
function playGame(){
  playClick();

  let gain=Math.floor(Math.random()*8)+3;

  total += gain;
  charTrophies[selectedChar] += gain;

  document.getElementById("lobby").style.display="none";
  document.getElementById("resultScreen").style.display="block";

  document.getElementById("resultText").innerText="🏆 +"+gain;

  playWin();
  updateUI();
}

// BACK
function back(){
  document.getElementById("resultScreen").style.display="none";
  document.getElementById("lobby").style.display="block";
}

// UI
function updateUI(){
  document.getElementById("totalTrophies").innerText=total;

  document.getElementById("selectedChar").innerText=
    "Vybráno: "+selectedChar+" | "+charTrophies[selectedChar]+" 🏆";
}

</script>

</body>
</html>

Game Source: Gas Trophy Game

Creator: StealthScout36

Libraries: none

Complexity: moderate (135 lines, 2.8 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: gas-trophy-game-stealthscout36" to link back to the original. Then publish at arcadelab.ai/publish.