Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <title>Fruit Rhythm Tap! 🎶</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); | |
| color: #5D4037; | |
| text-align: center; | |
| overflow-x: hidden; | |
| touch-action: manipulation; | |
| padding: 10px 0; | |
| } | |
| #game-wrapper { | |
| background-color: rgba(255, 255, 255, 0.8); /* Slightly more opaque */ | |
| padding: 20px 25px; /* Adjusted padding */ | |
| border-radius: 20px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Softer shadow */ | |
| width: 90%; | |
| max-width: 420px; /* Slightly wider for emojis */ | |
| } | |
| #current-fruit-name { | |
| font-size: 2.5em; /* Adjusted for emojis */ | |
| font-weight: bold; | |
| color: #E64A19; | |
| margin-bottom: 8px; | |
| height: 55px; /* Increased height for emojis */ | |
| line-height: 55px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| #current-fruit-taps { | |
| font-size: 1.1em; /* Adjusted */ | |
| color: #795548; | |
| margin-bottom: 20px; | |
| height: 20px; | |
| } | |
| #tap-indicators { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| min-height: 30px; | |
| } | |
| .indicator-dot { | |
| width: 18px; /* Slightly smaller */ | |
| height: 18px; | |
| background-color: #FFCC80; | |
| border: 2px solid #FFA726; | |
| border-radius: 50%; | |
| margin: 0 5px; /* Adjusted margin */ | |
| transition: all 0.2s ease; | |
| } | |
| .indicator-dot.tapped { | |
| background-color: #FFA726; | |
| transform: scale(1.25); /* Slightly more pop */ | |
| } | |
| .indicator-dot.correct { | |
| background-color: #81C784; | |
| border-color: #4CAF50; | |
| } | |
| .indicator-dot.incorrect { | |
| background-color: #E57373; | |
| border-color: #F44336; | |
| } | |
| #action-button { | |
| padding: 15px 35px; /* Adjusted padding */ | |
| font-size: 1.5em; /* Adjusted for emojis */ | |
| background-color: #FF7043; | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| box-shadow: 0 5px 12px rgba(0,0,0,0.1); | |
| transition: background-color 0.2s, transform 0.1s; | |
| user-select: none; | |
| -webkit-tap-highlight-color: transparent; | |
| width: 85%; /* Adjusted width */ | |
| max-width: 280px; /* Adjusted max-width */ | |
| } | |
| #action-button:active { | |
| background-color: #F4511E; | |
| transform: scale(0.96); | |
| } | |
| #action-button:disabled { | |
| background-color: #BDBDBD; | |
| cursor: not-allowed; | |
| } | |
| #feedback-message { | |
| font-size: 1.25em; /* Adjusted */ | |
| margin-top: 20px; | |
| height: 30px; | |
| font-weight: bold; | |
| color: #D32F2F; | |
| } | |
| #feedback-message.correct { | |
| color: #388E3C; | |
| } | |
| #score-area { | |
| margin-top: 18px; /* Adjusted */ | |
| font-size: 1.25em; /* Adjusted */ | |
| color: #4E342E; | |
| } | |
| #waveform-canvas { | |
| width: 100%; | |
| height: 70px; /* Adjusted height */ | |
| background-color: rgba(255, 255, 255, 0.2); /* More transparent */ | |
| border-radius: 10px; | |
| margin-top: 20px; | |
| border: 1px solid #FFCC80; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-wrapper"> | |
| <div id="current-fruit-name">Fruit Rhythm! 🎶</div> | |
| <div id="current-fruit-taps">Tap to Start!</div> | |
| <div id="tap-indicators"></div> | |
| <button id="action-button">▶️ Start Game</button> | |
| <div id="feedback-message"></div> | |
| <div id="score-area">Score: <span id="score">0</span></div> | |
| <canvas id="waveform-canvas"></canvas> | |
| </div> | |
| <script> | |
| const fruitNameDisplay = document.getElementById('current-fruit-name'); | |
| const fruitTapsDisplay = document.getElementById('current-fruit-taps'); | |
| const tapIndicatorsContainer = document.getElementById('tap-indicators'); | |
| const actionButton = document.getElementById('action-button'); | |
| const feedbackMessageDisplay = document.getElementById('feedback-message'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const waveformCanvas = document.getElementById('waveform-canvas'); | |
| const canvasCtx = waveformCanvas.getContext('2d'); | |
| const FRUITS_RHYTHMS = [ | |
| { name: 'PEAR', emoji: '🍐', beats: 1 }, | |
| { name: 'PLUM', emoji: '🍑', beats: 1 }, // Using peach as plum often doesn't have its own | |
| { name: 'APPLE', emoji: '🍎', beats: 2 }, | |
| { name: 'MANGO', emoji: '🥭', beats: 2 }, | |
| { name: 'GRAPES', emoji: '🍇', beats: 2 }, | |
| { name: 'ORANGE', emoji: '🍊', beats: 2 }, | |
| { name: 'BANANA', emoji: '🍌', beats: 3 }, | |
| { name: 'COCONUT', emoji: '🥥', beats: 3 }, | |
| { name: 'BLUEBERRY', emoji: '🫐', beats: 3 }, // May need good font/OS support | |
| { name: 'PINEAPPLE', emoji: '🍍', beats: 4 }, | |
| { name: 'WATERMELON', emoji: '🍉', beats: 4 } | |
| ]; | |
| let currentFruitChallenge = null; | |
| let userTapCount = 0; | |
| let currentScore = 0; | |
| let gameInProgress = false; | |
| let tapTimeoutId = null; | |
| const TAP_SEQUENCE_TIMEOUT = 1100; // ms | |
| const CORRECT_FEEDBACK_DURATION = 1000; // ms | |
| const INCORRECT_FEEDBACK_DURATION = 1500; // ms | |
| // --- Web Audio API Setup --- | |
| let audioCtx; | |
| let analyserNode; | |
| let waveformDataArray; | |
| let waveformBufferLength; | |
| function initAudio() { | |
| if (!audioCtx) { | |
| audioCtx = new (window.AudioContext || window.webkitAudioContext)(); | |
| analyserNode = audioCtx.createAnalyser(); | |
| analyserNode.fftSize = 2048; | |
| waveformBufferLength = analyserNode.frequencyBinCount; | |
| waveformDataArray = new Uint8Array(waveformBufferLength); | |
| analyserNode.connect(audioCtx.destination); | |
| } | |
| if (audioCtx.state === 'suspended') { | |
| audioCtx.resume(); | |
| } | |
| } | |
| function playSound(type, tapIndex = 0, totalTapsInSequence = 1) { | |
| if (!audioCtx) initAudio(); // Ensure audio is initialized | |
| if (audioCtx.state === 'suspended') audioCtx.resume(); // Try to resume if suspended | |
| const now = audioCtx.currentTime; | |
| if (type === 'tap') { | |
| const osc = audioCtx.createOscillator(); | |
| const gainNode = audioCtx.createGain(); | |
| osc.connect(gainNode); | |
| gainNode.connect(analyserNode); | |
| let baseFreq = 220; // A3 | |
| // Make taps ascend in pitch for multi-tap fruits | |
| if (totalTapsInSequence > 1) { | |
| baseFreq += (tapIndex * 40); // Each tap in sequence is ~a third higher | |
| } | |
| osc.frequency.setValueAtTime(baseFreq + Math.random() * 20, now); | |
| osc.type = 'square'; // More percussive | |
| gainNode.gain.setValueAtTime(0.25, now); | |
| gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.15); | |
| osc.start(now); | |
| osc.stop(now + 0.15); | |
| } else if (type === 'correct') { | |
| // Play a C-major arpeggio (C4-E4-G4) | |
| const baseCorrectFreq = 261.63; // C4 | |
| const frequencies = [baseCorrectFreq, baseCorrectFreq * Math.pow(2, 4/12), baseCorrectFreq * Math.pow(2, 7/12)]; | |
| const noteDuration = 0.1; | |
| const gap = 0.03; | |
| let time = now; | |
| frequencies.forEach((freq, index) => { | |
| const osc = audioCtx.createOscillator(); | |
| const g = audioCtx.createGain(); | |
| osc.connect(g); | |
| g.connect(analyserNode); | |
| osc.frequency.setValueAtTime(freq, time); | |
| osc.type = 'triangle'; // Softer, pleasant tone | |
| g.gain.setValueAtTime(0.3, time); | |
| g.gain.setValueAtTime(0.3, time + noteDuration * 0.8); // Sustain briefly | |
| g.gain.exponentialRampToValueAtTime(0.01, time + noteDuration); | |
| osc.start(time); | |
| osc.stop(time + noteDuration + 0.05); | |
| time += noteDuration + gap; | |
| }); | |
| } else if (type === 'incorrect') { | |
| // Play two dissonant notes | |
| const freqs = [164.81, 155.56]; // E3, D#3 | |
| const noteDur = 0.12; | |
| let t = now; | |
| freqs.forEach((f, i) => { | |
| const osc = audioCtx.createOscillator(); | |
| const g = audioCtx.createGain(); | |
| osc.connect(g); | |
| g.connect(analyserNode); | |
| osc.type = 'sawtooth'; | |
| osc.frequency.setValueAtTime(f, t); | |
| g.gain.setValueAtTime(0.25, t); | |
| g.gain.exponentialRampToValueAtTime(0.01, t + noteDur); | |
| osc.start(t); | |
| osc.stop(t + noteDur + 0.02); | |
| t += noteDur * 0.7; // Slight overlap | |
| }); | |
| } | |
| } | |
| // --- Waveform Drawing --- | |
| let animationFrameId_waveform; | |
| function drawWaveform() { | |
| animationFrameId_waveform = requestAnimationFrame(drawWaveform); | |
| if (!analyserNode || !gameInProgress) { | |
| // canvasCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height); // Handled by DPR scaling now | |
| return; | |
| } | |
| analyserNode.getByteTimeDomainData(waveformDataArray); | |
| // Use canvas.width/height which are scaled by DPR | |
| canvasCtx.fillStyle = 'rgba(255, 255, 255, 0.2)'; | |
| canvasCtx.fillRect(0, 0, waveformCanvas.width, waveformCanvas.height); | |
| canvasCtx.lineWidth = 2.5; // Slightly thicker line | |
| canvasCtx.strokeStyle = '#FF7043'; | |
| canvasCtx.beginPath(); | |
| // Calculations should use the CSS dimensions (clientWidth) for sliceWidth, | |
| // but drawing happens on the scaled canvas. | |
| const cssWidth = waveformCanvas.clientWidth; | |
| const cssHeight = waveformCanvas.clientHeight; | |
| const sliceWidth = cssWidth * 1.0 / waveformBufferLength; | |
| let x = 0; | |
| for (let i = 0; i < waveformBufferLength; i++) { | |
| const v = waveformDataArray[i] / 128.0; // Normalize (0-255 -> 0-2) | |
| const y = v * cssHeight / 2; // Scale to CSS height | |
| if (i === 0) { | |
| canvasCtx.moveTo(x, y); | |
| } else { | |
| canvasCtx.lineTo(x, y); | |
| } | |
| x += sliceWidth; | |
| } | |
| canvasCtx.lineTo(cssWidth, cssHeight / 2); | |
| canvasCtx.stroke(); | |
| } | |
| function setupCanvas() { | |
| const dpr = window.devicePixelRatio || 1; | |
| waveformCanvas.width = waveformCanvas.clientWidth * dpr; | |
| waveformCanvas.height = waveformCanvas.clientHeight * dpr; | |
| canvasCtx.scale(dpr, dpr); // Scale context for sharper drawing | |
| // Initial clear | |
| canvasCtx.fillStyle = 'rgba(255, 255, 255, 0.2)'; | |
| canvasCtx.fillRect(0, 0, waveformCanvas.width, waveformCanvas.height); | |
| } | |
| // --- Game Logic Functions --- | |
| function startGame() { | |
| setupCanvas(); // Setup canvas dimensions and scaling | |
| initAudio(); | |
| gameInProgress = true; | |
| currentScore = 0; | |
| scoreDisplay.textContent = currentScore; | |
| actionButton.innerHTML = '👆 Tap!'; // Using innerHTML for emoji | |
| actionButton.removeEventListener('click', startGame); | |
| actionButton.addEventListener('click', handleUserTap); | |
| feedbackMessageDisplay.textContent = ''; | |
| nextFruit(); | |
| if (animationFrameId_waveform) cancelAnimationFrame(animationFrameId_waveform); // Clear previous if any | |
| drawWaveform(); | |
| } | |
| function nextFruit() { | |
| userTapCount = 0; | |
| clearTimeout(tapTimeoutId); | |
| currentFruitChallenge = FRUITS_RHYTHMS[Math.floor(Math.random() * FRUITS_RHYTHMS.length)]; | |
| fruitNameDisplay.textContent = `${currentFruitChallenge.emoji} ${currentFruitChallenge.name}`; | |
| fruitTapsDisplay.textContent = `${currentFruitChallenge.beats} tap${currentFruitChallenge.beats > 1 ? 's' : ''}!`; | |
| actionButton.disabled = false; | |
| feedbackMessageDisplay.textContent = ''; | |
| feedbackMessageDisplay.className = ''; | |
| renderTapIndicators(); | |
| } | |
| function renderTapIndicators(resultState = null) { | |
| tapIndicatorsContainer.innerHTML = ''; | |
| for (let i = 0; i < currentFruitChallenge.beats; i++) { | |
| const dot = document.createElement('div'); | |
| dot.classList.add('indicator-dot'); | |
| if (i < userTapCount) { | |
| dot.classList.add('tapped'); | |
| } | |
| if (resultState) { | |
| dot.classList.add(resultState); | |
| } | |
| tapIndicatorsContainer.appendChild(dot); | |
| } | |
| } | |
| function handleUserTap() { | |
| if (!gameInProgress || !currentFruitChallenge) return; | |
| initAudio(); // Ensure audio context is active | |
| // Pass current tap number (1-indexed for sound logic) and total beats | |
| playSound('tap', userTapCount, currentFruitChallenge.beats); | |
| userTapCount++; | |
| renderTapIndicators(); | |
| clearTimeout(tapTimeoutId); | |
| if (userTapCount === currentFruitChallenge.beats) { | |
| checkRhythm(); | |
| } else if (userTapCount < currentFruitChallenge.beats) { | |
| tapTimeoutId = setTimeout(() => { | |
| if(gameInProgress) { | |
| feedbackMessageDisplay.textContent = '⏳ Timeout! Too slow.'; | |
| feedbackMessageDisplay.className = ''; | |
| playSound('incorrect'); | |
| renderTapIndicators('incorrect'); | |
| actionButton.disabled = true; | |
| setTimeout(nextFruit, INCORRECT_FEEDBACK_DURATION); | |
| } | |
| }, TAP_SEQUENCE_TIMEOUT); | |
| } else { | |
| // This case should ideally not be reached if button is disabled correctly, | |
| // but as a fallback: | |
| checkRhythm(); | |
| } | |
| } | |
| function checkRhythm() { | |
| clearTimeout(tapTimeoutId); | |
| actionButton.disabled = true; | |
| if (userTapCount === currentFruitChallenge.beats) { | |
| currentScore += 10 * currentFruitChallenge.beats; | |
| scoreDisplay.textContent = currentScore; | |
| feedbackMessageDisplay.textContent = '✅ Correct! Great job!'; | |
| feedbackMessageDisplay.className = 'correct'; | |
| playSound('correct'); | |
| renderTapIndicators('correct'); | |
| setTimeout(nextFruit, CORRECT_FEEDBACK_DURATION); | |
| } else { | |
| feedbackMessageDisplay.textContent = '❌ Oops! Try again.'; | |
| feedbackMessageDisplay.className = ''; | |
| playSound('incorrect'); | |
| renderTapIndicators('incorrect'); | |
| setTimeout(nextFruit, INCORRECT_FEEDBACK_DURATION); | |
| } | |
| } | |
| // Initial setup | |
| actionButton.addEventListener('click', startGame); | |
| document.addEventListener('keydown', (event) => { | |
| if (event.code === 'Space' || event.key === 'Enter') { // Added Enter key | |
| event.preventDefault(); | |
| if (actionButton.disabled === false) { | |
| actionButton.click(); | |
| } | |
| } | |
| }); | |
| // Call setupCanvas once on load to prepare it. | |
| // It will be called again in startGame for dynamic resizing if needed. | |
| window.addEventListener('load', setupCanvas); | |
| window.addEventListener('resize', setupCanvas); // Re-setup canvas on resize | |
| </script> | |
| </body> | |
| </html> |