Central de Minijogos: Adivinhação, Pedra, Papel e Tesoura, Cara ou Coroa em JavaScript

Abrir no Editor Video Publique Seu Código

Recomendado

21 September 2024

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

Central de Minijogos: Adivinhação, Pedra, Papel e Tesoura, Cara ou Coroa em JavaScript

Recomendado

Cronômetro

Página de login

Um código de Metehan

HTML

CSS

JS

Recomendado

Cronômetro

Página de login

Um código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS