import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; const COLORS = [ { name: 'Rojo', hex: '#FF0000' }, { name: 'Azul', hex: '#0000FF' }, { name: 'Verde', hex: '#00FF00' }, { name: 'Amarillo', hex: '#FFFF00' }, ]; const backgroundStyle = { background: 'linear-gradient(135deg, #FFF6B7 0%, #F6CEEC 100%)', backgroundImage: ` radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.2) 2%, transparent 0%), radial-gradient(circle at 75px 75px, rgba(255, 255, 255, 0.2) 2%, transparent 0%) `, backgroundSize: '100px 100px', }; const Game = () => { const [level, setLevel] = useState(1); const [score, setScore] = useState(0); const [selectedColor, setSelectedColor] = useState(null); const [message, setMessage] = useState(''); const [matchedPairs, setMatchedPairs] = useState([]); // Nivel 1: Círculos simples para emparejar const Level1 = () => { const [gameColors] = useState(() => { const shuffled = [...COLORS].sort(() => Math.random() - 0.5); return shuffled.concat(shuffled); }); const handleColorClick = (color) => { if (matchedPairs.includes(color.hex)) return; if (!selectedColor) { setSelectedColor(color); setMessage('¡Ahora selecciona el color igual!'); } else { if (selectedColor.hex === color.hex && !matchedPairs.includes(color.hex)) { setMessage('¡Correcto! 🎉'); setScore(score + 1); setMatchedPairs([...matchedPairs, color.hex]); if (score + 1 >= 3) { setTimeout(() => { setLevel(2); setScore(0); setMatchedPairs([]); }, 1000); } } else { setMessage('¡Intenta de nuevo! 😊'); } setSelectedColor(null); } }; return (

{gameColors.map((color, index) => (

!matchedPairs.includes(color.hex) && handleColorClick(color)} style={{ width: '100px', height: '100px', borderRadius: '50%', backgroundColor: color.hex, cursor: matchedPairs.includes(color.hex) ? 'default' : 'pointer', border: selectedColor?.hex === color.hex ? '4px solid black' : '2px solid gray', opacity: matchedPairs.includes(color.hex) ? 0.5 : 1, transform: selectedColor?.hex === color.hex ? 'scale(1.1)' : 'scale(1)', transition: 'all 0.3s ease', boxShadow: selectedColor?.hex === color.hex ? '0 0 15px rgba(0,0,0,0.3)' : 'none', }} /> ))}

); }; // Nivel 2: Formas diferentes con el mismo color const Level2 = () => { const shapes = ['square', 'circle', 'triangle']; const [gameColors] = useState(() => { const shuffled = [...COLORS].sort(() => Math.random() - 0.5).slice(0, 3); return shuffled.concat(shuffled); }); const handleColorClick = (color) => { if (matchedPairs.includes(color.hex)) return; if (!selectedColor) { setSelectedColor(color); setMessage('¡Encuentra la otra forma del mismo color!'); } else { if (selectedColor.hex === color.hex && !matchedPairs.includes(color.hex)) { setMessage('¡Excelente! 🌟'); setScore(score + 1); setMatchedPairs([...matchedPairs, color.hex]); if (score + 1 >= 3) { setTimeout(() => { setLevel(3); setScore(0); setMatchedPairs([]); }, 1000); } } else { setMessage('¡Sigue intentando! 💪'); } setSelectedColor(null); } }; return (

{gameColors.map((color, index) => (

!matchedPairs.includes(color.hex) && handleColorClick(color)} style={{ width: '100px', height: '100px', backgroundColor: color.hex, cursor: matchedPairs.includes(color.hex) ? 'default' : 'pointer', border: selectedColor?.hex === color.hex ? '4px solid black' : '2px solid gray', borderRadius: index % 2 === 0 ? '50%' : '0%', opacity: matchedPairs.includes(color.hex) ? 0.5 : 1, transform: selectedColor?.hex === color.hex ? 'scale(1.1)' : 'scale(1)', transition: 'all 0.3s ease', boxShadow: selectedColor?.hex === color.hex ? '0 0 15px rgba(0,0,0,0.3)' : 'none', }} /> ))}

); }; // Nivel 3: Nombre del color con su color correspondiente const Level3 = () => { const [gameColors] = useState(() => { return [...COLORS].sort(() => Math.random() - 0.5).slice(0, 3); }); const handleColorClick = (color) => { if (matchedPairs.includes(color.hex)) return; if (!selectedColor) { setSelectedColor(color); setMessage('¡Ahora une con su nombre!'); } else { if (selectedColor.hex === color.hex && !matchedPairs.includes(color.hex)) { setMessage('¡Fantástico! 🎊'); setScore(score + 1); setMatchedPairs([...matchedPairs, color.hex]); if (score + 1 >= 3) { setTimeout(() => { setMessage('¡Felicitaciones! ¡Has completado todos los niveles! 🏆'); setLevel(1); setScore(0); setMatchedPairs([]); }, 1000); } } else { setMessage('¡Inténtalo otra vez! 🎨'); } setSelectedColor(null); } }; return (

{gameColors.map((color, index) => (

!matchedPairs.includes(color.hex) && handleColorClick(color)} style={{ width: '100px', height: '100px', backgroundColor: color.hex, cursor: matchedPairs.includes(color.hex) ? 'default' : 'pointer', border: selectedColor?.hex === color.hex ? '4px solid black' : '2px solid gray', borderRadius: '10px', opacity: matchedPairs.includes(color.hex) ? 0.5 : 1, transform: selectedColor?.hex === color.hex ? 'scale(1.1)' : 'scale(1)', transition: 'all 0.3s ease', boxShadow: selectedColor?.hex === color.hex ? '0 0 15px rgba(0,0,0,0.3)' : 'none', }} /> ))}

{gameColors.map((color, index) => (

handleColorClick(color)} style={{ padding: '10px 20px', backgroundColor: 'white', border: '2px solid black', borderRadius: '5px', cursor: 'pointer', fontWeight: 'bold', }} > {color.name}

))}

); }; return (

¡Juego de Colores! 🎨

Nivel {level}

{message}

{level === 1 && } {level === 2 && } {level === 3 && }

Aciertos: {score}/3

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();