1
00:00:04,459 --> 00:00:10,880
vamos a empezar otro ejemplo en nuestro camino para ser compositores de software o crear software

2
00:00:10,880 --> 00:00:14,539
con inteligencia artificial y en este caso vamos a programar un juego un juego que igual algunos

3
00:00:14,539 --> 00:00:17,780
son ahora vamos a intentar imitar un juego clásico que se llamaba donde está carmen san diego que

4
00:00:17,780 --> 00:00:21,140
básicamente consistía en a partir una serie de pistas identificar ciudades o países mientras

5
00:00:21,140 --> 00:00:23,660
perseguidas a un ladrón es un juego bastante antiguo pero que a mí al menos cuando era niño

6
00:00:23,660 --> 00:00:26,620
me encantaba para ello usaremos una inteligencia artificial como es el CPT Copilot en este caso

7
00:00:26,620 --> 00:00:30,420
siempre usamos las versiones gratuitas y el prompt que vamos a usar ahora va a ser este

8
00:00:30,420 --> 00:00:32,979
tiene una aplicación web para un juego de detectives al estilo de carmen san diego la

9
00:00:32,979 --> 00:00:35,259
La aplicación debe presentar un escenario ideal de un robo en una ciudad famosa.

10
00:00:35,520 --> 00:00:40,000
Aquí voy a explicar un poco lo que quiero que haga, pues ofrecer tres pistas del siguiente destino relacionadas con geografía, cultura e historia.

11
00:00:40,079 --> 00:00:43,600
Los que jugasteis recordaréis que decía, he visto una bandera con estos tres colores, ¿dónde podría estar?

12
00:00:43,880 --> 00:00:51,520
Le voy a pedir que permita que el jugador elija entre tres posibles destinos basados en las pistas, pensado para un público quizás más infantil, donde no puedan todavía saber la respuesta exacta.

13
00:00:51,520 --> 00:00:53,780
Si no, lo podríamos quitar y pedir que el jugador tenga que escribir la respuesta.

14
00:00:54,079 --> 00:00:59,479
Tener al menos cinco ciudades diferentes para visitar durante la persecución, un sistema de puntos y ofrecer datos interesantes sobre cada ciudad.

15
00:00:59,479 --> 00:01:01,780
tener un final, el jugador intenta identificar al ladrón entre varios

16
00:01:01,780 --> 00:01:03,799
sospechosos y tener un diseño atractivo y responsivo

17
00:01:03,799 --> 00:01:05,840
y después pondremos las cosas que siempre ponemos, que todo el código

18
00:01:05,840 --> 00:01:07,939
esté en un solo archivo, que usemos tailwind desde un cdn

19
00:01:07,939 --> 00:01:09,540
etcétera, etcétera, y sin más vamos a ver

20
00:01:09,540 --> 00:01:11,680
qué tal lo hace, aquí tienes el archivo html

21
00:01:11,680 --> 00:01:13,599
y vamos a ver qué tal, mira qué divertido, lo ha llamado

22
00:01:13,599 --> 00:01:15,480
juego de detectives, dónde está el ladrón, claro que sí

23
00:01:15,480 --> 00:01:17,659
respetando el copyright, bien, bien

24
00:01:17,659 --> 00:01:19,439
perfecto, hemos acabado de generar el código, nos explica

25
00:01:19,439 --> 00:01:21,340
las instrucciones que tenemos que seguir, que son las mismas

26
00:01:21,340 --> 00:01:23,420
que hemos ido siguiendo y las funcionalidades que tiene, voy a copiar

27
00:01:23,420 --> 00:01:25,439
el código, voy a crear un nuevo archivo de texto

28
00:01:25,439 --> 00:01:27,719
lo pego y pum, va a estar de blanco a color al detectar

29
00:01:27,719 --> 00:01:29,480
que es HTML, muy bien, lo voy a guardar

30
00:01:29,480 --> 00:01:31,079
voy a ver cómo, voy a

31
00:01:31,079 --> 00:01:33,500
crear una nueva carpeta, juego de detectives

32
00:01:33,500 --> 00:01:35,760
y dentro lo llamaré juego detectives

33
00:01:35,760 --> 00:01:37,260
versión 1

34
00:01:37,260 --> 00:01:39,560
perfecto, y vamos a verlo

35
00:01:39,560 --> 00:01:41,540
aquí lo tenemos, ¿dónde está el ladrón? un famoso ladrón, una joya

36
00:01:41,540 --> 00:01:43,079
oh Dios mío, sigue las pistas para atraparlo

37
00:01:43,079 --> 00:01:45,219
se ha cometido un robo en París, el ladrón ha huido

38
00:01:45,219 --> 00:01:47,099
sigue las pistas, la ciudad, alberga, tututun

39
00:01:47,099 --> 00:01:49,420
pero si me está diciendo dónde ha sido, ¿dónde está el ladrón?

40
00:01:49,519 --> 00:01:51,060
pues entiendo que estará en París, si no

41
00:01:51,060 --> 00:01:53,159
muy bien, se ha llegado al punto, igual le tenemos que decir

42
00:01:53,159 --> 00:01:54,939
Se ha cometido un robo en Tokio, ¿os dais cuenta que me está poniendo la ciudad?

43
00:01:55,040 --> 00:01:56,700
Puede ser, puede ser, se ha equivocado la IA.

44
00:01:56,980 --> 00:01:58,459
Con lo cual, ¿qué tal si se lo comentamos?

45
00:01:58,959 --> 00:01:59,840
Funciona a medias.

46
00:02:00,439 --> 00:02:01,040
Y le he pedido lo siguiente.

47
00:02:01,459 --> 00:02:02,420
En primer lugar, y se lo he puesto en mayúsculas,

48
00:02:02,500 --> 00:02:03,700
estamos diciendo qué ciudad es en el enunciado.

49
00:02:03,799 --> 00:02:04,620
Es absurdo dar la respuesta.

50
00:02:04,760 --> 00:02:05,219
Arreglalo, por favor.

51
00:02:05,439 --> 00:02:07,980
Al final le estoy destacando que igual ha hecho algo que no tiene mucho sentido.

52
00:02:08,379 --> 00:02:09,199
El juego debería ser más visual.

53
00:02:09,319 --> 00:02:11,699
Añade emojis en las opciones, pone emojis gigantes, por ejemplo, del ladrón del detective.

54
00:02:11,699 --> 00:02:14,719
Y le he pedido hacer la interfaz más bonita, con colores degradados y fuentes más chulas.

55
00:02:14,819 --> 00:02:15,240
Vamos a ver qué hace.

56
00:02:15,240 --> 00:02:17,659
y ya lo está generando, y fijaros que ha pasado algo

57
00:02:17,659 --> 00:02:19,460
que tarde o temprano nos tenía que suceder, que es que no ha podido

58
00:02:19,460 --> 00:02:21,800
generar todo el código, fijaros que es mucho, en una sola generación

59
00:02:21,800 --> 00:02:23,740
sin embargo, nos tenemos que fijar siempre

60
00:02:23,740 --> 00:02:25,539
que al acabar de generarlo, cierre con

61
00:02:25,539 --> 00:02:27,039
lo típico que hemos visto antes de

62
00:02:27,039 --> 00:02:29,900
cerrando body, que es el cuerpo de la página web

63
00:02:29,900 --> 00:02:31,599
y html, pues aquí vemos que

64
00:02:31,599 --> 00:02:33,840
aquí vemos que lo está generando, pero se ha quedado a medias

65
00:02:33,840 --> 00:02:35,860
sin embargo, chatgpt nos pone un botón de continuar

66
00:02:35,860 --> 00:02:37,900
generando, si no, le podríamos escribir literalmente continúa y lo haría

67
00:02:37,900 --> 00:02:39,699
pero si pulso el botón, tiene una ventaja

68
00:02:39,699 --> 00:02:41,659
que es que continúa generándolo dentro

69
00:02:41,659 --> 00:02:43,740
de la ventana de código, con lo cual solo lo voy a tener que copiar una vez

70
00:02:43,740 --> 00:02:45,939
si yo le escribiera que continuara, seguramente

71
00:02:45,939 --> 00:02:47,840
generaría otro mensaje y me iría a copiar primero el primero y después

72
00:02:47,840 --> 00:02:49,800
el segundo, pero usando el botón que nos ponen, nos lo

73
00:02:49,800 --> 00:02:51,840
genera en el mismo lugar, fijaros que estaba a puntito ya de acabar

74
00:02:51,840 --> 00:02:53,560
pero bueno, copiar código, antes

75
00:02:53,560 --> 00:02:55,520
importante, voy a guardar como la

76
00:02:55,520 --> 00:02:57,759
versión 2, antes de pegarlo, para que no me lo sustituya

77
00:02:57,759 --> 00:02:59,780
automáticamente, y pasamos de un código de 170 líneas

78
00:02:59,780 --> 00:03:01,840
a 184, bien, parece que es poco, pero vamos

79
00:03:01,840 --> 00:03:03,439
a ver si ha mejorado algo, si ha mejorado, para

80
00:03:03,439 --> 00:03:05,780
verlo antes, esto es lo que veíamos al principio, y ahora

81
00:03:05,780 --> 00:03:07,659
ya ha mejorado, juego de detectives, encuentra al ladrón

82
00:03:07,659 --> 00:03:09,860
alerta, se ha cometido un robo en una ciudad famosa, sigue las pistas

83
00:03:09,860 --> 00:03:12,080
La ciudad alberga un monumento famoso, fue construido, pues, ¿cuál sería?

84
00:03:12,139 --> 00:03:14,219
Las capitales más visitadas y cocina, queso y vino.

85
00:03:14,360 --> 00:03:14,900
Pues igual es París.

86
00:03:15,060 --> 00:03:15,560
Bien, correcto.

87
00:03:15,580 --> 00:03:16,560
La verdad es que en París has ganado un punto.

88
00:03:16,680 --> 00:03:18,740
Uy, fijaros que aquí le podemos pedir que si solo es uno lo digan en singular.

89
00:03:19,120 --> 00:03:19,360
Siguiente.

90
00:03:19,780 --> 00:03:21,180
Está en la ciudad más poblada del mundo, está en Asia.

91
00:03:21,300 --> 00:03:22,159
Aquí se trae un evento olímpico.

92
00:03:22,759 --> 00:03:23,000
Perfecto.

93
00:03:23,000 --> 00:03:23,479
En 2021.

94
00:03:23,780 --> 00:03:26,039
Los Juegos Olímpicos de 2021, que tendrían que haber sido en 2020, fueron en Tokio.

95
00:03:26,340 --> 00:03:26,539
Duda.

96
00:03:26,960 --> 00:03:27,939
Es la ciudad más poblada del mundo.

97
00:03:28,120 --> 00:03:29,719
Igual resulta que se ha equivocado en este dato y es otra.

98
00:03:29,780 --> 00:03:30,439
Lo podríamos comprobar.

99
00:03:30,439 --> 00:03:32,240
Y si está mal, pues pedirlo que lo arregle

100
00:03:32,240 --> 00:03:34,319
De hecho, lo podemos ir pidiendo o lo podemos arreglar nosotros mismos

101
00:03:34,319 --> 00:03:36,599
Si poco a poco vamos viendo el código, vemos que es bastante fácil de entender

102
00:03:36,599 --> 00:03:38,139
Fijaros que es la ciudad más poblada del mundo

103
00:03:38,139 --> 00:03:40,259
Y está en Asia, pues podríamos cambiar esto por

104
00:03:40,259 --> 00:03:42,800
Es la ciudad o es la capital del país donde nació el anime

105
00:03:42,800 --> 00:03:44,919
Podríamos tocarlo aquí, sin embargo, si editamos el código directamente

106
00:03:44,919 --> 00:03:46,759
Es muy importante después, en la IA que estamos usando

107
00:03:46,759 --> 00:03:48,599
Pues arrastrar el archivo HTML

108
00:03:48,599 --> 00:03:50,520
Con los cambios que ya hemos puesto, si no lo hemos tocado directamente

109
00:03:50,520 --> 00:03:52,219
Pues le pedimos los cambios aquí, pero si sí lo hemos tocado

110
00:03:52,219 --> 00:03:54,639
Pues obviamente la IA no sabe los cambios que hemos hecho, lo tenemos que arrastrar y soltar

111
00:03:54,639 --> 00:03:57,280
Vamos a seguir viéndolo, entiendo que está en Tokio

112
00:03:57,280 --> 00:03:59,259
Perfecto, se ha cometido un robo en la ciudad famosa

113
00:03:59,259 --> 00:04:01,020
Es la ciudad conocida por su enorme parque en medio, Central Park

114
00:04:01,020 --> 00:04:02,460
Bien, tengo dudas, ¿qué pasaría si lo pongo mal?

115
00:04:02,560 --> 00:04:04,759
Sé que es Nueva York, pero, ¿qué pasa si pongo? Ah, mira, el ladrón está en Los Ángeles

116
00:04:04,759 --> 00:04:06,139
Nueva York, sí, bien, un punto

117
00:04:06,139 --> 00:04:08,460
Podríamos pedirle que, pues, que si lo haces mal, te arreste puntos y demás

118
00:04:08,460 --> 00:04:11,139
Bien, la ciudad, por sus playas de Copacabana e Ipanema

119
00:04:11,139 --> 00:04:12,699
Pues, el mundo moderno, maravillas

120
00:04:12,699 --> 00:04:14,900
Unos carnavales más grandes, vamos a probar, si arriba de Janeiro

121
00:04:14,900 --> 00:04:16,459
Perfecto, y la última

122
00:04:16,459 --> 00:04:19,199
¿Cuál podría ser? Estambul, Atenas

123
00:04:19,199 --> 00:04:20,579
El Cairo, vamos a ver, bien

124
00:04:20,579 --> 00:04:21,379
Has ganado dos puntos

125
00:04:21,379 --> 00:04:22,139
¿Quién crees que es el ladrón?

126
00:04:22,220 --> 00:04:22,899
Pues aquí les podríamos pedir

127
00:04:22,899 --> 00:04:24,160
Un poco de información, ¿no?

128
00:04:24,220 --> 00:04:25,220
Igual es suficiente o no

129
00:04:25,220 --> 00:04:25,680
Para saberlo

130
00:04:25,680 --> 00:04:26,319
Pues yo creo que es Carlos

131
00:04:26,319 --> 00:04:27,459
Pues toma, efectivamente

132
00:04:27,459 --> 00:04:28,240
Tu condición es seis puntos

133
00:04:28,240 --> 00:04:29,199
Evidentemente es un juego muy sencillo

134
00:04:29,199 --> 00:04:31,000
Pero lo podríamos usar como base

135
00:04:31,000 --> 00:04:31,660
Para ir cambiando

136
00:04:31,660 --> 00:04:32,420
Con emojis

137
00:04:32,420 --> 00:04:32,899
Lo que va pasando

138
00:04:32,899 --> 00:04:33,339
Con escenas

139
00:04:33,339 --> 00:04:33,819
Lo que quisiéramos

140
00:04:33,819 --> 00:04:34,699
Es un muy buen ejemplo

141
00:04:34,699 --> 00:04:35,819
Sobre cómo podemos crear

142
00:04:35,819 --> 00:04:36,920
Cosas visuales divertidas

143
00:04:36,920 --> 00:04:38,000
Usando la inteligencia artificial

144
00:04:38,000 --> 00:04:38,660
Y hasta aquí este ejemplo

145
00:04:38,660 --> 00:04:39,980
Vamos a ver otros distintos

146
00:04:39,980 --> 00:04:41,060
Y yo creo que incluso

147
00:04:41,060 --> 00:04:42,079
Alguno más complejo que este

148
00:04:42,079 --> 00:04:42,540
Sigamos