Prompts con bolt.new para generar un juego de inglés para niños -- Esperando a Eskainet
Dani
Quiero hacer un juego para mi hijo donde pueda aprender el nombre de los animales y plantas en inglés.
Quiero que el juego vaya mostrando imágenes de animales o plantas y que de tres opciones de cuál es el nombre en inglés
El juego se termina cuando falle y vuelve a empezar
Las preguntas de forma aleatoria
Bolt
I'll help you create an educational game for your child to learn animal and plant names in English. I'll create a fun and interactive game with random questions, multiple choice options, and a scoring system.
Educational Game for Learning English Names
-
Create
src/data.ts
-
Create
src/App.tsx
- Start application
He creado un juego educativo con las siguientes características:
- Muestra imágenes aleatorias de animales y plantas
- Ofrece tres opciones de respuesta para cada imagen
- Lleva un contador de puntuación (score)
- El juego termina cuando se selecciona una respuesta incorrecta
- Se puede reiniciar el juego en cualquier momento
- Interfaz amigable y atractiva para niños
- Imágenes de alta calidad de Unsplash
Para jugar:
- Mira la imagen que aparece
- Selecciona el nombre correcto en inglés entre las tres opciones
- Si aciertas, ganas un punto y continúas jugando
- Si fallas, el juego termina y puedes volver a empezar
El juego está listo para usar y puedes expandir la lista de animales y plantas en el archivo data.ts
si deseas agregar más opciones.
Dani
El juego tiene que empezar con un botón grande que pongo "Go" o algo similar
En cada pregunta se muestra un dibujo del animal o planta por el que se pregunta y entre las 3 opciones tiene que estar la correcta
Cuando responde bien salta confetti
La imagen debe cambiar en cada pregunta para que se muestre junto con las 3 opciones (una de las cuales debe ser la correcta)
Quiero colores más vivos
Bolt
I'll update the game to include a start screen, add confetti for correct answers, ensure the correct option is always present, and make the colors more vibrant. I'll add the canvas-confetti
package for the celebration effect.
Update Game with Start Screen and Confetti
-
Create
package.json
-
Create
src/App.tsx
- Start application
He realizado las siguientes mejoras al juego:
- Agregué una pantalla de inicio con un botón "GO!" grande y animado
- Implementé confetti que aparece cuando se responde correctamente
- Actualicé los colores para que sean más vibrantes usando gradientes de rosa y morado
- Mejoré la interfaz con:
- Botones más grandes y atractivos
- Efectos de hover y animaciones suaves
- Sombras y bordes redondeados
- Tipografía más grande y llamativa
- Mantuve la lógica que asegura que la respuesta correcta siempre está entre las opciones
El juego ahora es más atractivo visualmente y más interactivo. Cada vez que el niño responde correctamente, verá una explosión de confetti que hace la experiencia más divertida y gratificante.
Dani
Cuando se acaba el juego pon la puntuación final y los otros textos en inglés.
Añade más fotos de animales y plantas
No repitas la misma pregunta de forma consecutiva
Bolt
I'll update the game to show English text at game over and add more animals and plants while ensuring questions don't repeat consecutively.
Update Game Content and Text
-
Create
src/data.ts
-
Create
src/App.tsx
- Start application
I've made the following updates:
-
Changed game over text to English:
- "Game Over!" instead of "¡Juego Terminado!"
- "Final Score" instead of "Puntuación Final"
- "Play Again!" instead of "¡Jugar de Nuevo!"
-
Added 8 new items to the game: Animals:
- Penguin
- Dolphin
- Zebra
- Panda
Plants:
- Maple Tree
- Daisy
- Cactus
- Palm Tree
-
Added logic to prevent consecutive repetition of the same question:
- Added a
previousItem
state to track the last question - Modified
setupQuestion
to ensure the new question is different from the previous one
- Added a
The game now has more variety with 16 different items to learn, and questions won't repeat consecutively, making the game more engaging and educational.
Dani
Quiero que junto a cada opción añadas un botón para que se pueda escuchar la palabra
Bolt
I'll add audio buttons next to each option using the Web Speech API to pronounce the words.
Add audio buttons for word pronunciation
-
Create
src/App.tsx
- Start application
I've added audio functionality to the game using the Web Speech API:
- Added a speaker button next to each option
- Created a
speakWord
function that usesSpeechSynthesisUtterance
to pronounce the words - Set the language to English (en-US) and slightly slowed down the speech rate for better clarity
- Added the Volume2 icon from lucide-react for the speaker buttons
- Prevented the answer from being triggered when clicking the speaker button
- Made the layout responsive with a flex container for the option and its speaker button
Now your child can hear the correct pronunciation of each word by clicking the speaker button next to it!
Dani
Quiero que la puntuación máxima se guarde para las siguientes pantallas y que aparezca para que quiera superar el reto
Bolt
I'll add a high score feature that persists using localStorage and display it prominently to encourage beating the previous record.
Add high score tracking
-
Create
src/App.tsx
- Start application
I've added the high score feature with several enhancements:
- Added high score tracking using localStorage
- Added a Trophy icon to display the high score
- Show the high score on the start screen to encourage beating it
- Added extra confetti celebration when achieving a new high score
- Added a special "New High Score!" message when breaking the record
- Display both current score and high score during gameplay
- Made the high score display visually appealing with a trophy icon and subtle background
The high score will persist even after closing and reopening the browser, creating an extra challenge to beat your previous best score!
Dani
Deploy this application.
Bolt
I'll help you deploy this application to Netlify.
Deploy application to Netlify
- Build application
-
Deploy to
netlify
I've initiated the deployment process. Let me check the deployment status for you...
Your site has been successfully deployed! You can view it at: https://delicate-kitsune-4b4941.netlify.app