Mini-jeux : Devinez, Pierre-Feuille-Ciseaux, Pile ou Face (JavaScript)

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 June 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>

Mini-jeux : Devinez, Pierre-Feuille-Ciseaux, Pile ou Face (JavaScript)

Recommandé

Bouton lumineux Discord

Un code par efficientcloud646

Coup de poupée de chiffon

HTML

CSS

JS

Recommandé

Bouton lumineux Discord

Un code par efficientcloud646

Coup de poupée de chiffon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS