Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

Programación en Navegadores: Primeros Pasos

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de árbol en HTML

6

Instalando tu primer editor de código

7

Cómo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del código usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

¿Qué es el DOM?

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación con HTML

17

Sección de elegir mascota

18

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulación del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

¿Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

¿Quién ganó el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatomía de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Imágenes para los Mokepones

37

Estilos del botón

38

Adaptando HTML al diseño del juego

39

Layout: título y ataques

40

Adaptando JavaScript al diseño del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimización de código

44

Revisión de código

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaración lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques dinámicos por cada mascota: extraer

55

Renderizado dinámico en HTML

56

Eventos de click dinámicos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimización de código

Mapa con canvas

61

Introducción a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Imágenes y personajes de fondo

66

Métodos en las clases

67

Obstáculos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

¿Qué es backend?

72

Instalación de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisión de coordenadas

79

Mokepones dinámicos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Probando el juego en varios dispositivos

84

¿Y ahora qué curso tomar?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Detalles finales

43/84
Recursos

Aportes 219

Preguntas 35

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

🎉🎉🐲

Así quedó el mío…

Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima

Aquí les dejo Color Hunt

.

Aplicando el responsive:

Y así quedó mi juego jaja

El mio quedo asi!!

p/d: Perdon por la calidad, no se como hacer para subirlo sin que pierda la calidad de imagen

Yo lo que hice fue ponerle un borde celeste, aqui mi linea de codigo:

Hasta luego señorita Estefany 🤞

El resultado final:

En la sección de ataque creé una caja para el VS:

Para lograr el VS había que crear e insertar el elemento de imagen desde JS. Una cosa curiosa que sucedió es que, al principio, había creado unas variables globales para las imágenes, pero cuando se repetía la elección de las mismas, entre el jugador y la pc, en la caja de VS solo aparecía una imagen. Se debe a que, lógicamente, era la misma imagen, no le estaba diciendo a la pc que creara otra imagen a pesar de que era la misma. Para eso, había que declarar las variables del jugador y enemigo por separado. Es lógico, pero al principio no lo veía así. Así quedó el código:


MOKEPON

Tienes que atraparlos, mi destino así es 🎶

😅 Aun me falta lo de responsive, pero le di un toque retro con el curso de Pixel Art… ¿Qué les parece? 🤔
👉 También lo subí a la web
🔗 https://joseal.click/mokepon/mokepon.html



Muchas gracias Estefany, aprendí mucho de CSS, dejo mi trabajo final.


Así lo hice yo:


Estas son mis modificaciones, quiero agregarle un poco mas por que creo que se ve un poco vacío cuando están en el combate, pero sin duda e emprendido mucho haciendo mis modificaciones.

CSS me costó el triple de Java y HTML pero al final lo logré y así quedó, estoy muy agradecido con este curso!!
mi re

encontre este "input:checked + label {
background-image: linear-gradient(blue, yellow);
}"
Para hacer un fondo en degrade de varios colores

Este fue mi resultado final.

Oh, pero que gran viaje fue este, enserio me encanto y fue muy importante para mi y enserio logre aprender cosas que nunca me imagine que entendería y logre cosas que nunca pensé que haría, aun me falta mucho camino pero agradezco lo que platzi me ha dado y estare agradecido toda mi vida con ustedes de platzi por darme ayudarme a entender estas increibles herramientas que son HTML, CSS y JavaScrip

Este es mi proyecto, al principio segui los pasos de los profesores al pie de la letra, en algunos casos pequeños intentaba hacerlo por mi cuenta y poca veces me funcionaban pero igual aprendia de los errores. Pero ya en la clase 36 o 37, me dije a mi mismo que no queria copiarme y seguirle de la mano a la profesora, que hizo un gran trabajo y es muy buena, pero ya para este punto me senti con la confianza suficiente para emprender por mi mismo, y rehíce casi todo el CSS, cambiando los Mokepones por los miticos y legendarios NINJAS DEL CARD-JITSU, el minijuego del inolvidable Club Penguin, asi que cambio todo mi CSS y gran parte de mi codigo de JS porque quise cambiar todos los nombres y otros detalles en pos de unas mejores visuals.

Y mi proyecto termino asi, estoy muy orgulloso y feliz de lo bien que me quedo, gracias nuevamente a Platzi y seguire trabajando para volverme el mejor Maestro mokep…, digo volverme un programador competente.
Aca se ve funcionando la Pseudo-Clase Hover en las cartas de mis ninjas

Y aqui cuando seleccionas a uno de ellos cambia de color

Tambien agregue por mi cuenta un tutorial que se abre cuando le das click al boton que dice tutorial

Y luego lo mas importante, el combate, le agrege unas Box Shadow a las tarjeta del jugador que cambia segun tu ninja para que se vea mas bonita y única, y lo que mas me costo fue que la carta de pareciera a las cartas originales del Card-Jitsu, y tambien al rival aunque siempre es roja para diferenciarlo del tuyo. y le agrege mas hovers a los botones de ataques, y tambien active, y simplifique a lo maximo la caja de comentarios, quite los nombres de tu eleccion y del rival, y solo se colocan los ataques elegidos y el resultado del combate, con colores para cada resultado del combate, si pierdes rojo, si ganas verde, y si empata amarillo.

Y aunque no se nota, el que pierde el combate se desvanece gracias a un opacity “0” y a un transition “1s”, se bloquean y se vuelven trasparentes los botones de ataques y aparece el mensaje final con mucho box Shadow, si ganas el combate es amarillo, y si pierdes es un color vinotinto muy opaco.

Disculpen si es muy largo pero es que estoy muy emocionado, aun no he terminado del todo este proyecto, estoy pensando en agregarle las mecanicas del Card-Jitsu, si se acuerdan los que la jugaron, para ganar un duelo debes ganar 3 enfrentamientos y con el mismo elemento, y o los tres elementos diferentes, pero con el mismo color. Quiero que para ganar un duelo debas reunir 3 cartas del mismo elemento, obligandote a ti a arriesgarte y usar el mismo elemento varias veces. Deséenme suerte…

Y Hasta el final de la clase de hoy asi va el proyecto:

  1. Pagina Principal - Implementando pseudoclases hoover, active y checked.

  2. Pagina del combate, usando flex y grid para ubicar los elementos.

  3. Definicion del combate resultado de las rondas y boton reiniciar.

Aun falta ultimar detalles de nombres y otros detallitos del responsive design, pero realmente el curso es increible y la profe super clara 💪🏻💪🏻💪🏻

Como yo le puse una imagen de fondo diferente para cada mascota (background-image), tuve que hacer que al seleccionar una de ellas cambie el color del borde (border-color), ya que esta imagen de fondo tapaba al background-color que usa Teff y “no pasaba nada” al seleccionarlos. Como ya dije. La imagen de fondo tapaba a mi background-color. CREO

input {
  display: none;
}
input:checked + label.tarjeta-de-mokepon-hipodoge {
  border-color: #2f00ff;
}
input:checked + label.tarjeta-de-mokepon-capipepo {
  border-color: #43a800;
}
input:checked + label.tarjeta-de-mokepon-ratigueya {
  border-color: #ff0000;
}

Aquí como lo hice:

input:checked + label{
    background-color: #A1E3D8;
    border: 5px solid #069A8E;
}

Agregue un box shadow al label que seleccionen para hacerlo un poco mas estetico a mi parecer 😁

¡Hola a todos/as! Acabo de terminar mi juego y estoy muy contenta con el resultado, os muestro cómo me quedó.

Espero que os guste, ¡un saludo!

Me ha gustado investigar y repensar mucho el código para conseguir detalles y que quede lo más cercano a lo esperado, aquí dejo mi resultado! 😄
 

Diseño en PC



 

Diseño responsive


Asi me quedo.!

Mokepon


A quien guste jugarlo le comparto el link:

Lo seguiré actualizando según vaya avanzando en el curso.

Se acepta feedback.


  • Desktop

  • Móvil

asi va quedando que clases tan geniales jajaja

Envio mi aporte: "Microsoft contratame estoy listo" XD ![](https://static.platzi.com/media/user_upload/Pagina%20pokemon%2011-d5913b08-b488-42a3-aaf8-b15842602d3b.jpg)

Hola!! me encanta como va quedando, estoy aprendiendo mucho con platzi y con los aportes de todos los estudiantes . Acá les mando mi avance!

Así llevo el juego, gracias profesora

body {
    font-family: 'Poppins', sans-serif;
    background-color: #630606;
    background-image: url("./assets/fondo.jpg");
    background-size: cover;
    background-repeat:no-repeat;
    background-attachment: fixed;
}


Fue un trabajo duro.

Requirió investigaciones varias y muchas modificaciones pero aquí esta. Ja, ja.
(El Responsive Design sí funciona solo la primera imagen es para ver a los 3 pokemones. Ja, ja.)

Resultado Final

Que maravilloso poder darle vida a nuestro juego. Gracias Teff!
Algo que implemente fue que sólo se mostrara la vista de “elegir ataque” sí y sólo sí, la mascota ha sido seleccionada, de lo contrario, “reload”.

Asi que el mio!

input { display: none; } input:checked + #hipodoge-agua-c1{ background-color: #22b8f5; } input:checked + #capipepo-tierra-c2{ background-color: #a54f1d; } input:checked + #ratigueya-fuego-c3{ background-color: #f55822; } ![](https://static.platzi.com/media/user_upload/image-4eaf5ccc-0a91-41a0-9968-83b9637ddc41.jpg)
esta función permite agregar color cada input cuando selecciones el mokepon y se debe agregar un id en cada \<label><;/label> html: \<label class="tarjeta-de-mokepon" id="hipodoge-agua-c1" for="hipodoge"> ![](https://static.platzi.com/media/user_upload/image-5cb3b07d-2d66-4051-b330-675981085ffd.jpg) css: input { display: none; } input:checked + #hipodoge-agua-c1{ background-color: #22b8f5; } input:checked + #capipepo-tierra-c2{ background-color: #a54f1d; }input:checked + #ratigueya-fuego-c3{ background-color: #f55822; }
oigan les falto hacer que no se pueda avansar sin escojer mascota
Les comparto mi juego. Saludos. ![](https://static.platzi.com/media/user_upload/JUEGO-c0455713-0263-4598-b114-9c66050b1df7.jpg)
Ojalá sea de su agrado. ![](https://static.platzi.com/media/user_upload/image-94b3809e-bf9c-435f-a7e1-0c93ebca52f2.jpg) ![](https://static.platzi.com/media/user_upload/image-77e0d338-5d21-465a-b8ae-fb2158ece10b.jpg)
¡Hola 🌻! con `:hover` pueden usar `cursor: pointer;` para que les aparezca una manita cuando tengan el ratón encima 🚀 ```js #boton-mascota:hover { background-color: var(--palepink); cursor: pointer; } ```
Mi avance 🐣 ![](https://static.platzi.com/media/user_upload/image-0b851c5c-2019-4305-a41c-16f5928a0481.jpg)

Así quedó la interfaz de mi juego de Mokepón:

Las imágenes de los demás mokepónes y de los mokepónes en miniatura las tomé prestada de un proyecto de Moképon que encontre en Google. 🧑‍🚀

multiverse jajaja

Me encanta como explican los profesores de Platzi, a pesar de ser nueva en todo este mundo les entiendo todo 😉
Enserio, muchas gracias

Bueno asi quedo mi juego por ahora. Espero les guste, se que tengo cosas que mejorar pero bueno de a poco.

xd por error ya esto lo había hecho desde el principio lo peor es que lo hice sin saber solo por comodidad visual

nombres inventados con el maravilloso don de la creatividad

Gracias a todos en platzi.
Nada es imposible.


Validar si no se selecciona una mascota😎💻 :

Algo que se les paso por alto que incluso la bella profe lo hacia, es que el flujo continua incluso sin seleccionar la macota y eso no estaría del todo bien. Asi que mi solución fue volver a llamar a la funcion de recargar la pagina en el boton de seleccionar mascota, si no se seleccionó una mascota y damos continuar esta me botara un mensaje de alerta que necesito seleccionar una mascota y se procede a recargar la pagina, y no me deja continuar sin haber seleccionado a la mascota. Espero sirva este aporte. 😉

//Eligiendo al digimon del jugador 
function seleccionarDigimonJugador(){
    let seleccionarDigimon = document.getElementById('seleccionar-digimon');
    seleccionarDigimon.style.display = 'none';
    
    let seleccionarAtaque = document.getElementById('seleccionar-ataque');
    seleccionarAtaque.style.display = 'flex';

    let inputDigimonEmymon = document.getElementById('emymon');
    let inputDigimonShangamon = document.getElementById('shangamon');
    let inputDigimonViramon = document.getElementById('viramon');
    
    let spanDigimonJugador = document.getElementById('digimon-jugador');

    if(inputDigimonEmymon.checked){
        spanDigimonJugador.innerHTML = 'EMYMON';//metodo para manipular el DOM
        seleccionarDigimonEnemigo()
    } else if(inputDigimonShangamon.checked){
        spanDigimonJugador.innerHTML = 'SHANGAMON';
        seleccionarDigimonEnemigo()
    }else if(inputDigimonViramon.checked){
        spanDigimonJugador.innerHTML = 'VIRAMON';
        seleccionarDigimonEnemigo()
    }else{
        alert('Ups!❌ Debes seleccionar a un Digimon.');
        reiniciarJuego();/*si no selecciono mascota reinicia la pagina*/
    }
}

Aqui esta mi diseño de la aplicacion del videojuego. Espero que sea de su agrado. Algunos estilos los personalize yo.
Desktop:
![](
![](
![](
Phone:
![](
![](

Gracias profe! Su módulo fue genial, aprendí muchas cosas nuevas y nos dio muchas ideas para seguir en este camino.

Muchas gracias por las clases profe Estefany

En mi caso, me aventuré a replicar lo que he aprendido en el proceso, agregando una nueva columna que refleja el resultado de cada ronda de manera visual.

Les comparto mi resultado final!

💧🔥🌱🎉


Así va quedando mi juego, cordialmente invitados a probarlo 😊😊

https://cquiroga.github.io/mokepon.html

Todo un reto empezar en este tema de la programación, pero es muy enriquecedor ¡lo disfruto!, voy avanzando en el proceso pero cambie la temática de la pagina, la enfoque en un juego de pelea de gatas y metí a las gatas que tengo. Al dar click a un label aparece una gata diferente, los michis dominaran el mundo!

Yo lo que hice fue separar los contenedores el de las imgs de los textos, y para relacionarlos y que cuando ejemplo hipodoge fuera seleccionado se mostrara como si fuera hover

Muchas Gracias Estefany aprendi mucho con tus clases!!!

Mi proyecto en Github.

Pseudoclasess CSS

excelente profesora, muy clara y agradable

aporto mi trabajo jeje

A la 3ra la vencida, hasta pronto profeeee!!!

AME ESTE MODULO!! Nunca nadie me explicó tan bien CSS

Algo importante para tener en cuenta es que debe usarse sobre clases o sobre etiquetas, en esta caso la etiqueta botón

button:hover{
    background-color: rgb(9, 125, 11);
}

O una pequeña modificación a la etiqueta tarjetas junto con la clase input

.tarjeta-de-mokepon:hover {
    background-color: rgb(235, 169, 83);   
    cursor: pointer;
}

input:checked + label{
    background-color: rgb(255, 145, 0);  
}

input{
    display: none;
}

En este último código, cambia de color la tarjeta cuando se pasa el mouse y se queda de un color similar para indicar que está seleccionado

Gracias profe su metodología para enseñar es muy practica y fácil de entender

Mi proyecto va quedando de esta forma:


En GitHub: https://github.com/FredyBarrantes/HtmlCssJavascript

Bueno así va quedando el mío, las imágenes de los pokemones que uso en las miniaturas son de TerminalMontage
Los critical hits, y la tabla de tipos (súper efectivo, poco efectivo) están funcionando similar al juego original, me falta agregar los doble tipos y más tipos de movimientos pero para eso el código se hace muy complicado así que por el momento solo manejo un tipo para mantener el código simple. Pueden probar el juego acá

Muchisimas gracias! Curso espectacular. Profesores de alto nivel : profesional, emocional, carismatico y un largo etc. Voy poco a poco para llegar lejos. Seguimos… hay mucho que estudiar.

Amoooo la programacioooooon. El cielo es el limiteeeee.

Así quedo el mio,
El menú de selección, las mascotas y el fondo se mueven ya que son .gif

y esta es la sección del combate.

Me quedo asi!!

Así va quedando mi juego hasta ahora


Gracias ! , 🎉

Así lo hice yo

yo solucion no fue cambiaar el color si no activar el borde de la tartega con un color

Las primeras clases viendo el posicionamiento pensé “bueno, backend es otra buena opción” pero la profe es una genia y al final me termino gustando bastante todo el tema de css…
Les dejo el link al github para que lo chusmeen y dejen feedback !

https://diegosei.github.io/mokepon-game/

Este ha sido un curso increíble, sin duda hemos visto un montón de temas.

👏 Estefany 👏

![](https://static.platzi.com/media/user_upload/image-77ae1652-6ce5-432f-b5aa-21086abc015b.jpg)asi va quedando
![](https://static.platzi.com/media/user_upload/image-41b12e3c-1157-4307-bcc5-23ed9678a0f8.jpg) :D
Holaa,por fin termino mi juego, me falta mejorarlo pero aquí nunca se para de aprender ![](https://static.platzi.com/media/user_upload/image-5d80da93-5b84-4026-a1db-b264bb68e295.jpg)![](https://static.platzi.com/media/user_upload/image-a83360dc-0c2d-48c3-b559-94b13190c433.jpg)
![](https://static.platzi.com/media/user_upload/image-5d5f1ae7-d4b2-4164-a1c0-b9e4606b06a3.jpg) ![](https://static.platzi.com/media/user_upload/image-b91e67ee-e956-4917-b0b2-2eb22f8a4bc7.jpg) ![](https://static.platzi.com/media/user_upload/image-57d68054-11b6-413e-9848-e43999ec6670.jpg)
![](https://static.platzi.com/media/user_upload/image-f7999d03-4d52-4cc4-afa5-c413902a6ed7.jpg)
Muchas gracias, excelente módulo.