Multiplication Match - Learning Game

✏️ EDIT MODE

Score: 0

Level 1

🎉 Level Complete! 🎉

Fantastic work!

Score: 0

}); } else { loaded++; if (loaded === total) resolve(); } } else { const img = new Image(); img.onload = () => { assetCache[id] = img; loaded++; if (loaded === total) resolve(); }; img.onerror = () => { lib.log('Image load error: ' + id); loaded++; if (loaded === total) resolve(); }; img.src = assetInfo.url; } } else { lib.log('Asset not found: ' + id); loaded++; if (loaded === total) resolve(); } }); }); } // Play sound effect function playSound(soundId, loop = false) { if (!audioBuffers[soundId] || !audioContext) return null; try { // Resume audio context if suspended if (audioContext.state === 'suspended') { audioContext.resume(); } const source = audioContext.createBufferSource(); source.buffer = audioBuffers[soundId]; source.loop = loop; source.connect(audioContext.destination); source.start(0); return source; } catch (e) { lib.log('Error playing sound: ' + e.message); return null; } } // Start background music function startBackgroundMusic() { if (backgroundMusicSource) { try { backgroundMusicSource.stop(); } catch (e) { // Already stopped } } backgroundMusicSource = playSound('background_music', true); } // Stop background music function stopBackgroundMusic() { if (backgroundMusicSource) { try { backgroundMusicSource.stop(); } catch (e) { // Already stopped } backgroundMusicSource = null; } } // Load player progress function loadPlayerProgress() { // Initialize default progress playerProgress = { levelsCompleted: [], levelStars: [0, 0, 0, 0, 0], tutorialShown: false }; } // Save player progress function savePlayerProgress() { // Progress is stored in memory during gameplay // Can be extended with persistence features if needed } // Show level select screen function showLevelSelect() { document.getElementById('level-select-screen').classList.add('active'); document.getElementById('game-screen').classList.remove('active'); const levelGrid = document.getElementById('level-grid'); levelGrid.innerHTML = ''; window.gameConfig.levels.forEach((level, index) => { const card = document.createElement('div'); card.className = 'level-card'; card.setAttribute('tabindex', '0'); card.setAttribute('role', 'button'); card.setAttribute('aria-label', `Level ${index + 1}: ${level.name}`); // Check if level is unlocked const isUnlocked = index === 0 || playerProgress.levelsCompleted.includes(index - 1); if (!isUnlocked) { card.classList.add('locked'); card.setAttribute('aria-disabled', 'true'); } card.innerHTML = `

${index + 1}

${level.name}

`; // Render stars const starsContainer = card.querySelector(`#level-stars-${index}`); const stars = playerProgress.levelStars[index] || 0; for (let i = 0; i < 3; i++) { const starImg = document.createElement('img'); starImg.className = 'star-icon'; if (assetCache['star_full'] && assetCache['star_empty']) { starImg.src = i < stars ? assetCache['star_full'].src : assetCache['star_empty'].src; } else { starImg.textContent = i < stars ? '⭐' : '☆'; } starImg.alt = i < stars ? 'Star earned' : 'Star not earned'; starsContainer.appendChild(starImg); } if (isUnlocked) { card.style.cursor = 'pointer'; card.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); startLevel(index); }); card.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); startLevel(index); } }); } else { card.style.cursor = 'not-allowed'; } levelGrid.appendChild(card); }); // Set background const bgAsset = lib.getAsset('garden_background'); if (bgAsset) { document.getElementById('background').src = bgAsset.url; } } // Start a level function startLevel(levelIndex) { currentLevel = levelIndex; currentProblem = 0; mistakesThisLevel = 0; document.getElementById('level-select-screen').classList.remove('active'); document.getElementById('game-screen').classList.add('active'); // Set background const level = window.gameConfig.levels[levelIndex]; const bgAsset = lib.getAsset(level.background); if (bgAsset) { document.getElementById('background').src = bgAsset.url; } // Set helper character const charAsset = lib.getAsset(level.character); if (charAsset) { document.getElementById('helper-character').src = charAsset.url; } // Show tutorial if first time if (!playerProgress.tutorialShown && currentMode === 'play') { showTutorial(); } else { renderProblem(); } // Update current stars display updateCurrentStars(); // Start background music if (currentMode === 'play') { startBackgroundMusic(); } } // Show tutorial function showTutorial() { document.getElementById('tutorial-overlay').classList.add('active'); document.getElementById('tutorial-button').onclick = () => { document.getElementById('tutorial-overlay').classList.remove('active'); playerProgress.tutorialShown = true; savePlayerProgress(); renderProblem(); }; } // Update current stars display function updateCurrentStars() { const container = document.getElementById('current-stars'); container.innerHTML = ''; const maxStars = 3; const currentStars = calculateStars(mistakesThisLevel); for (let i = 0; i < maxStars; i++) { const starImg = document.createElement('img'); starImg.className = 'star-icon'; starImg.src = i < currentStars ? assetCache['star_full'].src : assetCache['star_empty'].src; starImg.alt = i < currentStars ? 'Star earned' : 'Star not earned'; container.appendChild(starImg); } } // Calculate stars based on mistakes function calculateStars(mistakes) { const thresholds = window.gameConfig.starThresholds; if (mistakes <= thresholds.three) return 3; if (mistakes <= thresholds.two) return 2; return 1; } // Render current problem function renderProblem() { const level = window.gameConfig.levels[currentLevel]; const problem = level.problems[currentProblem]; // Reset state selectedGroups = []; currentTotal = 0; // Update problem display const problemDisplay = document.getElementById('problem-display'); if (currentMode === 'edit') { problemDisplay.innerHTML = ` ${problem.a} × ${problem.b} = ? `; // Add edit handlers problemDisplay.querySelectorAll('.problem-editable').forEach(el => { el.addEventListener('click', (e) => { e.stopPropagation(); const type = el.dataset.type; const currentValue = parseInt(el.textContent); lib.editMenu.open({ name: type === 'a' ? 'First Number' : 'Second Number', params: { 'Value': { key: `gameConfig.levels.${currentLevel}.problems.${currentProblem}.${type}`, type: 'slider', min: 1, max: 10, step: 1, onChange: (value) => { window.gameConfig.levels[currentLevel].problems[currentProblem][type] = value; renderProblem(); } } } }); }); }); } else { problemDisplay.textContent = `${problem.a} × ${problem.b} = ?`; } // Render berry groups const container = document.getElementById('berry-groups'); container.innerHTML = ''; const berryAssetId = window.gameConfig.berryType + '_cluster'; const berryAsset = assetCache[berryAssetId]; for (let i = 0; i < problem.a; i++) { const group = document.createElement('div'); group.className = 'berry-group'; group.dataset.index = i; group.dataset.count = problem.b; group.setAttribute('tabindex', '0'); group.setAttribute('role', 'button'); group.setAttribute('aria-label', `Berry group with ${problem.b} berries`); if (berryAsset) { const img = document.createElement('img'); img.className = 'berry-cluster-img'; img.src = berryAsset.src; img.alt = `Group of ${problem.b} berries`; group.appendChild(img); } else { // Fallback if asset not loaded const fallback = document.createElement('div'); fallback.className = 'berry-cluster-img'; fallback.style.background = '#FF69B4'; fallback.style.borderRadius = '50%'; fallback.style.display = 'flex'; fallback.style.alignItems = 'center'; fallback.style.justifyContent = 'center'; fallback.style.fontSize = '60px'; fallback.textContent = '🍓'; group.appendChild(fallback); } const count = document.createElement('div'); count.className = 'group-count'; count.textContent = problem.b; count.setAttribute('aria-hidden', 'true'); group.appendChild(count); if (currentMode === 'play') { group.addEventListener('click', function() { handleBerryTap(i); }); group.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleBerryTap(i); } }); } container.appendChild(group); } // Reset basket document.getElementById('basket-total').textContent = '0'; // Reset buttons document.getElementById('check-button').disabled = true; document.getElementById('check-button').style.display = 'block'; document.getElementById('next-button').style.display = 'none'; // Hide feedback document.getElementById('feedback-overlay').classList.remove('active'); } // Handle berry group tap function handleBerryTap(groupIndex) { if (selectedGroups.includes(groupIndex)) return; playSound('berry_tap_sound'); const group = document.querySelector(`[data-index="${groupIndex}"]`); const count = parseInt(group.dataset.count); // Mark as selected selectedGroups.push(groupIndex); group.classList.add('selected'); group.setAttribute('aria-pressed', 'true'); // Animate to basket animateBerryToBasket(group, count); // Update total currentTotal += count; animateNumber('basket-total', currentTotal); // Enable check button if all groups selected const level = window.gameConfig.levels[currentLevel]; const problem = level.problems[currentProblem]; if (selectedGroups.length > 0) { document.getElementById('check-button').disabled = false; } } // Animate berry to basket function animateBerryToBasket(groupElement, count) { const rect = groupElement.getBoundingClientRect(); const basket = document.querySelector('.basket'); const basketRect = basket.getBoundingClientRect(); const particle = document.createElement('div'); particle.className = 'particle'; particle.style.position = 'absolute'; particle.style.left = rect.left + rect.width / 2 + 'px'; particle.style.top = rect.top + rect.height / 2 + 'px'; particle.style.width = '60px'; particle.style.height = '60px'; particle.style.transition = 'all 0.6s cubic-bezier(0.0, 0, 0.2, 1)'; particle.style.zIndex = '50'; const img = document.createElement('img'); img.src = groupElement.querySelector('img').src; img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'contain'; particle.appendChild(img); document.body.appendChild(particle); requestAnimationFrame(() => { requestAnimationFrame(() => { particle.style.left = basketRect.left + basketRect.width / 2 - 30 + 'px'; particle.style.top = basketRect.top + basketRect.height / 2 - 30 + 'px'; particle.style.opacity = '0'; particle.style.transform = 'scale(0.5)'; }); }); setTimeout(() => { particle.remove(); }, 700); } // Animate number change with easing function animateNumber(elementId, targetValue) { const element = document.getElementById(elementId); const startValue = parseInt(element.textContent) || 0; const duration = 400; const startTime = performance.now(); function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); } function animate(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const easedProgress = easeOutCubic(progress); const currentValue = Math.round(startValue + (targetValue - startValue) * easedProgress); element.textContent = currentValue; if (progress < 1) { requestAnimationFrame(animate); } } requestAnimationFrame(animate); } // Check answer function checkAnswer() { const level = window.gameConfig.levels[currentLevel]; const problem = level.problems[currentProblem]; const correctAnswer = problem.a * problem.b; const isCorrect = currentTotal === correctAnswer; if (isCorrect) { playSound('correct_sound'); showFeedback(true); // Show confetti createConfetti(); // Show next button after delay setTimeout(() => { document.getElementById('check-button').style.display = 'none'; document.getElementById('next-button').style.display = 'block'; document.getElementById('next-button').focus(); }, 1500); } else { playSound('incorrect_sound'); mistakesThisLevel++; updateCurrentStars(); showFeedback(false, correctAnswer); // Reset for retry setTimeout(() => { document.getElementById('feedback-overlay').classList.remove('active'); renderProblem(); }, 2000); } } // Show feedback function showFeedback(correct, correctAnswer = null) { const overlay = document.getElementById('feedback-overlay'); const icon = document.getElementById('feedback-icon'); const text = document.getElementById('feedback-text'); const subtext = document.getElementById('feedback-subtext'); if (correct) { icon.textContent = '🎉'; text.textContent = 'Correct!'; subtext.textContent = 'Great job counting!'; } else { icon.textContent = '🤔'; text.textContent = 'Not quite!'; subtext.textContent = `The answer is ${correctAnswer}. Try again!`; } overlay.classList.add('active'); } // Create confetti effect function createConfetti() { const colors = ['#FF6B9D', '#FFD700', '#4CAF50', '#2196F3', '#9C27B0']; const container = document.getElementById('game-container'); for (let i = 0; i < 30; i++) { setTimeout(() => { const confetti = document.createElement('div'); confetti.className = 'particle confetti'; confetti.style.left = Math.random() * 100 + '%'; confetti.style.top = '-20px'; confetti.style.background = colors[Math.floor(Math.random() * colors.length)]; confetti.style.animationDelay = Math.random() * 0.5 + 's'; confetti.style.width = (8 + Math.random() * 8) + 'px'; confetti.style.height = (8 + Math.random() * 8) + 'px'; container.appendChild(confetti); setTimeout(() => confetti.remove(), 2500); }, i * 50); } } // Next problem function nextProblem() { const level = window.gameConfig.levels[currentLevel]; currentProblem++; if (currentProblem >= level.problems.length) { completeLevel(); } else { renderProblem(); } } // Complete level function completeLevel() { playSound('level_complete_sound'); const stars = calculateStars(mistakesThisLevel); // Update player progress if (!playerProgress.levelsCompleted.includes(currentLevel)) { playerProgress.levelsCompleted.push(currentLevel); } playerProgress.levelStars[currentLevel] = Math.max( playerProgress.levelStars[currentLevel] || 0, stars ); savePlayerProgress(); // Show level complete overlay const overlay = document.getElementById('level-complete-overlay'); const starsContainer = document.getElementById('complete-stars'); starsContainer.innerHTML = ''; for (let i = 0; i < 3; i++) { const starImg = document.createElement('img'); starImg.className = 'complete-star'; starImg.src = i < stars ? assetCache['star_full'].src : assetCache['star_empty'].src; starImg.alt = i < stars ? 'Star earned' : 'Star not earned'; starImg.style.animationDelay = i * 0.2 + 's'; starsContainer.appendChild(starImg); } overlay.classList.add('active'); // Setup buttons document.getElementById('retry-button').onclick = () => { overlay.classList.remove('active'); startLevel(currentLevel); }; document.getElementById('continue-button').onclick = () => { overlay.classList.remove('active'); stopBackgroundMusic(); showLevelSelect(); }; // Focus continue button setTimeout(() => { document.getElementById('continue-button').focus(); }, 100); } // Hint button function showHint() { playSound('berry_tap_sound'); // Highlight first unselected group const groups = document.querySelectorAll('.berry-group'); for (let group of groups) { const index = parseInt(group.dataset.index); if (!selectedGroups.includes(index)) { group.classList.add('hint-highlight'); setTimeout(() => { group.classList.remove('hint-highlight'); }, 2000); break; } } } // Setup event listeners function setupEventListeners() { document.getElementById('check-button').addEventListener('click', checkAnswer); document.getElementById('next-button').addEventListener('click', nextProblem); document.getElementById('hint-button').addEventListener('click', showHint); // Resume audio context on first user interaction const resumeAudio = () => { if (audioContext && audioContext.state === 'suspended') { audioContext.resume(); } document.removeEventListener('click', resumeAudio); document.removeEventListener('keydown', resumeAudio); }; document.addEventListener('click', resumeAudio); document.addEventListener('keydown', resumeAudio); // Keyboard controls document.addEventListener('keydown', (e) => { if (currentMode !== 'play') return; if (e.key === ' ' || e.key === 'Spacebar') { e.preventDefault(); const checkBtn = document.getElementById('check-button'); if (!checkBtn.disabled && checkBtn.style.display !== 'none') { checkAnswer(); } } else if (e.key === 'Enter') { const nextBtn = document.getElementById('next-button'); if (nextBtn.style.display !== 'none') { nextProblem(); } } else if (e.key === 'h' || e.key === 'H') { showHint(); } }); } // Run function - entry point function run(mode) { lib.log('run() called. Mode: ' + mode); currentMode = mode; // Show edit indicator const editIndicator = document.getElementById('edit-indicator'); if (mode === 'edit') { editIndicator.classList.add('active'); } else { editIndicator.classList.remove('active'); } // Initialize game try { preloadAssets().then(() => { try { loadPlayerProgress(); setupEventListeners(); showLevelSelect(); lib.log('Game initialized successfully'); } catch (e) { lib.log('Error during game setup: ' + e.message); } }).catch((e) => { lib.log('Error during asset preload: ' + e.message); // Still try to show level select even if assets fail loadPlayerProgress(); setupEventListeners(); showLevelSelect(); }); } catch (e) { lib.log('Error in run(): ' + e.message); } }

Berry Bash - Free Online Game on Astrocade