Desplegando el juego a GitHub Pages

Clase 21 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Angel David Velasco Bonifaz

student•

Ya después de una mejoras, quedó listo, agregue modales, y una tabla de records, donde puedes dejar en qué tiempo lo haces, le hice persistencia de datos para que puedas guardar tu nombre y pais. https://angelvelasco29.github.io/Videojuego/ y mi repositorio https://github.com/AngelVelasco29/Videojuego

Andrés Toledo Margalef

student•

La tabla de records me pareció el agregado mas adictivo. Firma Toletole, desde Argentina

Alessandro Vido

student•

Este fue mi resultado.

https://vidoalessandro.github.io/10-Learning-NASA-vs-UFOS-Game/

Invertí mucho en el detalle del juego (el tamaño, las proporciones simétricas, las colisiones, el diseño de interfáz y la temática en sí misma). Luego le iré agregando más niveles personalizados pero lo importante es que le di mi toque y aprendí mucho!

Aaron Santiago Loyo Zabala

student•

HERMOSOOOOO

Erick Salas

student•

Hola! :), este es mi proyecto, le agregué un par de modales para que sea un poco más interactivo con el usuario, espero les guste. :)

Link: https://ericksalasg.github.io/taller-js-videojuego/

Repo: https://github.com/ericksalasg/taller-js-videojuego

Duvan Yesid Becerra Rodríguez

student•

Está genial la idea de bajar el font size en game.font para que no se vean pegados los emojis. En mi caso yo modifique a elementSize y se ven super pegados😅

marco antonio

student•

para ser la primera vez que uso JavaScript no estuvo tan mal en fin espero les guste mi versión del jueguito

esta es la url del juguito ya desplegado, jeje es mi primera ves que desplego un page en github.
si quieren curiosear mi código se los dejo en mi github 😉

Juan Castro

teacher•

Duuuuude me encanta!!!

marco antonio

student•

(*w*) gracias @juandc al principio tuve algunos inconvenientes con múltiples ejecuciones del setInterval en paralelo así que tuve que diseñar una función que pudiera matar los hilos al momento de ser solicitado por otras funciones y que estas las pudieran usar

Frandel Corporan Rodríguez

student•

Un Alien está perdido en el espacio y necesita de tu ayuda para poder llegar su planeta muy pronto porque una lluvia de meteoritos presenta una amenaza latente y quiere salvar su hogar.

Vive esta aventura junto a este ser en tiempo récord. Ah y ¡Cuidado con los asteroides!

Try Now: https://frandeldev.github.io/minijuego/ Repository: https://github.com/FrandelDev/minijuego/tree/main

Hector Maluy Fernandez

student•

Mi proyecto ya en github: https://hectormaluy.github.io/nuevo-juego-javascript/

Guadalupe Monge Barale

student•

Aquí dejo el Juego 👈 .

👉 Repo . .

Juan Castro

teacher•

Flujo perfecto de jugabilidad en el juego y usabilidad en la app. :ok_hand::clap:

Guadalupe Monge Barale

student•

Gracias, profe. Me encantan sus cursos y que siempre sea tan atento y responda a nuestros comentarios o preguntas. 10 / 10

Edgardo Luis Jimenez Nuñez

student•

Este es mi Juego: https://edgardoluisjimenez.github.io/taller-practico-javascript-videogames/ Github: https://github.com/EdgardoLuisJimenez/taller-practico-javascript-videogames

Le añadi unos layout de inicio y game over, quiero ir modificando algunas cosas en el futuro pero por ahora asi quedo.

Gino Llano

student•

Hola! Hice que los mapas se generen de forma aleatoria y cambié la lógica del juego para pasar de nivel. Link: https://gino-llano.github.io/taller-javascript-videojuegos/index.html Repo: https://github.com/gino-llano/taller-javascript-videojuegos/settings/pages

Juan Castro

teacher•

Duuuuude me encanta!!!!

Alexander Florez

student•

Este es mi primer primer proyecto de un video Juego, todavia quedan varias mejoras al juego:

https://aflorez625.github.io/Video_Games/

https://github.com/aflorez625/Video_Games/tree/master

Muy buen taller, estuvo interesante, gracias Juan David, eres un buen profesor, con muy buena actitud.

César Augusto Cortés Labrada

student•

Que gran curso; he jugado video juegos durante más de 20 años y este es primer juego que construyo por código; es el principio de cumplir muchas metas = ) Comparto mi proyecto y el código, los retos estuvieron geniales. Link: https://maeno323.github.io/videoGame-Race/ Repo:https://github.com/Maeno323/videoGame-Race

Juan Castro

teacher•

Me encantan los niveles más avanzados :clap:

Enrique Aguilera

student•

Aqui les presento mi proyecto terminado, yo realice el proyecto utilizando clases, y gracias a que utilice typescript prácticamente no tuve ningún error de tipado, pero si tuve errores en el contexto de this, ya que en algunas partes this hacia referencia a una instancia y en otras partes hacia referencia al objeto global windows, y luego de varias horas de bebuggear pude solucionar todos mis errores.

También le agregue un mensaje que dice “Ganaste!” al finalizar el juego, y una vez que pierdes todas las vidas todas las bombas explotan.

Deploy: https://tesapoeitor.github.io/platzi-videogame/ Repositorio: https://github.com/tesapoeitor/platzi-videogame

Enrique Illescas Castillo

student•

Mi proyecto final repositorio : https://github.com/EnriqueIllexas/curso-videojuego git hub pages: https://enriqueillexas.github.io/curso-videojuego/

![](

JORGE MANRIQUE CHAVARRO

student•

Hola comparto mi proyecto.

Jugar Repositorio

José Fernando Fuentes Roa

student•

Hola a todos, acá está el resultado de mi juego:

Le agregué la opción de que cuando el jugador choque con las bombas, estas estallen y queden así hasta que pierda o gane el juego.
También, logré hacer que el tamaño del canvas sea entero y que la posición de los elementos sea de acuerdo a la cuadrícula 10x10 del mapa y no al tamaño relativo de cada elemento.
El juego se reinicia con cualquier tecla una vez se gane o se pierda.
También registra el tiempo con exactitud.

Espero que les guste 🤭 El juego está deplegado acá. Y el código está en mi GitHub

Stivenson David Mejia Palacios

student•

Hola José excelente proyecto!! ¿como le haces para subir gift a los comentarios?

José Fernando Fuentes Roa

student•

Hola stivenson. Para subir gifs en los comentarios es exactamente el mismo método para subir imágenes. Guardas la imagen en tu PC y luego la arrastras a la sección del comentario. Busca en Google "Como subir imagenes a comentarios platzi" y ahí te aparece el proceso detallado. Saludos.

Elam Vera

student•

Lo hice! https://aiermero.github.io/videogame_js/ , El canvas si es algo confuso pero se entendio todo!

Adan Saavedra

student•

Mi proyecto: https://adansaavedra.github.io/practico-js-vg/

PiPe Ramirez

student•

https://github.com/Pipe-Ramirez/Juego.git

Miguel Angel Suarez Forero

student•

Asi quedo mi proyecto!! javascript-videogame desplegado en netlify, funcionalmente esta full se puede jugar con las flechas, los botones y las letras a,w,s,d tanto en minuscula como en minuscula, 3 botones adicionales para iniciar el juego, pausarlo y resetearlo, tengo algunos pendientes como mostrar el nivel en el que esta, una animación cuando se pierden todas las vidas y un modal con las instrucciones del juego, tiene responsive design y un link al repositorio. Muy buen curso para fortalecer las habilidades basicas de javascript!!

Juan Castro

teacher•

Me encanta que se pueda pausar el tiempo. :clap:

Donovan RM

student•

jejeje pues viendo los proyectos de los otros hermanos, me dí cuenta que me falta trabajarle mas xD, pero bueno, le mejoraré cuando tenga más tiempo, mientras les dejo lo realizado. https://ingdonovan.github.io/VideoJuego-JS/

Desplegando el juego a GitHub Pages

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones

Detectando colisiones fijas

Detectando colisiones con arrays

Victoria: subiendo de nivel

Derrota: perdiendo vidas

Bonus: adictividad

Sistema de vidas y corazones

Sistema de tiempo y puntajes

¿Qué es localStorage?

Guardando records del jugador

Deploy

Depurando errores del juego

Desplegando el juego a GitHub Pages

Próximos pasos

Reto: reinicio del juego

Reto: timeouts de victoria o derrota

¿Quieres un simulador laboral?