Emoji Adventure Game

{"name":"Emoji Adventure Game","description":"Embark on a whimsical journey through the land of emojis! In this fun and engaging game, you'll control your favorite emoji character as you navigate obstacles, collect points, and compete against time. Perfect for beginners, this project will teach you the basics of programming while creating a delightful gaming experience.","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-02-25T13:18:07.446205Z","updated_at":"2025-02-25T13:18:07.446210Z","user_id":5,"status":"PRIVATE","parent_id":null,"id":5882,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"import React, { useState, useEffect, useRef } from 'react';\nimport { Heart, Star, Zap, TrendingUp } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nconst BoopClicker = () => {\n const [boops, setBoops] = useState(0);\n const [boopsPerSecond, setBoopsPerSecond] = useState(0);\n const [autoBoopers, setAutoBoopers] = useState(0);\n const [superBoopers, setSuperBoopers] = useState(0);\n const [ultraBoopers, setUltraBoopers] = useState(0);\n const [clickPower, setClickPower] = useState(1);\n const [particles, setParticles] = useState([]);\n const [heartColor, setHeartColor] = useState(\"#ff0000\");\n const [comboCount, setComboCount] = useState(0);\n const [comboTimer, setComboTimer] = useState(null);\n const [showBonus, setShowBonus] = useState(false);\n const [bonusMultiplier, setBonusMultiplier] = useState(1);\n const [bonusTimeLeft, setBonusTimeLeft] = useState(0);\n const [showExplosion, setShowExplosion] = useState(false);\n const [milestones, setMilestones] = useState([]);\n const [showConfetti, setShowConfetti] = useState(false);\n \n const heartRef = useRef(null);\n const lastClickTime = useRef(0);\n const bonusInterval = useRef(null);\n \n // Milestone thresholds\n const milestoneThresholds = [100, 500, 1000, 5000, 10000, 50000, 100000];\n \n // Upgrade prices\n const autoBooperPrice = 10 + Math.floor(autoBoopers * 1.2);\n const superBooperPrice = 40 + Math.floor(superBoopers * 2);\n const ultraBooperPrice = 150 + Math.floor(ultraBoopers * 3);\n const clickUpgradePrice = 20 + Math.floor((clickPower - 1) * 15);\n\n // Auto-booping effect - faster updates\n useEffect(() => {\n const autoBoopInterval = setInterval(() => {\n const autoBoopAmount = autoBoopers + (superBoopers * 5) + (ultraBoopers * 25);\n if (autoBoopAmount > 0) {\n setBoops(prev => prev + (autoBoopAmount * bonusMultiplier) / 4); // 4x speed (updates every 250ms instead of 1s)\n setBoopsPerSecond(autoBoopAmount * bonusMultiplier);\n }\n }, 250);\n \n return () => clearInterval(autoBoopInterval);\n }, [autoBoopers, superBoopers, ultraBoopers, bonusMultiplier]);\n\n // Bonus timer effect\n useEffect(() => {\n if (bonusTimeLeft > 0) {\n bonusInterval.current = setInterval(() => {\n setBonusTimeLeft(prevTime => {\n if (prevTime <= 1) {\n clearInterval(bonusInterval.current);\n setBonusMultiplier(1);\n return 0;\n }\n return prevTime - 1;\n });\n }, 1000);\n }\n \n return () => {\n if (bonusInterval.current) {\n clearInterval(bonusInterval.current);\n }\n };\n }, [bonusTimeLeft]);\n\n // Check for milestones\n useEffect(() => {\n for (const threshold of milestoneThresholds) {\n if (boops >= threshold && !milestones.includes(threshold)) {\n setMilestones(prev => [...prev, threshold]);\n triggerConfetti();\n // Give a bonus when reaching a milestone\n activateBonus(Math.min(5, Math.floor(threshold / 1000) + 2), 20);\n }\n }\n }, [boops, milestones]);\n\n // Colors change based on boops - more variety\n useEffect(() => {\n const colors = [\n \"#ff0000\", \"#ff2000\", \"#ff4000\", \"#ff6000\", \"#ff8000\", \"#ffa000\", \"#ffc000\", \"#ffe000\",\n \"#ffff00\", \"#e0ff00\", \"#c0ff00\", \"#a0ff00\", \"#80ff00\", \"#60ff00\", \"#40ff00\", \"#20ff00\",\n \"#00ff00\", \"#00ff20\", \"#00ff40\", \"#00ff60\", \"#00ff80\", \"#00ffa0\", \"#00ffc0\", \"#00ffe0\",\n \"#00ffff\", \"#00e0ff\", \"#00c0ff\", \"#00a0ff\", \"#0080ff\", \"#0060ff\", \"#0040ff\", \"#0020ff\",\n \"#0000ff\", \"#2000ff\", \"#4000ff\", \"#6000ff\", \"#8000ff\", \"#a000ff\", \"#c000ff\", \"#e000ff\",\n \"#ff00ff\", \"#ff00e0\", \"#ff00c0\", \"#ff00a0\", \"#ff0080\", \"#ff0060\", \"#ff0040\", \"#ff0020\"\n ];\n \n const colorIndex = Math.floor(boops / 50) % colors.length;\n setHeartColor(colors[colorIndex]);\n }, [boops]);\n\n // Clean up particles faster\n useEffect(() => {\n const timer = setTimeout(() => {\n if (particles.length > 0) {\n setParticles(particles => particles.slice(5)); // Remove more particles at once for better performance\n }\n }, 500); // Faster cleanup\n \n return () => clearTimeout(timer);\n }, [particles]);\n\n // Generate a unique ID for particles\n const generateParticleId = () => `particle-${Date.now()}-${Math.random()}`;\n\n const triggerConfetti = () => {\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 3000);\n };\n\n const activateBonus = (multiplier, duration) => {\n setBonusMultiplier(multiplier);\n setBonusTimeLeft(duration);\n setShowBonus(true);\n setTimeout(() => setShowBonus(false), 2000);\n };\n\n const handleBoop = (e) => {\n // Calculate click position\n const rect = heartRef.current.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n // Handle combos\n const now = Date.now();\n if (now - lastClickTime.current < 300) { // Fast consecutive clicks\n setComboCount(prev => {\n const newCombo = prev + 1;\n \n // Combo bonuses\n if (newCombo % 10 === 0) {\n const comboBonus = Math.min(5, Math.floor(newCombo / 10));\n activateBonus(comboBonus, 10);\n }\n \n return newCombo;\n });\n \n if (comboTimer) {\n clearTimeout(comboTimer);\n }\n } else {\n setComboCount(1);\n }\n \n // Reset combo timer\n const timer = setTimeout(() => setComboCount(0), 1500);\n setComboTimer(timer);\n lastClickTime.current = now;\n \n // Add boops with bonus\n const boopsToAdd = clickPower * bonusMultiplier * (1 + Math.floor(comboCount / 5) * 0.5);\n setBoops(prev => prev + boopsToAdd);\n \n // Trigger explosion every 25 clicks\n if (comboCount % 25 === 0 && comboCount > 0) {\n setShowExplosion(true);\n setTimeout(() => setShowExplosion(false), 700);\n }\n \n // Create particles - more and varied\n const newParticles = [];\n const particleCount = Math.min(5 + Math.floor(comboCount / 5), 20);\n \n for (let i = 0; i < particleCount; i++) {\n const angle = (Math.random() * Math.PI * 2);\n const speed = 2 + Math.random() * 5;\n const distance = 30 + Math.random() * 50;\n \n const particleX = x + Math.cos(angle) * distance;\n const particleY = y + Math.sin(angle) * distance;\n \n newParticles.push({\n id: generateParticleId(),\n x: particleX,\n y: particleY,\n value: Math.round(boopsToAdd),\n color: heartColor,\n scale: 1 + Math.random() * 0.5,\n speedX: Math.cos(angle) * speed,\n speedY: Math.sin(angle) * speed - 2 // Upward bias\n });\n }\n \n setParticles(prev => [...prev, ...newParticles]);\n };\n\n const buyAutoBooper = () => {\n if (boops >= autoBooperPrice) {\n setBoops(prev => prev - autoBooperPrice);\n setAutoBoopers(prev => prev + 1);\n }\n };\n\n const buySuperBooper = () => {\n if (boops >= superBooperPrice) {\n setBoops(prev => prev - superBooperPrice);\n setSuperBoopers(prev => prev + 1);\n }\n };\n\n const buyUltraBooper = () => {\n if (boops >= ultraBooperPrice) {\n setBoops(prev => prev - ultraBooperPrice);\n setUltraBoopers(prev => prev + 1);\n }\n };\n\n const upgradeClickPower = () => {\n if (boops >= clickUpgradePrice) {\n setBoops(prev => prev - clickUpgradePrice);\n setClickPower(prev => prev + 1);\n }\n };\n \n // Format large numbers\n const formatNumber = (num) => {\n if (num >= 1000000) {\n return (num / 1000000).toFixed(1) + 'M';\n } else if (num >= 1000) {\n return (num / 1000).toFixed(1) + 'K';\n } else {\n return num.toFixed(0);\n }\n };\n\n return (\n

\n {/* Background pulse effect */}\n

\n \n

\n\n 10 ? [1, 1.03, 1] : 1\n }}\n transition={{ \n duration: 2, \n repeat: Infinity,\n repeatType: \"reverse\" \n }}\n >\n Boop Clicker\n \n \n

\n \n Boops: {formatNumber(boops)}\n \n \n 50 ? [\n 'rgba(219, 234, 254, 0.8)', \n 'rgba(191, 219, 254, 0.8)', \n 'rgba(219, 234, 254, 0.8)'\n ] : 'rgba(219, 234, 254, 0.8)'\n }}\n transition={{ \n duration: 1.5, \n repeat: Infinity\n }}\n >\n {formatNumber(boopsPerSecond)}/s\n \n

\n \n {/* Combo counter */}\n \n {comboCount > 1 && (\n \n {comboCount}x COMBO!\n \n )}\n \n \n {/* Bonus Multiplier */}\n \n {bonusTimeLeft > 0 && (\n \n {bonusMultiplier}x BONUS! ({bonusTimeLeft}s)\n \n )}\n \n \n {/* Heart button area */}\n

\n \n 15 ? [0, 5, -5, 0] : 0,\n scale: [1, comboCount > 5 ? 1.05 : 1, 1]\n }}\n transition={{ \n duration: 0.5, \n repeat: Infinity,\n repeatType: \"reverse\"\n }}\n >\n \n \n \n \n {/* Explosion effect */}\n \n {showExplosion && (\n \n

\n \n )}\n \n \n {/* Confetti effect for milestones */}\n \n {showConfetti && (\n \n {Array.from({ length: 100 }).map((_, i) => {\n const size = Math.random() * 8 + 4;\n const angle = Math.random() * Math.PI * 2;\n const distance = 100 + Math.random() * 200;\n const duration = 1 + Math.random() * 3;\n const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];\n const color = colors[Math.floor(Math.random() * colors.length)];\n \n return (\n \n );\n })}\n \n )}\n \n \n {/* Particles */}\n \n {particles.map(particle => (\n \n +{particle.value}\n \n ))}\n \n

\n \n {/* Bonus notification */}\n \n {showBonus && (\n \n \n {bonusMultiplier}x BONUS ACTIVATED!\n \n \n )}\n \n \n {/* Upgrades */}\n

\n = clickUpgradePrice ? 'bg-blue-500 hover:bg-blue-600 text-white' : 'bg-gray-300 text-gray-600 cursor-not-allowed'}`}\n whileHover={boops >= clickUpgradePrice ? { scale: 1.03, transition: { duration: 0.1 } } : {}}\n whileTap={boops >= clickUpgradePrice ? { scale: 0.97, transition: { duration: 0.1 } } : {}}\n >\n

\n \n Click Power ({clickPower})\n

\n {clickUpgradePrice}\n \n \n = autoBooperPrice ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-gray-300 text-gray-600 cursor-not-allowed'}`}\n whileHover={boops >= autoBooperPrice ? { scale: 1.03, transition: { duration: 0.1 } } : {}}\n whileTap={boops >= autoBooperPrice ? { scale: 0.97, transition: { duration: 0.1 } } : {}}\n >\n

\n \n Auto-Booper ({autoBoopers})\n

\n {autoBooperPrice}\n \n \n = superBooperPrice ? 'bg-yellow-500 hover:bg-yellow-600 text-white' : 'bg-gray-300 text-gray-600 cursor-not-allowed'}`}\n whileHover={boops >= superBooperPrice ? { scale: 1.03, transition: { duration: 0.1 } } : {}}\n whileTap={boops >= superBooperPrice ? { scale: 0.97, transition: { duration: 0.1 } } : {}}\n >\n

\n \n Super Booper ({superBoopers})\n

\n {superBooperPrice}\n \n \n = ultraBooperPrice ? 'bg-purple-500 hover:bg-purple-600 text-white' : 'bg-gray-300 text-gray-600 cursor-not-allowed'}`}\n whileHover={boops >= ultraBooperPrice ? { scale: 1.03, transition: { duration: 0.1 } } : {}}\n whileTap={boops >= ultraBooperPrice ? { scale: 0.97, transition: { duration: 0.1 } } : {}}\n >\n

\n \n Ultra Booper ({ultraBoopers})\n

\n {ultraBooperPrice}\n \n

\n \n {/* Milestones display */}\n

Milestones:

\n {milestoneThresholds.map(threshold => (\n \n {threshold >= 1000 ? `${threshold / 1000}K` : threshold >= 10000 ? `${threshold / 10000}M` : threshold}\n \n ))}\n

\n );\n};\n\nexport default BoopClicker;","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Emoji Adventure Game\n \n \n\n\n \n\n"},"chat_history":[{"project_id":5882,"sender":"human","message":"...","deleted":0,"created_at":"2025-02-25T13:18:07.748585Z","output_tokens":null,"code_id":213270,"input_tokens":null,"id":112479}],"assets":[],"messages_sent":1,"comments":[],"steps":[]}