Rock Paper Scissors

Rock Paper Scissors

Wins: 0

Losses: 0

Winning Streak: 0

⚔️

body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); text-align: center; position: relative; /* For canvas positioning */ } h1 { color: #333; margin-bottom: 10px; } .counters { display: flex; justify-content: space-around; margin-bottom: 20px; } .counters p { margin: 0 10px; font-size: 16px; color: #555; } .buttons button { background-color: #007bff; color: white; border: none; padding: 15px 30px; margin: 10px; font-size: 24px; /* Increased button font size for emojis */ border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .buttons button:hover { background-color: #0056b3; } #result { margin-top: 20px; font-size: 24px; font-weight: bold; color: #555; display: flex; align-items: center; justify-content: center; } #player-choice-emoji, #computer-choice-emoji { margin: 0 15px; font-size: 2em; } #vs-emoji { font-size: 2em; margin: 0 5px; } #result-text { margin-top: 10px; text-align: center; /* Center the result text */ width: 100%; /* Ensure text takes full width to be centered */ } .win-effect { color: green; animation: winAnimation 1s ease-in-out; } .lose-effect { color: red; animation: loseAnimation 1s ease-in-out; } .draw-effect { color: orange; animation: drawAnimation 1s ease-in-out; } @keyframes winAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes loseAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes drawAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } #particles-canvas { position: absolute; top: 0; left: 0; pointer-events: none; /* Make canvas not interfere with clicks */ border-radius: 10px; /* Match container border-radius */ } const buttons = document.querySelectorAll('.buttons button'); const resultDiv = document.getElementById('result'); const playerChoiceEmoji = document.getElementById('player-choice-emoji'); const computerChoiceEmoji = document.getElementById('computer-choice-emoji'); const vsEmoji = document.getElementById('vs-emoji'); const resultText = document.getElementById('result-text'); const canvas = document.getElementById('particles-canvas'); const ctx = canvas.getContext('2d'); const winsCountSpan = document.getElementById('wins-count'); const lossesCountSpan = document.getElementById('losses-count'); const streakCountSpan = document.getElementById('streak-count'); canvas.width = 600; canvas.height = 400; const choices = ['rock', 'paper', 'scissors']; const emojiMap = { rock: '✊', paper: '✋', scissors: '✌️' }; let particles = []; let winsCount = 0; let lossesCount = 0; let streakCount = 0; class Particle { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.size = Math.random() * 5 + 2; this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; this.alpha = 1; } update() { this.x += this.speedX; this.y += this.speedY; this.alpha -= 0.01; if (this.alpha < 0) this.alpha = 0; } draw() { ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.globalAlpha = 1; } } function createParticles(winner) { let particleCount = 50; let colors = { player: 'green', computer: 'red', draw: 'orange' }; let color = colors[winner] || 'white'; for (let i = 0; i < particleCount; i++) { particles.push(new Particle(canvas.width / 2, canvas.height / 2, color)); } } function animateParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((particle, index) => { particle.update(); particle.draw(); if (particle.alpha <= 0) { particles.splice(index, 1); } }); if (particles.length > 0) { requestAnimationFrame(animateParticles); } } buttons.forEach(button => { button.addEventListener('click', () => { const playerChoice = button.id; const computerChoice = getComputerChoice(); const winner = determineWinner(playerChoice, computerChoice); displayResult(playerChoice, computerChoice, winner); createParticles(winner); animateParticles(); updateCounters(winner); }); }); function getComputerChoice() { const randomIndex = Math.floor(Math.random() * choices.length); return choices[randomIndex]; } function determineWinner(playerChoice, computerChoice) { if (playerChoice === computerChoice) { return 'draw'; } else if ( (playerChoice === 'rock' && computerChoice === 'scissors') || (playerChoice === 'paper' && computerChoice === 'rock') || (playerChoice === 'scissors' && computerChoice === 'paper') ) { return 'player'; } else { return 'computer'; } } function displayResult(playerChoice, computerChoice, winner) { playerChoiceEmoji.textContent = emojiMap[playerChoice]; computerChoiceEmoji.textContent = emojiMap[computerChoice]; vsEmoji.textContent = '⚔️'; let resultMessage = `You chose ${playerChoice} vs Computer chose ${computerChoice}. `; if (winner === 'player') { resultMessage += 'You win!'; resultText.className = 'win-effect'; } else if (winner === 'computer') { resultMessage += 'Computer wins!'; resultText.className = 'lose-effect'; } else { resultMessage += 'It\'s a draw!'; resultText.className = 'draw-effect'; } resultText.textContent = resultMessage; } function updateCounters(winner) { if (winner === 'player') { winsCount++; streakCount++; } else if (winner === 'computer') { lossesCount++; streakCount = 0; } else { streakCount = 0; } winsCountSpan.textContent = winsCount; lossesCountSpan.textContent = lossesCount; streakCountSpan.textContent = streakCount; }