Programando juego de detectives | Mediateca de EducaMadrid

Vamos a empezar otro ejemplo en nuestro camino para ser compositores de software o crear software con inteligencia artificial y en este caso vamos a programar un juego, un juego que igual a algunos os sonará. 00:00:04

Vamos a intentar imitar un juego clásico que se llamaba ¿Dónde está Carmen Sandiego? que básicamente consistía en a partir de una serie de pistas identificar ciudades o países mientras perseguías a un ladrón. 00:00:17

es un juego bastante antiguo pero que a mí al menos cuando era niño me encantaba para ello 00:00:28

usaremos una inteligencia artificial como charles gpt o copilot en este caso siempre usamos las 00:00:31

versiones gratuitas y el prompt que vamos a usar ahora va a ser este que la aplicación web para un 00:00:35

juego detectives al estilo de carmen sandiego la aplicación debe presentar un escenario ideal de 00:00:41

un robo en una ciudad famosa aquí voy a explicar un poco lo que quiero que haga pues ofrecer tres 00:00:46

pistas del siguiente destino relacionadas con geografía cultura e historia los que jugasteis 00:00:50

recordaréis que decía he visto una bandera con estos tres colores donde podría estar lo voy a 00:00:55

pedir que permite el jugador elija entre tres posibles destinos basados en las pistas pensado 00:01:00

para un público quizás más infantil donde no puedan todavía saber la respuesta exacta si no 00:01:06

lo podríamos quitar y pedir que el jugador tenga que escribir la respuesta tener al menos cinco 00:01:12

ciudades diferentes para visitar durante la persecución un sistema de puntos y ofrecer 00:01:16

datos pues interesantes sobre cada ciudad tener un final el jugador intenta identificar al ladrón 00:01:21

entre varios sospechosos y tener un diseño atractivo y responsivo y después pondremos 00:01:26

las cosas que siempre ponemos que todo el código esté en un solo archivo que usemos 00:01:31

telwin desde un cdn etcétera etcétera y sin más vamos a ver qué tal lo hace aquí tienes 00:01:35

el archivo html y vamos a ver qué tal mira qué divertido lo ha llamado juego de detectives donde 00:01:40

está el ladrón claro que sí respetando el copyright gpt bien bien perfecto hemos que 00:01:46

acabado de generar el código nos explica las instrucciones que tenemos que seguir que son 00:01:51

las mismas y hemos ido siguiendo y las funcionalidades que tiene voy a copiar el 00:01:55

código voy a crear un nuevo archivo de texto lo pego y pum pasará de blanco a color al detectar 00:01:59

que es html muy bien lo voy a guardar como voy a crear una nueva carpeta juego de detectives y 00:02:06

dentro lo llamaré juego detectives versión 1 perfecto y vamos a verlo aquí lo tenemos dónde 00:02:15

está el ladrón un famoso ladrón roba una joya oh dios mío sigue las pistas para atraparlo se ha 00:02:24

cometido un robo en parís el ladrón ha huido sigue las pistas la ciudad alberga todo pero 00:02:30

si me está diciendo dónde ha sido dónde está el ladrón pues entiendo que estará en parís si no 00:02:35

Muy bien, nos ha llegado un punto. Igual le tenemos que decir, se ha cometido un robo en Tokio, ¿os dais cuenta que me está poniendo la ciudad? Puede ser, puede ser que se haya equivocado la IA, con lo cual, ¿qué tal si se lo comentamos? Funciona a medias. 00:02:41

y le he pedido lo siguiente 00:02:54

en primer lugar, y se lo he puesto en mayúsculas 00:02:56

estamos diciendo qué ciudad es en el enunciado 00:02:58

es absurdo dar la respuesta, arréglalo por favor 00:03:00

al final le estoy destacando 00:03:02

que igual ha hecho algo que no tiene mucho sentido 00:03:04

el juego debería ser más visual 00:03:06

añade emojis en las opciones, pone emojis gigantes 00:03:08

por ejemplo del ladrón o detective 00:03:10

y le he pedido hacer la interfaz más bonita 00:03:12

con colores degradados y fuentes más chulas 00:03:14

vamos a ver qué hace 00:03:16

ya lo está generando y fijaros que ha pasado 00:03:17

algo que tarde o temprano nos tenía que suceder 00:03:20

que es que no ha podido generar todo el código fijaros que es mucho en una sola generación sin 00:03:22

embargo nos tenemos que fijar siempre que al acabar de generarlo cierre con lo típico que 00:03:27

hemos visto antes de explicar que siempre acaba igual cerrando body que es el cuerpo de la página 00:03:33

web y html pues aquí vemos que aquí vemos que lo está generando pero se ha quedado a medias sin 00:03:39

embargo chat gpt nos pone un botón de continuar generando si no le podríamos escribir literalmente 00:03:45

continúa y lo haría pero si pulso el botón tiene una ventaja que es que continúa generando lo 00:03:50

dentro de la ventana de código con lo cual sólo lo voy a copiar una vez si yo le escribiera que 00:03:55

continuará seguramente generaría otro mensaje de copiar primero el primero y después el segundo 00:04:01

pero usando el botón que nos ponen nos lo genera en el mismo lugar ya los que estaba a puntito ya 00:04:06

de acabar pero bueno copiar código antes importante voy a guardar como la llamaré 00:04:11

versión 2 antes de pegarlo para que no me lo sustituya automáticamente y pasamos de un código 00:04:18

de 170 líneas a 184 bien parece que es poco pero vamos a ver si ha mejorado algo y ha mejorado para 00:04:23

verlo antes esto es lo que veíamos al principio y ahora ya ha mejorado juego detectives encuentra 00:04:29

al ladrón alerta se ha cometido un robo en una ciudad famosa sigue las pistas la ciudad alberga 00:04:35

un monumento famoso fue construido pues cuál sería las capitales más visitadas y cocina queso y vino 00:04:39

pues igual es parís y en correcto el ladrón está en parís ha ganado un puntos y fijaros que aquí 00:04:45

le podemos pedir que si sólo es uno lo diga en singular siguiente está la ciudad más poblada 00:04:50

del mundo está en asia aquí estará un evento olímpico perfecto en 2021 los juegos olímpicos 00:04:55

de 2021 que tendrían que haber sido en 2020 fueron en tokio duda es la ciudad más poblada del mundo 00:05:00

igual resulta que se ha equivocado en este dato y es otra lo podríamos comprobar y si está mal pues 00:05:06

pedirlo que lo arregle de hecho lo podemos ir pidiendo o lo podemos arreglar nosotros mismos 00:05:11

y poco a poco vamos viendo el código vemos que es bastante fácil de entender fijaros que es la 00:05:16

ciudad más poblada del mundo y está en asia pues podríamos cambiar esto por es la ciudad o es la 00:05:20

capital del país donde nació el anime podríamos tocarlo aquí sin embargo si editamos el código 00:05:26

directamente es muy importante después en la que estamos usando pues arrastrar el archivo html con 00:05:31

los cambios que hemos puesto si no lo hemos tocado directamente pues le pedimos los cambios aquí pero 00:05:37

si lo hemos tocado pues obviamente la ya no sabe los cambios que hemos hecho si lo tenemos que 00:05:41

arrastrar y soltar vamos a seguir viéndolo entiendo que está en tokio perfecto se ha cometido un robo 00:05:45

en la ciudad famosa es la ciudad conocida por su enorme parque en medio central park bien tengo 00:05:52

dudas qué pasaría si lo pongo mal sé que es nueva york pero qué pasa si pongo a mira el ladrón está 00:05:56

los ángeles nueva york si bien un punto podríamos pedirle que pues que si lo haces mal terrestre 00:06:01

puntos y demás bien la ciudad por sus playas de copacabana e ipanema pues el mundo moderno 00:06:06

maravilla son los carnavales más grandes vamos a probar si el río de janeiro perfecto y la última 00:06:12

se llama santa de áfrica cual podría ser estambul atenas el cairo vamos a ver bien pasado dos puntos 00:06:19

quién crees que es el ladrón pues aquí les podríamos pedir un poco de información no igual 00:06:26

es suficiente o no para saberlo pues yo creo que es carlos pues toma efectivamente tu nación es 00:06:31

seis puntos evidentemente es un juego muy sencillo pero lo podríamos usar como base para ir cambiando 00:06:36

con hemos es lo que va pasando con escenas lo que quisiéramos es un muy buen ejemplo sobre cómo 00:06:42

podemos crear cosas visuales divertidas usando la inteligencia artificial y hasta aquí este 00:06:47

ejemplo vamos a ver otros distintos y yo creo que incluso alguno más complejo que éste sigamos 00:06:52

Programando juego de detectives - Contenido educativo

Del mismo autor…

Vídeo resumen "El núcleo celular" Biología 2º de Bachillerato

Jornadas Docentes FP virtual 2025

Vídeo resumen "Proteínas, enzimas y vitaminas" Biología 2º Bachillerato

Vídeo resumen "Lípidos" Biología 2º de Bachillerato

Vídeo resumen "Glúcidos", Biología 2º Bachillerato

Vídeo resumen "Anabolismo", Biología 2º de Bachillerato

Vídeo resumen "Catabolismo", Biología 2º Bachillerato