Cómo crear un juego usando chatgpt sin conocer ningún código

Una inmersión profunda en la creación de un juego de JavaScript sin programación

Cuando ChatGPT se lanzó a fines de 2022, causó un gran revuelo entre millones de personas en todo el mundo debido a sus capacidades. He visto personalmente las reacciones de las personas que lo usan e interactúan con GPT muchas veces. Incluso puede parecer surrealista para algunas personas crear un juego con ChatGPT sin escribir código, pero ahora es posible.

Si nunca antes había oído hablar de él, ChatGPT es una herramienta de inteligencia artificial súper poderosa creada por OpenAI, una compañía fundada en San Francisco a fines de 2015 por Sam Altman, Ilon Musk y otros.

En esta publicación, vamos a crear un juego de JavaScript sin escribir un solo código.¿Cómo pudo pasar esto?¡Vamos a recibir ayuda de ChatGPT! Si después de leer esta publicación cree que algunos trabajos pueden no ser necesarios en el futuro, eso es completamente comprensible.

En la Parte 2 de esta serie, te mostraré cómo publicar el juego que creamos con ChatGPT en la web para que cualquiera pueda acceder y jugarlo. De esa manera, puedes compartir tu juego de código AI con tus amigos y pasar un buen rato.

Finalmente, es mejor tener algún conocimiento práctico de JavaScript. Sin embargo, incluso si no está familiarizado con él o es un principiante completo, aún puede seguir la mayor parte de esta publicación. Y eso es en lo que Chatgpt es bueno.

Cómo crear un juego usando chatgpt

Este será un juego bastante simple en el que un robot se mueve y deja caer bombas en las criaturas debajo de él. Si las criaturas tocan las bombas, desaparecen. Creo que este ejemplo le dará pistas sobre lo que puede crear con esta IA súper potente.

Esta es la primera parte de una serie de dos partes. Esta publicación cubrirá los siguientes temas:

  • 1. Descripción general/estructura del proyecto: una descripción general de alto nivel del proyecto.
  • 2. Interfaño con ChatGPT: describiremos nuestro juego deseado para ChatGPT e implementaremos el código generado por él.
  • 3- Pruebas de código: probaremos nuestro juego, haremos ajustes y mejoraremos su apariencia.

Como se mencionó anteriormente, cubrimos publicar este juego en la web en la Parte 2.

1. Descripción general/estructura del proyecto

Usé el editor VSCode, pero puedes usar cualquier editor que prefiera. También recomiendo instalar la extensión del servidor en vivo en VScode para probar fácilmente la aplicación.

Solo necesitamos archivos index. html e index. js para ejecutar esta aplicación. Así es como se ve la estructura de mi proyecto:

Creé una nueva carpeta llamada «Ejemplo-chatgpt-game», la abrí en VScode y dentro de la carpeta creé dos nuevos archivos llamados «index. html» y «index. js».

Creación de una estructura predeterminada para un juego de chatgpt en VScode para crear un juego usando chatgpt

Ahora necesitamos la estructura HTML predeterminada dentro del archivo index. html. Podríamos obtener esto de CHATGPT, pero por simplicidad lo acabo de agregar con un fragmento de código.

Agregar estructura predeterminada al archivo index. html usando el fragmento de código

Para conectarse al archivo index. js, necesitamos agregar el siguiente fragmento al archivo index. html justo debajo de la etiqueta de cuerpo de cierre ()

Agregue una conexión index. js al archivo index. html

2. Interactuar con chatgpt

Ahora estableceremos una conexión con ChatGPT y solicitaremos el código que necesitamos. Empecemos.

Para cualquiera que esté interesado, he incluido la primera solicitud que usé a continuación.

Escríbeme un juego de JavaScript cuando el robot se mueva y deja bombas, no use HTML, dame el código para el juego en partes

Pídale a Chatgpt que escriba un juego de JavaScript

Comenzó a escribir el código y explicar cada parte y el propósito de usarlo.

La primera respuesta de Chatgpt para el juego JavaScript

Simplemente copié y pegé el código en un archivo index. js creado previamente. Todo lo que se necesita es copiar y pegar el código.

Insertar código en el archivo index. js para crear un juego usando chatgpt

Al pedirle a ChatGPT que proporcione el código en fragmentos pequeños, puedo copiarlo y pegarlo fácilmente en el archivo correcto. Esto hace que mi trabajo sea más fácil.

Chatgpt escribiendo código para controlar el movimiento en el juego

Observe cómo incluye la documentación para cada pieza de código que escribe. Eso es impresionante.

ChatGPT continúa escribiendo código para el juego

Se ha trasladado a la Parte 4. Continúo copiando y pegando el código según sea necesario.

Chatgpt escribiendo un juego de JavaScript, Parte 4

En este punto, ChatGPT se ha detenido. Noto que falta parte del código y pido que continúe con la Parte 5.

Chatgpt escribe un juego de JavaScript, Parte 5

Chatgpt parece haber realizado su tarea. Antes de proceder a ver el resultado, asegúrese de que todo el código proporcionado se copie al archivo index. js.

ChatGPT escribe un juego de JavaScript, Parte 5 (continuación)

3- Probar el código

Para probar el código que se ha escrito hasta ahora, planeo usar la extensión VSCode Live. Esta extensión le permite ejecutar la aplicación en un servidor local. Después de instalar la extensión, puede hacer clic con el botón derecho en el archivo index. html y seleccionar «abrir con servidor en vivo» para ejecutarlo. Esto nos facilita la vida.

Probar el juego usando la extensión del servidor VSCode Live

Cuando realizo esta acción, mi aplicación se abre en un navegador y veo un cuadrado rojo que se puede mover en cualquier dirección usando las teclas de flecha en mi teclado. Escucho tu voz diciendo que no se siente como un juego. Entiendo, pero no pierdas la esperanza, ya que tiene mucho potencial, como verás pronto.

Vista previa de GIF del juego escrito hasta ahora en el navegador

Así que decidí dar comentarios de ChatGPT de que el juego no está completamente finalizado. Le mencioné que se supone que las bombas deben caer.

Pídale a ChatGPT que agregue funcionalidad al juego

Él recibe y procesa mis comentarios rápidamente y hace algunos ajustes al código.

chatgpt para hacer ajustes al código según lo desee

Bien, eso tiene sentido. Sin embargo, siento un problema con el código conocido como «olor a código», que se refiere a una programación mala o defectuosa que se vuelve difícil de entender a medida que aumenta el tamaño. Por lo tanto, proporciono los siguientes comentarios adicionales:

Pídale a ChatGPT que mejore el código

Después de un tiempo, deja de sorprenderte con sus capacidades. Quiero que considere que puede hacer tales ajustes o mejoras en el código si así lo desea. Los desarrolladores experimentados comprenderán mi emoción por esto.

Como se mencionó, los cambios se hicieron rápidamente y seguí copiando el código proporcionado y pegándolo en el archivo index. js según sea necesario.

Volverá a probar ahora.

Archivo GIF que muestra la funcionalidad adicional del juego.

Ok, ahora funciona bien. Sin embargo, todavía faltan algunos elementos en el juego. Sería más interesante si hubiera criaturas que pudiera golpear. Así que le pido a ChatGPT que agregue algunas gallinas al juego.

Pídale a ChatGPT que agregue gallinas al juego Respuesta de Chatgpt sobre agregar pollos al juego Responder a Chatgpt sobre agregar pollos al juego, Parte 2 Respuesta de Chatgpt sobre agregar pollo al juego, Parte 3

Hice mi tarea nuevamente copiando y pegando el código en el archivo index. js. Después de eso, estoy probando nuevamente.

Un GIF que muestra el juego en el navegador con los pollos agregados.

Quiero que el juego sea más atractivo visualmente. Así que solicito que la IA haga que los pollos tengan colores asignados al azar y diferentes velocidades.

Pídale a ChatGPT que mejore el aspecto del juego Responder a Chatgpt para mejorar el aspecto del juego La respuesta de Chatgpt para mejorar el aspecto del juego parte2

Después de implementar este código en mi proyecto, me detuve aquí.

un GIF que muestra el juego en el navegador con pollos agregados de diferentes velocidades y colores

Noté que los llamados pollos no desaparecen cuando son golpeados. Por lo tanto, solicito que esto se solucione.

Pídale a Chatgpt que haga que las gallinas en el juego desaparezcan en el impacto Responder a Chatgpt por hacer que las gallinas en el juego desaparezcan en el impacto La respuesta de Chatgpt para hacer que las gallinas en el juego desaparezcan cuando hacen clic en la Parte 2

Creo que esto se ha mejorado ahora.

GIF mostrando el juego escrito en el navegador

Después de asegurarme de que el juego funcione correctamente, paso tiempo con ChatGPT mejorando el aspecto del juego.

Pídale a ChatGPT que mejore la apariencia de los personajes en el juego Pídale a ChatGPT que mejore la apariencia de los personajes en el juego parte2 GIF mostrando el juego con apariencia mejorada

Estoy probando la aplicación y constantemente dejando comentarios al respecto.

Pídale a ChatGPT que haga ajustes a la apariencia Pídale a ChatGPT que mejore el aspecto de los personajes en el juego Parte 2

Sabes que dirigir el chatgpt para codificar es muy eficiente y se puede usar tanto como quieras.

Después de completar las modificaciones finales, tengo el siguiente juego.

GIF mostrando la versión final del juego

Hay espacio para el crecimiento y el desarrollo en este juego. Una posibilidad es introducir un sistema de puntuación que cuente el número de pollos golpeados. También se podría implementar una característica de temporizador, lo que permite a los jugadores competir contra el tiempo para completar el juego. Alternativamente, podría considerar agregar jugadores competidores a la mezcla para una experiencia más competitiva. Dejo esto a tu discreción. Simplemente deje que Chatgpt conozca sus ideas y tome las medidas necesarias para hacerlas realidad.

Conclusión

¡¡¡Felicidades!!! Has creado con éxito un juego de navegador usando CHATGPT, incluso si no tienes experiencia en programación.

Si bien este es un ejemplo simple, ilustra el potencial de crecimiento y mejora. Las posibilidades son infinitas siempre que tenga soporte de IA.

Esta tecnología puede mejorar su código y agregar nuevas funciones en función de sus preferencias y puede proporcionar explicaciones para cada aspecto del código si lo desea. Creo que incluso los desarrolladores superiores aprovecharán esta tecnología.

En la Parte 2 de esta serie, discutimos cómo publicar este juego en línea de forma gratuita.

¿Tiene usted alguna pregunta?¿Está intimidado por el aumento de la competencia en el mercado debido al apoyo del desarrollador de ChatGPT? Deja un comentario a continuación.

Chat GPT: red neuronal en español. servicio online en españa