Mini Game Hub: Indovina, RPS, Lancio della moneta JavaScript

42 iroger7

Apri nell'Editor Pubblica il Tuo Codice

Mini Game Hub: Indovina, RPS, Lancio della moneta JavaScript

Consigliato

4 September 2025

Frammento HTML di animazione della porta della stanza CSS

10 December 2025

Gioco di ping pong retrò in JavaScript in HTML5 Canvas

12 July 2025

Contatore di clic della barra spaziatrice - JavaScript HTML

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>

Consigliato

Frammento HTML di animazione della porta della stanza CSS

Gioco di ping pong retrò in JavaScript in HTML5 Canvas

Contatore di clic della barra spaziatrice - JavaScript HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS