Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ultimate Pierre-Feuille-Ciseaux</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes shake { | |
| 0%, 100% { transform: translateY(0); } | |
| 25% { transform: translateY(-15px); } | |
| 50% { transform: translateY(0); } | |
| 75% { transform: translateY(-5px); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: scale(0.8); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .shake { | |
| animation: shake 0.5s ease-in-out; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| .choice-btn:hover { | |
| transform: translateY(-5px) scale(1.05); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Ultimate <span class="text-indigo-600">Pierre-Feuille-Ciseaux</span></h1> | |
| <p class="text-lg text-gray-600">Le jeu classique avec des fonctionnalités modernes</p> | |
| </header> | |
| <!-- Game Stats --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8 grid grid-cols-3 gap-4 text-center"> | |
| <div class="bg-indigo-50 rounded-lg p-4"> | |
| <div class="text-indigo-600 font-bold text-xl" id="wins">0</div> | |
| <div class="text-gray-600 text-sm">Victoires</div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="text-gray-600 font-bold text-xl" id="ties">0</div> | |
| <div class="text-gray-600 text-sm">Égalités</div> | |
| </div> | |
| <div class="bg-red-50 rounded-lg p-4"> | |
| <div class="text-red-600 font-bold text-xl" id="losses">0</div> | |
| <div class="text-gray-600 text-sm">Défaites</div> | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <!-- Score Display --> | |
| <div class="gradient-bg text-white p-4 text-center"> | |
| <div class="text-xl font-bold">Score: <span id="score">0</span> - <span id="computer-score">0</span></div> | |
| </div> | |
| <!-- Choices Display --> | |
| <div class="p-6 grid grid-cols-2 gap-8 items-center"> | |
| <!-- Player Choice --> | |
| <div class="text-center"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Votre choix</h3> | |
| <div class="h-40 flex items-center justify-center"> | |
| <div id="player-choice" class="text-6xl opacity-0"></div> | |
| </div> | |
| </div> | |
| <!-- Computer Choice --> | |
| <div class="text-center"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Ordinateur</h3> | |
| <div class="h-40 flex items-center justify-center"> | |
| <div id="computer-choice" class="text-6xl opacity-0"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Result Display --> | |
| <div class="px-6 pb-6 text-center"> | |
| <div id="result" class="text-2xl font-bold text-gray-800 min-h-8"></div> | |
| <div id="round-result" class="text-lg text-gray-600 mt-2"></div> | |
| </div> | |
| </div> | |
| <!-- Game Controls --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold text-center text-gray-800 mb-6">Faites votre choix</h2> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <!-- Pierre --> | |
| <button onclick="playGame('pierre')" class="choice-btn bg-gray-100 hover:bg-gray-200 rounded-xl p-4 text-center transition-all duration-300"> | |
| <div class="text-5xl mb-2">✊</div> | |
| <div class="font-semibold text-gray-700">Pierre</div> | |
| </button> | |
| <!-- Feuille --> | |
| <button onclick="playGame('feuille')" class="choice-btn bg-green-100 hover:bg-green-200 rounded-xl p-4 text-center transition-all duration-300"> | |
| <div class="text-5xl mb-2">✋</div> | |
| <div class="font-semibold text-gray-700">Feuille</div> | |
| </button> | |
| <!-- Ciseaux --> | |
| <button onclick="playGame('ciseaux')" class="choice-btn bg-blue-100 hover:bg-blue-200 rounded-xl p-4 text-center transition-all duration-300"> | |
| <div class="text-5xl mb-2">✌️</div> | |
| <div class="font-semibold text-gray-700">Ciseaux</div> | |
| </button> | |
| </div> | |
| <!-- Advanced Options --> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <h3 class="text-lg font-semibold text-center text-gray-800 mb-4">Options avancées</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Lizard --> | |
| <button onclick="playGame('lezard')" class="choice-btn bg-purple-100 hover:bg-purple-200 rounded-xl p-4 text-center transition-all duration-300"> | |
| <div class="text-5xl mb-2">🦎</div> | |
| <div class="font-semibold text-gray-700">Lézard</div> | |
| </button> | |
| <!-- Spock --> | |
| <button onclick="playGame('spock')" class="choice-btn bg-yellow-100 hover:bg-yellow-200 rounded-xl p-4 text-center transition-all duration-300"> | |
| <div class="text-5xl mb-2">🖖</div> | |
| <div class="font-semibold text-gray-700">Spock</div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Game History --> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <h3 class="text-lg font-semibold text-center text-gray-800 mb-4">Historique des parties</h3> | |
| <div id="game-history" class="space-y-2 max-h-40 overflow-y-auto"> | |
| <!-- History items will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reset Button --> | |
| <div class="mt-6 text-center"> | |
| <button onclick="resetGame()" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> | |
| <i class="fas fa-redo mr-2"></i> Réinitialiser | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Game state | |
| let wins = 0; | |
| let ties = 0; | |
| let losses = 0; | |
| let playerScore = 0; | |
| let computerScore = 0; | |
| let gameHistory = []; | |
| // Emoji mappings | |
| const emojis = { | |
| 'pierre': '✊', | |
| 'feuille': '✋', | |
| 'ciseaux': '✌️', | |
| 'lezard': '🦎', | |
| 'spock': '🖖' | |
| }; | |
| // Game rules (extended with Lizard and Spock) | |
| const rules = { | |
| 'pierre': ['ciseaux', 'lezard'], | |
| 'feuille': ['pierre', 'spock'], | |
| 'ciseaux': ['feuille', 'lezard'], | |
| 'lezard': ['feuille', 'spock'], | |
| 'spock': ['pierre', 'ciseaux'] | |
| }; | |
| // Rule explanations | |
| const explanations = { | |
| 'pierre': { | |
| 'ciseaux': 'Pierre écrase les ciseaux', | |
| 'lezard': 'Pierre écrase le lézard' | |
| }, | |
| 'feuille': { | |
| 'pierre': 'Feuille enveloppe la pierre', | |
| 'spock': 'Feuille discrédite Spock' | |
| }, | |
| 'ciseaux': { | |
| 'feuille': 'Ciseaux coupent la feuille', | |
| 'lezard': 'Ciseaux décapitent le lézard' | |
| }, | |
| 'lezard': { | |
| 'feuille': 'Lézard mange la feuille', | |
| 'spock': 'Lézard empoisonne Spock' | |
| }, | |
| 'spock': { | |
| 'pierre': 'Spock vaporise la pierre', | |
| 'ciseaux': 'Spock casse les ciseaux' | |
| } | |
| }; | |
| // Play the game | |
| function playGame(playerChoice) { | |
| // Reset display | |
| document.getElementById('player-choice').classList.remove('shake', 'fade-in'); | |
| document.getElementById('computer-choice').classList.remove('shake', 'fade-in'); | |
| document.getElementById('result').textContent = ''; | |
| document.getElementById('round-result').textContent = ''; | |
| // Show player choice with animation | |
| const playerChoiceElement = document.getElementById('player-choice'); | |
| playerChoiceElement.textContent = emojis[playerChoice]; | |
| playerChoiceElement.classList.remove('opacity-0'); | |
| playerChoiceElement.classList.add('shake'); | |
| // Computer makes random choice | |
| const choices = Object.keys(rules); | |
| const computerChoice = choices[Math.floor(Math.random() * choices.length)]; | |
| // Show computer choice with delay and animation | |
| setTimeout(() => { | |
| const computerChoiceElement = document.getElementById('computer-choice'); | |
| computerChoiceElement.textContent = emojis[computerChoice]; | |
| computerChoiceElement.classList.remove('opacity-0'); | |
| computerChoiceElement.classList.add('shake'); | |
| // Determine winner after animations complete | |
| setTimeout(() => { | |
| determineWinner(playerChoice, computerChoice); | |
| }, 500); | |
| }, 300); | |
| } | |
| // Determine the winner | |
| function determineWinner(player, computer) { | |
| let result = ''; | |
| let roundResult = ''; | |
| if (player === computer) { | |
| result = 'Égalité !'; | |
| roundResult = 'Les deux ont choisi ' + getChoiceName(player); | |
| ties++; | |
| document.getElementById('ties').textContent = ties; | |
| } | |
| else if (rules[player].includes(computer)) { | |
| result = 'Vous gagnez !'; | |
| roundResult = explanations[player][computer]; | |
| wins++; | |
| playerScore++; | |
| document.getElementById('wins').textContent = wins; | |
| document.getElementById('score').textContent = playerScore; | |
| } | |
| else { | |
| result = 'Vous perdez !'; | |
| roundResult = explanations[computer][player]; | |
| losses++; | |
| computerScore++; | |
| document.getElementById('losses').textContent = losses; | |
| document.getElementById('computer-score').textContent = computerScore; | |
| } | |
| // Display results | |
| document.getElementById('result').textContent = result; | |
| document.getElementById('round-result').textContent = roundResult; | |
| // Add to history | |
| addToHistory(player, computer, result); | |
| } | |
| // Get French name for choice | |
| function getChoiceName(choice) { | |
| const names = { | |
| 'pierre': 'Pierre', | |
| 'feuille': 'Feuille', | |
| 'ciseaux': 'Ciseaux', | |
| 'lezard': 'Lézard', | |
| 'spock': 'Spock' | |
| }; | |
| return names[choice]; | |
| } | |
| // Add game to history | |
| function addToHistory(player, computer, result) { | |
| const historyItem = { | |
| player: player, | |
| computer: computer, | |
| result: result, | |
| timestamp: new Date().toLocaleTimeString() | |
| }; | |
| gameHistory.unshift(historyItem); | |
| // Update history display | |
| updateHistoryDisplay(); | |
| } | |
| // Update history display | |
| function updateHistoryDisplay() { | |
| const historyContainer = document.getElementById('game-history'); | |
| historyContainer.innerHTML = ''; | |
| gameHistory.slice(0, 5).forEach(item => { | |
| const historyElement = document.createElement('div'); | |
| historyElement.className = 'bg-gray-50 p-3 rounded-lg'; | |
| let resultColor = 'text-gray-600'; | |
| if (item.result.includes('gagnez')) resultColor = 'text-green-500'; | |
| if (item.result.includes('perdez')) resultColor = 'text-red-500'; | |
| historyElement.innerHTML = ` | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-medium">${getChoiceName(item.player)}</span> vs | |
| <span class="font-medium">${getChoiceName(item.computer)}</span> | |
| </div> | |
| <div class="${resultColor} font-medium">${item.result}</div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">${item.timestamp}</div> | |
| `; | |
| historyContainer.appendChild(historyElement); | |
| }); | |
| } | |
| // Reset the game | |
| function resetGame() { | |
| wins = 0; | |
| ties = 0; | |
| losses = 0; | |
| playerScore = 0; | |
| computerScore = 0; | |
| gameHistory = []; | |
| document.getElementById('wins').textContent = '0'; | |
| document.getElementById('ties').textContent = '0'; | |
| document.getElementById('losses').textContent = '0'; | |
| document.getElementById('score').textContent = '0'; | |
| document.getElementById('computer-score').textContent = '0'; | |
| document.getElementById('result').textContent = ''; | |
| document.getElementById('round-result').textContent = ''; | |
| document.getElementById('player-choice').textContent = ''; | |
| document.getElementById('computer-choice').textContent = ''; | |
| document.getElementById('game-history').innerHTML = ''; | |
| // Reset animations | |
| document.getElementById('player-choice').classList.remove('shake', 'fade-in'); | |
| document.getElementById('computer-choice').classList.remove('shake', 'fade-in'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AlkaouDembele/alkaou" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |