Void Muncher

'clover': '#32CD32', 'watering_can': '#FF4500', 'garden_gnome': '#FF6347', 'tomato': '#FF4500', 'carrot': '#FF8C00' }; const color = colors[obj.type] || '#CCCCCC'; const size = 80 * (obj.scale || 1); // Draw shadow ctx.save(); ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; ctx.beginPath(); ctx.ellipse(obj.x, obj.y + size / 2 + 5, size / 2, size / 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Draw fallback circle ctx.save(); ctx.fillStyle = color; ctx.beginPath(); ctx.arc(obj.x, obj.y, size / 2, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; ctx.lineWidth = 2; ctx.stroke(); ctx.restore(); return; } const img = asset.img; const aspectRatio = asset.info.aspect_ratio || [1, 1]; // Base size for objects let baseWidth = 80; let baseHeight = baseWidth * (aspectRatio[1] / aspectRatio[0]); // Apply scale if object has it if (obj.scale) { baseWidth *= obj.scale; baseHeight *= obj.scale; } // Apply consume animation scale if (obj.consumeScale !== undefined) { baseWidth *= obj.consumeScale; baseHeight *= obj.consumeScale; } // Draw shadow (fade out during consumption) const shadowAlpha = obj.consumeScale !== undefined ? obj.consumeScale * 0.3 : 0.3; ctx.save(); ctx.fillStyle = `rgba(0, 0, 0, ${shadowAlpha})`; ctx.beginPath(); ctx.ellipse(obj.x, obj.y + baseHeight / 2 + 5, baseWidth / 2, baseHeight / 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Draw object ctx.save(); const rotation = obj.consumeRotation !== undefined ? obj.consumeRotation : (obj.rotation || 0); ctx.translate(obj.x, obj.y); ctx.rotate(rotation); ctx.drawImage(img, -baseWidth / 2, -baseHeight / 2, baseWidth, baseHeight); ctx.restore(); // Draw selection highlight in edit mode if (currentMode === 'edit' && editState.selectedObject === obj) { ctx.strokeStyle = '#2196F3'; ctx.lineWidth = 4; ctx.strokeRect(obj.x - baseWidth / 2 - 5, obj.y - baseHeight / 2 - 5, baseWidth + 10, baseHeight + 10); } } function drawHole() { const holeRadius = HOLE_SIZES[window.gameConfig.currentLevelConfig.holeSize] || 70; // Draw outer glow/shadow ctx.save(); ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'; ctx.beginPath(); ctx.arc(gameState.holeX, gameState.holeY, holeRadius + 20, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Draw outer rim (white border) ctx.save(); ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(gameState.holeX, gameState.holeY, holeRadius, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // Draw main hole with gradient for depth ctx.save(); const gradient = ctx.createRadialGradient( gameState.holeX, gameState.holeY - holeRadius * 0.3, holeRadius * 0.3, gameState.holeX, gameState.holeY, holeRadius ); gradient.addColorStop(0, '#1a1a1a'); gradient.addColorStop(0.7, '#000000'); gradient.addColorStop(1, '#0a0a0a'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(gameState.holeX, gameState.holeY, holeRadius, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Draw inner throat/depth layer ctx.save(); ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'; ctx.beginPath(); ctx.arc(gameState.holeX, gameState.holeY + 8, holeRadius * 0.7, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Draw highlight on rim to show it's 3D ctx.save(); ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(gameState.holeX, gameState.holeY - 2, holeRadius - 2, 0, Math.PI); ctx.stroke(); ctx.restore(); } function render() { // Clear canvas ctx.fillStyle = window.gameConfig.currentLevelConfig.backgroundColor; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Draw objects gameState.objects.forEach(obj => { if (!obj.consumed) { drawObject(obj); } }); // Draw hole (with depth layers) drawHole(); // Draw consuming objects on top (they're being pulled in) gameState.consumingObjects.forEach(obj => { drawObject(obj); }); // Draw grid in edit mode if (currentMode === 'edit') { ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; ctx.lineWidth = 1; for (let x = 0; x < CANVAS_WIDTH; x += GRID_SIZE) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, CANVAS_HEIGHT); ctx.stroke(); } for (let y = 0; y < CANVAS_HEIGHT; y += GRID_SIZE) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(CANVAS_WIDTH, y); ctx.stroke(); } } } // Game loop function updateGame(deltaTime) { if (!gameState.playing) return; // Limit delta time to prevent large jumps deltaTime = Math.min(deltaTime, 0.11); // Update timer gameState.timeRemaining -= deltaTime; if (gameState.timeRemaining <= 0) { gameState.timeRemaining = 0; gameOver(); return; } // Move hole to follow touch position with smooth interpolation const moveSpeed = 800; // pixels per second const dx = inputState.touchX - gameState.holeX; const dy = inputState.touchY - gameState.holeY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance > 1) { const moveDistance = Math.min(moveSpeed * deltaTime, distance); gameState.holeX += (dx / distance) * moveDistance; gameState.holeY += (dy / distance) * moveDistance; } const holeRadius = HOLE_SIZES[window.gameConfig.currentLevelConfig.holeSize] || 70; // Check collisions with hole gameState.objects.forEach(obj => { if (obj.consumed || obj.consuming) return; const dx = obj.x - gameState.holeX; const dy = obj.y - gameState.holeY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < holeRadius + 40) { obj.consuming = true; obj.consumeStartTime = Date.now(); obj.consumeDuration = 0.4; // 400ms to fully consume obj.originalX = obj.x; obj.originalY = obj.y; gameState.consumingObjects.push(obj); playSound('consume_sound', 0.5); } }); // Check win condition const allConsumed = gameState.objects.every(obj => obj.consumed); if (allConsumed && gameState.objects.length > 0) { levelComplete(); } // Update UI updatePlayUI(); } function updatePlayUI() { document.getElementById('timer').textContent = Math.ceil(gameState.timeRemaining); document.getElementById('score').textContent = gameState.consumedCount; updateTimerWarning(); const total = gameState.objects.length; const progress = (gameState.consumedCount / total) * 100; document.getElementById('progressBar').style.width = progress + '%'; document.getElementById('progressBar').textContent = gameState.consumedCount + '/' + total; } function levelComplete() { gameState.playing = false; stopBackgroundMusic(); playSound('level_complete_sound'); // Calculate bonus for time remaining const timeBonus = Math.floor(gameState.timeRemaining * 10); const finalScore = gameState.consumedCount * 10 + timeBonus; // Update high score if (finalScore > window.gameConfig.highScore) { window.gameConfig.highScore = finalScore; } // Show modal document.getElementById('levelCompleteScore').textContent = 'Items Consumed: ' + gameState.consumedCount + ' | Score: ' + finalScore; document.getElementById('levelCompleteTime').textContent = 'Time Bonus: +' + timeBonus; showModal('levelCompleteBackdrop'); } function gameOver() { gameState.playing = false; stopBackgroundMusic(); playSound('game_over_sound'); const finalScore = gameState.consumedCount * 10; document.getElementById('gameOverScore').textContent = 'Items Consumed: ' + gameState.consumedCount + ' | Score: ' + finalScore; showModal('gameOverBackdrop'); } function startLevel() { // Initialize objects from config gameState.objects = window.gameConfig.currentLevelConfig.objects.map(obj => ({ ...obj, consumed: false, scale: 1, rotation: 0 })); gameState.score = window.gameConfig.level > 1 ? gameState.score : 0; gameState.timeRemaining = window.gameConfig.currentLevelConfig.timerDuration; gameState.consumedCount = 0; gameState.holeX = CANVAS_WIDTH / 2; gameState.holeY = CANVAS_HEIGHT / 2; gameState.playing = true; playBackgroundMusic(); } function nextLevel() { window.gameConfig.level++; window.gameConfig.currentLevelConfig = generateLevel(window.gameConfig.level); hideModal('levelCompleteBackdrop'); startLevel(); } function restartGame() { window.gameConfig.level = 1; window.gameConfig.currentLevelConfig = generateLevel(1); hideModal('gameOverBackdrop'); startLevel(); } // Edit mode functions function updateEditUI() { const itemCount = window.gameConfig.currentLevelConfig.objects.length; document.getElementById('itemCount').textContent = itemCount; // Enable/disable delete button document.getElementById('deleteBtn').disabled = !editState.selectedObject; } function getCanvasCoordinates(clientX, clientY) { const rect = canvas.getBoundingClientRect(); const scaleX = CANVAS_WIDTH / rect.width; const scaleY = CANVAS_HEIGHT / rect.height; return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY }; } function findObjectAt(x, y) { for (let i = gameState.objects.length - 1; i >= 0; i--) { const obj = gameState.objects[i]; const size = 80; if (x >= obj.x - size / 2 && x <= obj.x + size / 2 && y >= obj.y - size / 2 && y <= obj.y + size / 2) { return obj; } } return null; } function snapToGrid(value) { return Math.round(value / GRID_SIZE) * GRID_SIZE; } function openObjectPicker() { const picker = document.getElementById('objectPicker'); picker.innerHTML = ''; Object.entries(OBJECT_THEMES).forEach(([themeName, objectTypes]) => { objectTypes.forEach(type => { const option = document.createElement('div'); option.className = 'object-option'; if (assetCache[type]) { const img = document.createElement('img'); img.src = assetCache[type].img.src; option.appendChild(img); } const label = document.createElement('div'); label.className = 'object-option-label'; label.textContent = type.replace(/_/g, ' '); option.appendChild(label); option.onclick = () => { addObject(type); hideModal('objectPickerBackdrop'); playSound('ui_tap_sound'); }; picker.appendChild(option); }); }); showModal('objectPickerBackdrop'); } function addObject(type) { if (window.gameConfig.currentLevelConfig.objects.length >= MAX_ITEMS) { alert('Maximum items reached!'); return; } const newObj = { type: type, x: CANVAS_WIDTH / 2, y: CANVAS_HEIGHT / 2, id: 'obj_' + Date.now() }; window.gameConfig.currentLevelConfig.objects.push(newObj); gameState.objects.push({ ...newObj, consumed: false, scale: 1, rotation: 0 }); updateEditUI(); } function deleteSelectedObject() { if (!editState.selectedObject) return; const index = gameState.objects.indexOf(editState.selectedObject); if (index > -1) { gameState.objects.splice(index, 1); window.gameConfig.currentLevelConfig.objects.splice(index, 1); } editState.selectedObject = null; updateEditUI(); playSound('ui_tap_sound'); } function generatePatternInEdit(patternType) { const currentTheme = THEME_NAMES[0]; // Default to first theme const objectTypes = OBJECT_THEMES[currentTheme]; const count = 50; const objects = generatePattern(patternType, objectTypes, count); window.gameConfig.currentLevelConfig.objects = objects; gameState.objects = objects.map(obj => ({ ...obj, consumed: false, scale: 1, rotation: 0 })); updateEditUI(); hideModal('patternBackdrop'); playSound('ui_tap_sound'); } function clearAllObjects() { // Simple confirmation without using confirm() const shouldClear = window.confirm ? window.confirm('Clear all objects?') : true; if (shouldClear) { window.gameConfig.currentLevelConfig.objects = []; gameState.objects = []; editState.selectedObject = null; updateEditUI(); playSound('ui_tap_sound'); } } // Input handling function handlePointerDown(e) { e.preventDefault(); const touch = e.touches ? e.touches[0] : e; const coords = getCanvasCoordinates(touch.clientX, touch.clientY); inputState.touchX = coords.x; inputState.touchY = coords.y; if (currentMode === 'play') { // In play mode, just track touch position for bike rotation } else if (currentMode === 'edit') { const obj = findObjectAt(coords.x, coords.y); if (obj) { editState.selectedObject = obj; editState.dragOffset = { x: coords.x - obj.x, y: coords.y - obj.y }; // Open edit menu lib.editMenu.open({ name: obj.type.replace(/_/g, ' '), params: { 'X Position': { key: 'currentLevelConfig.objects.' + gameState.objects.indexOf(obj) + '.x', type: 'number', onChange: (value) => { obj.x = value; const configIndex = window.gameConfig.currentLevelConfig.objects.findIndex(o => o.id === obj.id); if (configIndex > -1) { window.gameConfig.currentLevelConfig.objects[configIndex].x = value; } } }, 'Y Position': { key: 'currentLevelConfig.objects.' + gameState.objects.indexOf(obj) + '.y', type: 'number', onChange: (value) => { obj.y = value; const configIndex = window.gameConfig.currentLevelConfig.objects.findIndex(o => o.id === obj.id); if (configIndex > -1) { window.gameConfig.currentLevelConfig.objects[configIndex].y = value; } } } }, onCopy: () => { const newObj = { ...obj, x: obj.x + 50, y: obj.y + 50, id: 'obj_' + Date.now() }; window.gameConfig.currentLevelConfig.objects.push(newObj); gameState.objects.push({ ...newObj, consumed: false, consuming: false, scale: 1, rotation: 0 }); updateEditUI(); }, onDelete: () => { deleteSelectedObject(); lib.editMenu.close(); } }); } else { editState.selectedObject = null; lib.editMenu.close(); } updateEditUI(); } } function handlePointerMove(e) { e.preventDefault(); const touch = e.touches ? e.touches[0] : e; const coords = getCanvasCoordinates(touch.clientX, touch.clientY); inputState.touchX = coords.x; inputState.touchY = coords.y; if (currentMode === 'edit' && editState.selectedObject) { editState.selectedObject.x = snapToGrid(coords.x - editState.dragOffset.x); editState.selectedObject.y = snapToGrid(coords.y - editState.dragOffset.y); // Update config const configIndex = window.gameConfig.currentLevelConfig.objects.findIndex(o => o.id === editState.selectedObject.id); if (configIndex > -1) { window.gameConfig.currentLevelConfig.objects[configIndex].x = editState.selectedObject.x; window.gameConfig.currentLevelConfig.objects[configIndex].y = editState.selectedObject.y; } } } function handlePointerUp(e) { e.preventDefault(); // Touch tracking continues for bike rotation } // Main game loop function gameLoop(timestamp) { const deltaTime = gameState.lastTime ? (timestamp - gameState.lastTime) / 1000 : 0; gameState.lastTime = timestamp; if (currentMode === 'play') { updateGame(deltaTime); } render(); requestAnimationFrame(gameLoop); } // Initialize and run function run(mode) { lib.log('run() called. Mode: ' + mode); currentMode = mode; // Setup canvas canvas = document.getElementById('gameCanvas'); ctx = canvas.getContext('2d'); canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; // Initialize audio context audioContext = new (window.AudioContext || window.webkitAudioContext)(); // Setup input handlers canvas.addEventListener('mousedown', handlePointerDown); canvas.addEventListener('mousemove', handlePointerMove); canvas.addEventListener('mouseup', handlePointerUp); canvas.addEventListener('touchstart', handlePointerDown); canvas.addEventListener('touchmove', handlePointerMove); canvas.addEventListener('touchend', handlePointerUp); // Setup UI handlers document.getElementById('nextLevelBtn').onclick = () => { playSound('ui_tap_sound'); nextLevel(); }; document.getElementById('restartBtn').onclick = () => { playSound('ui_tap_sound'); restartGame(); }; document.getElementById('playButton').onclick = () => { playSound('ui_tap_sound'); if (window.gameConfig.currentLevelConfig.objects.length < MIN_ITEMS) { alert('Add at least ' + MIN_ITEMS + ' items to play!'); return; } switchToPlayMode(); }; document.getElementById('addObjectBtn').onclick = () => { playSound('ui_tap_sound'); openObjectPicker(); }; document.getElementById('patternBtn').onclick = () => { playSound('ui_tap_sound'); showModal('patternBackdrop'); }; document.getElementById('settingsBtn').onclick = () => { playSound('ui_tap_sound'); lib.showGameParameters({ name: 'Level Settings', params: { 'Background Color': { key: 'currentLevelConfig.backgroundColor', type: 'color', onChange: (value) => { window.gameConfig.currentLevelConfig.backgroundColor = value; } }, 'Timer Duration': { key: 'currentLevelConfig.timerDuration', type: 'slider', min: 30, max: 180, step: 10, onChange: (value) => { window.gameConfig.currentLevelConfig.timerDuration = value; } }, 'Difficulty': { key: 'currentLevelConfig.difficulty', type: 'dropdown', options: [ { label: 'Easy', value: 'easy' }, { label: 'Normal', value: 'normal' }, { label: 'Hard', value: 'hard' } ], onChange: (value) => { window.gameConfig.currentLevelConfig.difficulty = value; } } } }); }; document.getElementById('deleteBtn').onclick = () => { playSound('ui_tap_sound'); deleteSelectedObject(); }; document.getElementById('closePickerBtn').onclick = () => { playSound('ui_tap_sound'); hideModal('objectPickerBackdrop'); }; document.getElementById('scatterBtn').onclick = () => generatePatternInEdit('scatter'); document.getElementById('circleBtn').onclick = () => generatePatternInEdit('circles'); document.getElementById('gridBtn').onclick = () => generatePatternInEdit('grid'); document.getElementById('clearBtn').onclick = () => clearAllObjects(); document.getElementById('closePatternBtn').onclick = () => { playSound('ui_tap_sound'); hideModal('patternBackdrop'); }; // Close modals when clicking backdrop document.getElementById('objectPickerBackdrop').onclick = (e) => { if (e.target.id === 'objectPickerBackdrop') { hideModal('objectPickerBackdrop'); } }; document.getElementById('patternBackdrop').onclick = (e) => { if (e.target.id === 'patternBackdrop') { hideModal('patternBackdrop'); } }; // Validate and initialize gameConfig if (!window.gameConfig) { window.gameConfig = { level: 1, highScore: 0, currentLevelConfig: generateLevel(1) }; } if (!window.gameConfig.currentLevelConfig) { window.gameConfig.currentLevelConfig = generateLevel(window.gameConfig.level || 1); } // Ensure difficulty is set if (!window.gameConfig.currentLevelConfig.difficulty) { window.gameConfig.currentLevelConfig.difficulty = 'normal'; } // Preload all assets const allAssetIds = [ ...Object.values(OBJECT_THEMES).flat(), 'consume_sound', 'level_complete_sound', 'game_over_sound', 'background_music', 'ui_tap_sound' ]; preloadAssets(allAssetIds).then(() => { lib.log('All assets loaded'); // Show appropriate UI if (mode === 'play') { document.getElementById('playUI').classList.remove('hidden'); document.getElementById('editUI').classList.add('hidden'); startLevel(); } else { document.getElementById('playUI').classList.add('hidden'); document.getElementById('editUI').classList.remove('hidden'); // Initialize objects for edit mode gameState.objects = window.gameConfig.currentLevelConfig.objects.map(obj => ({ ...obj, consumed: false, scale: 1, rotation: 0 })); updateEditUI(); } // Start render loop requestAnimationFrame(gameLoop); }); } function switchToPlayMode() { currentMode = 'play'; document.getElementById('playUI').classList.remove('hidden'); document.getElementById('editUI').classList.add('hidden'); lib.editMenu.close(); startLevel(); }

Void Muncher - Free Online Game on Astrocade