Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

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 199

Preguntas 34

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃帀馃帀馃惒

Me gusto el resultado final 馃槃

No logr茅 editar el :checked 馃槮 por agluna raz贸n no lo reconoce. Por eso tuve que dejar los input visibles.
Los personajes fueron dibujados por m铆 con vectores 馃槃 Espero les guste.

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 馃

Hola!
Quisiera compartirles como va mi proyecto hasta ahora.
Cualquier comentario es bienvenido. 馃槂
.

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 馃幎

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


馃槄 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



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.

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

Aqu铆 como lo hice:

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

Este fue mi resultado final.

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

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鈥

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

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 鈥渘o 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;
}

隆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

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 鈥渆legir ataque鈥 s铆 y s贸lo s铆, la mascota ha sido seleccionada, de lo contrario, 鈥渞eload鈥.

Asi que el mio!

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茅 鈥渂ueno, 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 馃憦

Para este curso realice mi juego sobre la formula 1. D茅jenme saber sus opiniones! ![]()![](https://static.platzi.com/media/user_upload/image-131ed509-6844-454a-a516-52b7d33ff575.jpg) ![]()![]()![]()![](https://static.platzi.com/media/user_upload/image-814fe64a-c274-44ca-bd99-5c46e4d5373b.jpg)![](https://static.platzi.com/media/user_upload/image-40af55fa-fa99-4467-9714-1a751386e479.jpg)
![](https://static.platzi.com/media/user_upload/pantallamokepon-1e873098-455e-4fce-b8e7-34d3807a809d.jpg)**que tal me quedo gente?**
隆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; } ```

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. 馃鈥嶐煔

interesante
what
oki
interesting
![]()![]()![]()![](<Screen Shot 2024-01-08 at 11.59.15 AM>)
![]()
![](<Screen Shot 2024-01-08 at 11.59.15 AM Screen Shot 2024-01-08 at 11.59.42 AM>)![]()![]()![](<Screen Shot 2024-01-08 at 11.59.15 AM Screen Shot 2024-01-08 at 11.59.42 AM>)![](<Screen Shot 2024-01-08 at 11.59.15 AM>)![]()![]()