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
    npm run dev
    

He creado un juego educativo con las siguientes características:

  1. Muestra imágenes aleatorias de animales y plantas
  2. Ofrece tres opciones de respuesta para cada imagen
  3. Lleva un contador de puntuación (score)
  4. El juego termina cuando se selecciona una respuesta incorrecta
  5. Se puede reiniciar el juego en cualquier momento
  6. Interfaz amigable y atractiva para niños
  7. 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
    npm run dev
    

He realizado las siguientes mejoras al juego:

  1. Agregué una pantalla de inicio con un botón "GO!" grande y animado
  2. Implementé confetti que aparece cuando se responde correctamente
  3. Actualicé los colores para que sean más vibrantes usando gradientes de rosa y morado
  4. 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
  5. 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
    npm run dev
    

I've made the following updates:

  1. 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!"
  2. Added 8 new items to the game: Animals:

    • Penguin
    • Dolphin
    • Zebra
    • Panda

    Plants:

    • Maple Tree
    • Daisy
    • Cactus
    • Palm Tree
  3. 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

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
    npm run dev
    

I've added audio functionality to the game using the Web Speech API:

  1. Added a speaker button next to each option
  2. Created a speakWord function that uses SpeechSynthesisUtterance to pronounce the words
  3. Set the language to English (en-US) and slightly slowed down the speech rate for better clarity
  4. Added the Volume2 icon from lucide-react for the speaker buttons
  5. Prevented the answer from being triggered when clicking the speaker button
  6. 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
    npm run dev
    

I've added the high score feature with several enhancements:

  1. Added high score tracking using localStorage
  2. Added a Trophy icon to display the high score
  3. Show the high score on the start screen to encourage beating it
  4. Added extra confetti celebration when achieving a new high score
  5. Added a special "New High Score!" message when breaking the record
  6. Display both current score and high score during gameplay
  7. 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

Edit
Pub: 18 Mar 2025 23:47 UTC
Views: 27