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

Layout: título y ataques

39/84
Recursos

Aportes 267

Preguntas 61

Ordenar por:

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

💜💜

Un pequeño aporte, para agregar un fondo y que se vea fashion pueden usar el siguiente código

En la etiqueta body de su CSS agregan esas líneas, deben tener la imagen de fondo que desean en la carpeta o llegar a ella con el método que vimos en clases anteriores y listo

body {
    font-family: 'Russo One', sans-serif;
    background-image: url(./fondo.jpg);
    background-size: cover;
}

🔥🔥🔥🔥🔥

Hola,

Las fuentes utilizadas una de google fonts, Press Start, y encontré otra llamada pokemon-solid.

Los mismos estilos de la pantalla anterior me sirvieron para esta.

Ahi vaaaaaa :3

ahi va quedando jajaj

Mi resultado! aprendiendo un poco mas en cada clase!

😝 Con toda la actitud! 💪

Tal vez no es la gran cosa pero me gustó mucho mi resultado

empiesa a tomar mas forma 💖

Son mis gatos c:

La verdad me hubiera gustado haber planeado antes el juego XD, se me hace un 8 la cabeza revisando que tengo que borrar o mover en el Js y el css por cada cambio que hago. Me queda de experiencia y de hecho me gustaría hacer una versión 2.0 luego de terminado el curso.

🔥💖

Así quedo: 💚.💚



  • Me obsesioné un poco, pero el resultado obtenido por el momento me encanto. Me tardé más o menos 8 horas repartidas en 2 semanas aproximadamente.
  • Use muchas de las herramientas que nos dio la profesora y tuve que investigar y practicar algunas cosas.

Me gustaría que me comenten que les pareció. También estaría genial que me den su Feedback, creo que puedo hacer más cosas, pero por el momento es hora de seguir con las siguientes clases.

Mi aporte y mi código.
Saludos !!

<code> 
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    font-family: 'Press Start 2P', cursive;
    background-image: url("assets/descarga.jpg");
    background-repeat: no-repeat;   
    background-size: cover;
    background-attachment: fixed;
}

#seleccionar-mascota {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titulo {
    font-size: 60px;
    text-align: center;
    color: black;
    width: 533px;
    height: 50px;
    text-align: center;
    align-items: center;
}

.subtitulo {
    font-size: 24px;
    display: flex;
    padding: 20px;
    border-radius: 20px;
    color: black;
    background-color: rgba(255, 214, 186, 0.3);
}

.tarjetas {
    display: flex;
}

.tarjeta-de-mokepon {
    width: 210px;
    height: 177px;
    background-color: rgba(255, 214, 186, 0.7);
    color: #89B0AE;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
    border: 1px solid #89B0AE;
    border-radius: 20px;
}

.tarjeta-de-mokepon img {
    width: 119px;
    height: 113px;
}

#boton-mascota {
    border-radius: 20px;
    width: 190px;
    height: 60px;
    margin-top: 30px;
    background-color: rgba(255, 214, 186, 0.5);
    border: 2px solid #89B0AE;
    padding: 20px;
    font-family: 'Press Start 2P', cursive;
}

input {
    display: none;
}

#seleccionar-ataque {
    flex-direction: column;
    align-items: center;
}

.boton-ataque {
    border-radius: 20px;
    width: 190px;
    height: 60px;
    margin-top: 30px;
    background-color: rgba(255, 214, 186, 0.5);
    border: 2px solid #89B0AE;
    padding: 20px;
    font-family: 'Press Start 2P', cursive;
}

Por el momento mi Mokepon va asi:

Así voy de momento, estoy muy emocionada por como está quedando, gracias por aportarnos tu conocimiento y hacerlo posible ❤️.

😃

Algo es algo, mire algunos y estan muy buenos mal

mi codigo:

@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');

body {
    font-family: 'Silkscreen', cursive;
    /* background-color: #100F0F; */
    background-image: url(https://c.wallhere.com/photos/76/43/clouds_dark_blue_stripes_abstract-199322.jpg!d);
    height: 100vh;
    background-repeat: repeat; 
}

.title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

#seleccionar-mascotas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    background-color: #0F3D3E;
    color: #E2DCC8;
    font-size: 33px;
    border: 1px solid #0F3D3E;
    border-radius: 10px;
}

#sub-1 {
    background-color: #0F3D3E;
    color: #E2DCC8;
    font-size: 26px;
    border: 1px solid #0F3D3E;
    border-radius: 10px;
}

.Targeta{
    display: flex;
    margin: 10px;
}


.Targetas {
    width: 160px;
    height: 100px;
    background-color: #31087B;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;
    border: 1px solid hotpink;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    font-family: 'Rubik Dirt', cursive;
}

.Targetas:hover {
    cursor: pointer;
}

.Targetas img {
    width: 150px;
}

input {
    display: none;
}

#boton-mascota {
    width: 160px;
    height: 40px;
    border-radius: 20px;
    padding: 5px;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 15px;
    font-family: 'DynaPuff', cursive;
}


#seleccionar-ataque {
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.boton-de-ataque {
    width: 140px;
    height: 40px;
    font-size: 15px;
    background-color: rgb(1, 23, 11);
    box-sizing: border-box;
    color: #fff;
    border: 2px solid #00028b;
    border-radius: 10px;
    padding: 0px;
    font-family: 'Silkscreen', cursive;
}

#boton-reiniciar {
    width: 160px;
    height: 40px;
    border-radius: 20px;
    padding: 5px;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 15px;
    font-family: 'DynaPuff', cursive;
}

























(:

Así vamos profe, muchas gracias por sus consejos, he aprendio bastante

Les comparto mis avances 😃

Así vamos:

Excelente y clara la clase!

Asi va quedando hasta el momento mi proyecto
acepto criticas 😄 😄

me encantan los trabajos de mis compañeros, ademas me ayudan a tener otra perspectiva de como puede verse mi juego.

Así vamos

Así va mi página. No pensé llegar tan lejos jaja.

![](https://static.platzi.com/media/user_upload/image-352a7c78-391b-4da0-8854-2fd1e9ecd06a.jpg)

¡Feliz 2023!

Para los que sean fans de Avatar 😁

![](

Asi va mi juego con muchas oportunidades de mejora:
https://jearod.github.io/wow.html

Hola quiero compartir mi portada de michipones, estoy terminando la segunda pantalla y son increibles estos profes 🤩
)

[](

Super chevree, como hemos ido avanzando en el desarrollo del proyecto, y los cambios…

profe mas o menos me esta quedando

espero le guste.
pd: eres la mejor

pueden instalar en el mismo vs code la extension live server, que lo que hace es que cada que guardas un cambio se actualiza la pagina para que no tengas que recargar la pagina para visualizar despues de varios cambios

Así va mi proyecto, muy buenas las clases.

saludos.!

Bueno, así voy, sé que falta mejorar algo…
 

Hasta el momento así vamos. Es sencillo pero me está encantando cada una de las clases que hemos tenido hasta ahora

:3

Así va mi juego por ahora.

  • (Primera pantalla). Cuando paso el curso sobre el personaje se mueven y se suben un poco.

    Este es el código para eso 👇👇
.box:hover { /*Cambiar el color de fondo de cada monstruo de acuerdo a su elemento.*/
    background: #325288;
    width: 146px;
    height: 142px;
    margin: 26px 0px 16px 0px;
    padding: 0px;
    box-sizing: border-box;
    border: 3px ridge #F4EFAC;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    cursor: pointer;
}
  • (Segunda pantalla).

https://beta.openai.com/playground Es un complemento perfecto cuando estás aprendiendo a programar, es una asombrosa herramienta.

Asi va quedando mi pantalla de ataques

![](

Por ahora va así:

.boton-de-ataque{
    background: #069A8E;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 20px;
    border-color: transparent;
    color: white;
    width: 169px;
    height: 49px;
    font-family: 'Press Start 2P', cursive;
    font-size: 17px;
    margin-bottom: 57px;
}
Hola a todos! también comparto mi avance ![](https://static.platzi.com/media/user_upload/image-b1d4d37d-d2bd-49fd-a42e-91ecc08dbaee.jpg)
![](https://static.platzi.com/media/user_upload/image-02064af1-e082-4ae2-a282-9526840e4064.jpg)
Progresando ando :) ![](https://static.platzi.com/media/user_upload/image-2618b5e2-f399-40ff-afb4-dab5c768e22b.jpg)
Me encanta ❤️ ![]()![]()
![]()Estoy feliz con el resultado. Aun no le agrego mucha personalidad, salvo un gradiente en los colores y unas fuentes agradables para leer. ![](https://static.platzi.com/media/user_upload/image-b7e64c6d-52be-4f42-bd3f-bae9874e206a.jpg) Aquí dejo mi código css, dudo que sirva mucho pero quizá alguien le interese: ```css @import url('https://fonts.googleapis.com/css2?family=Righteous&family=Rubik+Mono+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Righteous&family=Rubik+Mono+One&display=swap'); body { font-family: "Righteous", sans-serif; background-color: #173B45; background-image: linear-gradient(90deg, #0a1e2b 10%, #3C5B6F 90%); } #seleccionar-mascota { display: flex; flex-direction: column; justify-content: center; align-items: center; } .titulo { color: #ff5100; font-size: 72px; } .subtitulo { color: #FF8225; font-size: 22px; } .tarjetas { display: flex; gap: 10px; } .tarjeta-de-mokepon { width: 300px; height: 200px; background-image: linear-gradient(90deg, #160a3d 10%, #034f7b 90%); padding: 10px; box-sizing: border-box; margin: 10px; border: 3px solid #cc4f2695; border-radius: 90px; display: flex; justify-content: center; align-items: center; color: #FC4100; font-size: 30px; } .tarjeta-de-mokepon img { width: 100px; } #boton-mascota { width: 180px; height: 60px; border-radius: 30px; background: transparent; border: 2px solid #fbb000ae; color: #FC4100; font-family: "Poppins", sans-serif; margin-top: 30px; } input { display: none; } #seleccionar-ataque { flex-direction: column; align-items: center; } .boton-de-ataque { background-image: linear-gradient(90deg, #fc3f00 10%, #FEB941 90%); padding: 10px; box-sizing: border-box; border-radius: 70px; border: 2px solid #cc00ff; color: #f3f3f3; } ```@import url('https://fonts.googleapis.com/css2?family=Righteous\&family=Rubik+Mono+One\&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900\&family=Righteous\&family=Rubik+Mono+One\&display=swap'); body {    font-family: "Righteous", sans-serif;    background-color: #173B45;    background-image: linear-gradient(90deg, #0a1e2b 10%, #3C5B6F 90%);} *#seleccionar-mascota* {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;} *.titulo* {    color: #ff5100;    font-size: 72px;} *.subtitulo* {    color: #FF8225;    font-size: 22px;} *.tarjetas* {    display: flex;    gap: 10px;} *.tarjeta-de-mokepon* {    width: 300px;    height: 200px;    background-image: linear-gradient(90deg, #160a3d 10%, #034f7b 90%);    padding: 10px;    box-sizing: border-box;    margin: 10px;    border: 3px solid #cc4f2695;    border-radius: 90px;    display: flex;    justify-content: center;    align-items: center;    color: #FC4100;    font-size: 30px;} *.tarjeta-de-mokepon* img {    width: 100px;} *#boton-mascota* {    width: 180px;    height: 60px;    border-radius: 30px;    background: transparent;    border: 2px solid #fbb000ae;    color: #FC4100;    font-family: "Poppins", sans-serif;    margin-top: 30px;} input {    display: none;} *#seleccionar-ataque* {    flex-direction: column;    align-items: center;} *.boton-de-ataque* {    background-image: linear-gradient(90deg, #fc3f00 10%, #FEB941 90%);    padding: 10px;    box-sizing: border-box;    border-radius: 70px;    border: 2px solid #cc00ff;    color: #f3f3f3;}
Un gran avance! ![](https://static.platzi.com/media/user_upload/image-d0c8cec4-d597-4513-b416-4a07f51211b6.jpg)
Dejo la captura de cómo va la segunda parte del jueguito! :D![](https://static.platzi.com/media/user_upload/Mokepon2daPagV1-5bbfd8d7-4ec8-4b79-aa0f-0d96346e1d02.jpg)
![]()![](https://github.com/xanny-ilomio/mokecat/blob/main/mokecat/images/pokecat.jpg?raw=true) estoy usando a mis gatitas como personajes para el juego jjeje
❤️❤️
![](https://static.platzi.com/media/user_upload/Critterz%202024-05-23%20225108-87921e1d-fa9c-459f-af3d-99119ed0847c.jpg)
hasta ahora lo llevo de la siguiente manera: ![](https://static.platzi.com/media/user_upload/image-679c78f4-daad-4ff4-ad5c-0b5bb2c60bad.jpg) ![](https://static.platzi.com/media/user_upload/image-e7c6a2a3-6b26-4abb-9795-f4eaaaf3002a.jpg)
No es mucho, pero es trabajo honesto XD![](https://static.platzi.com/media/user_upload/image-5f72adb5-84fa-4cbc-aeaa-c5f4438ff70f.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20%2817%29-b584cb7d-fb31-420c-a3ed-49feea15044c.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20%2818%29-630ac70e-084c-4ebe-91a9-62f8fbc68bb9.jpg)Esto es lo llego hasta ahora


Este fue mi trabajo hasta el momento

me van a demandar por esto 😅

mi gato se llama koral, pero le decimos kory

Así va quedando! 😁😁

😀

Hola, yo separé los archivos de estilos css por pagina.
Por lo que al pasar a la pagina de juego agrego todos los estilos en otro archivo:

<@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&family=Ubuntu:wght@300&display=swap');

#seleccionar-atacar {
    flex-direction: column;
    align-items: center;
}

.tituloPag02 {
    color: #645CBB;
    font-size: 40px;
}

.subtitulosPag02 {
    color: #645CBB;
    font-size: 24px;
}

.boton-de-ataque {
    font-family: 'Ubuntu', sans-serif;
    width: 165px;
    height: 100px;
    background: linear-gradient(to right,#A0C3D2,#F7F5EB);
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
    border: 2px solid #EAC7C7;
    border-radius: 20px;
    box-shadow: 3px 3px #40450b;
    color: #645CBB;
}

.botonReiniciar {
    font-family: 'Ubuntu', sans-serif;
    width: 165px;
    height: 100px;
    background: linear-gradient(to right,#A0C3D2,#F7F5EB);
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
    border: 2px solid #EAC7C7;
    border-radius: 20px;
    box-shadow: 3px 3px #40450b;
    color: #645CBB;
}> 


un avance ✌

mi versión:
![](

Hola, decidí dejar el mismo estilo que había usado para los label de las mascotas en los botones:

Muestra de mi pequeño progreso


Les recomiendo cursos de Git para ir haciendo las versiones de este proyecto, yo lo estuve pensando pero por querer terminar este primero y luego hacer el de git acabo de perder todo lo del curso por ponerme a eliminar archivos que no debía :v jeje


decidi hacerlo con colores que cmbinaran con los elementos, ademas de que todo lo que sea para interactuar tendra un borde violeta azulado

Me están encantando las Clases, GRACIAS!


Hasta ahora, lo tengo asi 😄

Así va el mío, lo hice basado en un episodio de South Park llamado Chinpokomón jajajaja

Espero no me denuncien por derechos de autor XD.

Que diseños tan cheveres los de la comunidad💚💚