Mini Game Hub: Adivina, RPS, Lanzamiento de moneda JavaScript

742 iroger7

Abrir en el editor Publica tu código

Mini Game Hub: Adivina, RPS, Lanzamiento de moneda JavaScript

Recomendado

20 March 2026

Ejemplo de formulario de inicio de sesión HTML con inicio de sesión social

15 May 2025

Un código de facontheo1

20 October 2024

Botón de degradado CSS

HTML

<!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