Mini Game Hub: Guess, RPS, Coin Flip JavaScript

816 iroger7

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mini Game Hub</title>
  <style>
    body { font-family: Arial, sans-serif; background: #f0f2f5; }
    h1, h2 { text-align: center; }
    .game-container { max-width: 400px; margin: 30px auto; background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.1);}
    .games-nav { display: flex; justify-content: space-around; margin-bottom: 20px; }
    .games-nav button { padding: 8px 14px; background: #4f8cff; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
    .games-nav button.active { background: #003366; }
    .hidden { display: none; }
    .result { font-weight: bold; margin: 10px 0; }
    input[type="number"] { width: 70px; }
    .choices button { margin-right: 5px; }
  </style>
</head>
<body>
  <h1>Mini Game Hub</h1>
  <div class="game-container">
    <div class="games-nav">
      <button onclick="showGame('guess')" id="btn-guess" class="active">Guess the Number</button>
      <button onclick="showGame('rps')" id="btn-rps">Rock, Paper, Scissors</button>
      <button onclick="showGame('coin')" id="btn-coin">Coin Flip</button>
    </div>

<div id="game-guess">
      <h2>Guess the Number</h2>
      <p>I'm thinking of a number between <span id="min-num">1</span> and <span id="max-num">100</span>. Try to guess it!</p>
      <input type="number" id="guess-input" min="1" max="100">
      <button onclick="makeGuess()">Guess</button>
      <button onclick="resetGuessGame()">Reset</button>
      <div class="result" id="guess-result"></div>
      <div id="guess-attempts"></div>
    </div>

<div id="game-rps" class="hidden">
      <h2>Rock, Paper, Scissors</h2>
      <div class="choices">
        <button onclick="playRPS('Rock')">Rock</button>
        <button onclick="playRPS('Paper')">Paper</button>
        <button onclick="playRPS('Scissors')">Scissors</button>
      </div>
      <div class="result" id="rps-result"></div>
      <div id="rps-score"></div>
    </div>

<div id="game-coin" class="hidden">
      <h2>Coin Flip</h2>
      <button onclick="flipCoin()">Flip Coin</button>
      <div class="result" id="coin-result"></div>
      <div id="coin-score"></div>
    </div>
  </div>

// --- Guess the Number ---
  let minNum = 1, maxNum = 100, cpuNum, attempts;
  function resetGuessGame() {
    cpuNum = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
    attempts = 0;
    document.getElementById('guess-result').textContent = '';
    document.getElementById('guess-input').value = '';
    document.getElementById('guess-attempts').textContent = '';
  }
  function makeGuess() {
    let userGuess = parseInt(document.getElementById('guess-input').value, 10);
    if (isNaN(userGuess)) {
      document.getElementById('guess-result').textContent = 'Please enter a valid number.';
      return;
    }
    attempts++;
    if (userGuess < cpuNum) {
      document.getElementById('guess-result').textContent = 'Too low!';
    } else if (userGuess > cpuNum) {
      document.getElementById('guess-result').textContent = 'Too high!';
    } else {
      document.getElementById('guess-result').textContent = `Correct! The number was ${cpuNum}. Attempts: ${attempts}`;
    }
    document.getElementById('guess-attempts').textContent = `Attempts: ${attempts}`;
    document.getElementById('guess-input').value = '';
  }
  resetGuessGame();

// --- Rock, Paper, Scissors ---
  let rpsScore = { user: 0, cpu: 0, tie: 0 };
  function playRPS(userChoice) {
    const options = ['Rock', 'Paper', 'Scissors'];
    const cpuChoice = options[Math.floor(Math.random() * 3)];
    let result = '';
    if (userChoice === cpuChoice) {
      result = "It's a tie!";
      rpsScore.tie++;
    } else if (
      (userChoice === 'Rock' && cpuChoice === 'Scissors') ||
      (userChoice === 'Paper' && cpuChoice === 'Rock') ||
      (userChoice === 'Scissors' && cpuChoice === 'Paper')
    ) {
      result = `You win! CPU chose ${cpuChoice}.`;
      rpsScore.user++;
    } else {
      result = `You lose! CPU chose ${cpuChoice}.`;
      rpsScore.cpu++;
    }
    document.getElementById('rps-result').textContent = result;
    document.getElementById('rps-score').textContent =
      `Wins: ${rpsScore.user} | Losses: ${rpsScore.cpu} | Ties: ${rpsScore.tie}`;
  }

// --- Coin Flip ---
  let coinScore = { heads: 0, tails: 0 };
  function flipCoin() {
    const result = Math.random() < 0.5 ? 'Heads' : 'Tails';
    coinScore[result.toLowerCase()]++;
    document.getElementById('coin-result').textContent = `It's ${result}!`;
    document.getElementById('coin-score').textContent =
      `Heads: ${coinScore.heads} | Tails: ${coinScore.tails}`;
  }
</script>
</body>
</html>

CSS

Mini Game Hub: Guess, RPS, Coin Flip JavaScript

Recommended