Microphone Jump Game

Requesting microphone access...

body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } canvas { border: 1px solid #000; background-color: #eee; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const permissionMessageDisplay = document.getElementById('permission-message'); canvas.width = 500; canvas.height = 300; let audioContext; let analyser; let microphone; let isMicrophoneActive = false; let player = { x: 50, y: canvas.height - 30, width: 20, height: 30, velocityY: 0, isJumping: false, jumpStrength: 0, color: 'blue' }; const gravity = 0.5; const floorY = canvas.height - 30; const jumpThreshold = 25; const jumpMultiplier = 2.5; function setupAudio() { audioContext = new (window.AudioContext || window.webkitAudioContext)(); analyser = audioContext.createAnalyser(); analyser.fftSize = 256; navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { microphone = audioContext.createMediaStreamSource(stream); microphone.connect(analyser); isMicrophoneActive = true; permissionMessageDisplay.style.display = 'none'; // Hide permission message after successful access gameLoop(); }) .catch(err => { console.error("Error accessing microphone: ", err); permissionMessageDisplay.textContent = "Microphone access failed. Please check your microphone and browser permissions."; }); } function getLoudness() { if (!analyser || !isMicrophoneActive) return 0; const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); analyser.getByteFrequencyData(dataArray); let sum = 0; for (let i = 0; i < bufferLength; i++) { sum += dataArray[i]; } return sum / bufferLength; } function updatePlayer() { if (!isMicrophoneActive) return; if (!player.isJumping) { player.jumpStrength = getLoudness(); if (player.jumpStrength > jumpThreshold) { player.velocityY = -player.jumpStrength * jumpMultiplier; player.isJumping = true; } } player.velocityY += gravity; player.y += player.velocityY; if (player.y > floorY) { player.y = floorY; player.velocityY = 0; player.isJumping = false; } } function drawLoudnessBar() { if (!isMicrophoneActive) { ctx.fillStyle = 'rgba(150, 150, 150, 0.5)'; ctx.fillRect(10, canvas.height - 20, canvas.width - 20, 10); return; } const loudness = getLoudness(); ctx.fillStyle = 'rgba(0, 200, 0, 0.5)'; ctx.fillRect(10, canvas.height - 20, canvas.width - 20, 10); ctx.fillStyle = 'rgba(0, 200, 0, 1)'; ctx.fillRect(10, canvas.height - 20, ((canvas.width - 20) * loudness) / 255, 10); } function drawPlayer() { ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawLoudnessBar(); drawPlayer(); } function gameLoop() { updatePlayer(); draw(); requestAnimationFrame(gameLoop); } draw(); // Initial draw setupAudio();