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

Estilos del botón

37/84
Recursos

Aportes 202

Preguntas 26

Ordenar por:

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

o inicia sesión.

Les recomiendo que acabando este curso revisen la escuela de diseño gráfico, les servirá mucho para mejorar sus estilos en CSS 💚 💚 💚

https://platzi.com/diseno-grafico/

Me pasé todo el día haciendo la wea pq quería aportar :3

No es tanto pero ahi voy!

Asi va el mio

Así va el mio, hice mis propios diseños para las mascotas que mejorare después con el curso de illustrator😊

Hola Platzi!
Asi va mi web de inicio, con botón desactivado hasta que selecciones alguna mascota…

Aca les dejo una imagen con los 3 estados de mis inputs, normal, :hover y checked… y el botón ya activo para continuar.
Me encanta este curso, Saludos!

Que buen ojo para los estilos, tengo que trabajar duro para desarrollar ese buen ojo o gusto, yo no puedo hacer nada de esto sin un diseño pre-definido, excelente ver como va haciendo cada cosa y va teniendo sentido y se ve tan cool.

💅

practicando animación

hola

En el css de los botones pueden usar esta opcion para que les salga la manito del click:
cursor: pointer;

Reto Cumplido.

Así voy! No he podido centrarlos bien con

justify-content: center;

, si alguien me da recomendación les agradecería.

Espero les guste!

Les comparto mi pequeña pantalla.
Acepto recomendaciones. Gracias.

listo profe asi quedo

Yo, HTML siempre he sido mejor amigo de JavaScript. Nunca habías tenido problemas, éramos nosotros dos.
Hasta que apareció ella.
CSS, la más encantadora. y sin duda los demonios están hechos para pecar con los ángeles.

yo aquí casual, tratando de darle romance a esto 🤣🤣🤣

Muy contento con el resultado hasta ahora.

Un poco old School

Adapté un poco el juego para que fuera una extensión de mi emprendimiento!!! poco a poco voy aprendiendo. Le quiero poner unas lógicas distintas pero luego de terminar el proceso del curso!!

Acá esta mi diseño, espero les guste!!

y este es mi código CSS

@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body{
    margin: 0;
    background-image: url(./imagenes/fondo.jpg);
    background-size: contain;
}
#seleccionar-mascota{
    display: flex;
    flex-direction: column;
    height: 80vh;
    width: 500px;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #E8AA42;
    margin-top: 60px;
    margin-bottom: 60px;
    border-radius: 12px;
}
.titulo{
    margin-top: -30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFE5B4;
    width: 450px;
    border: 1px solid #256D85;
    height: 80px ;
    margin-bottom: 68px;
    font-size: 70px;
    font-family: 'Silkscreen', cursive;
}
h2{
    font-family: 'Poppins', sans-serif;
    color:#FFE5B4
}

.contenedor-labels{
    display: flex;
    justify-content: space-between;
    width: 470px;
    height: 150px;
    margin-bottom: 40px;
}
.tarjeta-de-mokepon{
    width: 150px;
    height: 150px;
    background: #256D85;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 300;
    
}
.tarjeta-de-mokepon img{
    width: 110px;
    margin-bottom: 0;
    margin-top: 0;
}
.nombre-mokepon{
    font-family: 'Poppins', sans-serif;
    color: #231955;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 25px;
}
#boton-mascota{
    width: 300px;
    height: 45px;
    color: #FFE5B4;
    background: transparent;
    border-radius: 8px;
    border: 2px solid #256D85;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    
}
input{
    display: none;
}

 

Le hice unos pequeños cambios al botón:

#boton-mascota{
    color: black;
    background-color: #F7FF93;
    width: 210px;
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 40px;
    border-radius: 20px;
    border: 1px solid white;
    font-family: 'Press Start 2P', cursive;
}

Juegazo

Así está mi juego 😄


Asi me va quedando, la verdad que me emociona

Esta es mi versión de Mokepon 😃

Puede parecer una tontería pero me cerró una idea que tengo hace meses ahí dando vueltas cuando explicó lo d los margins en sentido de las agujas del reloj, gracias profe.
Tambien, si definimos 2 valores por ejemplo:
margin: 30px 10px; el primer valor cuenta para top y bottom y el segundo para left y right. Si definimos 3 valores el primero va para top el segundo para left y right y el tercero para bottom.

Aquí les dejo mi aporte lleno de Copyright 🤣

Mi aporte!

Les comparto un pequeño video de lo que llevo de mi proyecto, los gráficos los realize con aseprite, cuando finalize el proyecto completo subiré el código para compartirlo con ustedes 🤟

Asi me quedó…

@import url('https://fonts.googleapis.com/css2?family=Belanosima&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Manrope:wght@200&display=swap');


body {
    background-image: url('./assets/caracas_fondo_6.jpg');
    background-position: top;
    background-size: 1800px 1000px;
    font-family: 'Belanosima', sans-serif;
}

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

.titulo {
    color: white;
    font-size: 50px;
}

.subtitulo {
    color: white;
    font-size: 25px;
    font-family: 'Manrope', sans-serif;
}

.tarjetas {
    display: flex;
    gap: 10px;
}


.tarjeta-de-elementos{
    width: 210px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid white;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}

.tarjeta-de-elementos img {
    width: 95px;
}

#boton-mascota {
    width: 200px;
    height: 60px;
    border-radius: 20px;
    color: white;
    margin: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid white;
    font-size: 25px;
    font-family: 'Manrope', sans-serif;
}

input {
    display: none;
}

Mejor me quedo jiji 😄

Cada vez mejorando 💪

Agregué unas propiedades a mi código para los botones. Se las comparto con su significado (todavía no defino los colores, pero lo hice como ejercicio y ustedes pueden modificarlo).

#boton-mascota {
    width: 144px;
    height: 52px;
    border-radius: 20px;
    border: none;
    background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-top: 30px;
    cursor: pointer;
}

input {
    display: none;
}

.tarjeta-de-michipon:active {
    box-shadow: 10px 10px 10px #389e8d;
}
  • La propiedad cursor: pointer; permite que al mover el cursos salga la manita.
  • La propiedad background-image: linear-gradient(135deg, #f34079 40%, #fc894d) permite que el color del botón se degrade.
  • La propiedad font-weight: permite hacer la letra negrita.
  • La función .tarjeta-de-michipon:active permite que al seleccionar la tarjeta aparezca, en este caso, la sombra del color indicado, con las medidas indicadas.

Asi me va quedando 😄

Poco a poco!
va tomando buen aspecto

![](

@import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);

body {
font-family: ‘Roboto’, sans-serif;
background-color: #FFB84C;
}

.titulo {
color: white;
font-size: 32px;
/* width: 310px;
height: 50px;
background-color: teal; */
}

.subTitulo {
color: white;
}

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

.tarjetas {

display: flex;
/* background-color: black;
flex-direction: column;

display: inline-block; */

}

label {

display: flex;
justify-content:center;
align-items: center;
width: 174px;
height: 100px;
margin: 20px;
background-color:#F266AB;
border-radius: 20px;
color: white;

}

label img {
width: 60px;

}

Mejor veo todo el módulo css antes de sentirme mal porque hay compañeros en muy otro nivel 😁

Les vengo a mostrar mi proceso quise hacer el mío de temática fantasía

Asi va quedando mi juego 😍😍

Conseguí darle un efecto neón a los botones y las tarjetas, estoy feliz XD

Para ser una clase va demasiado rapido. Cuesta demasiado entender asi.

Así va mi jueguito!! Cambia de color cuando pones el mouse sobre la imagen (ejemplo Fenigo)

así va quedando mi estilo, quise poner a mi gato como primer personaje y me esta encantando

Así va mi avance , espero les guste

Espero te sean utis estás imagenes teneindo como referencia lo que explica la maestra.

así vamos!!!

Quisiera poner una imagen pero la app en android no me deja😥....Pero bueno aqui les dejo un truco que de seguro en el curso mas adelante lo veremos, pero que yo ya habia visto en youtube y es genial. Lo que hace es que cuando te pares con el clic sobre la tarjeta del mokepon, o un boton, este crezca un poco mostrondo que estas sobre el. Aqui te escribo como se hace: dentro de css en la clase tarjeta-mokepon pones transition: 0.3s 0.2s; la s es de segundos entonces fuera de la clase tarjeta-mokepon escribes: .tarjeta-mokepon:hover { transform: scale(1.05, 1.05); } y listo ya deberia funcionar para cualquier etiqueta que le pongas dentro el transition, y luego crees un hover, que funciona cuando tienes encima el clic, tambien puedes poner dentro del hover cursor: pointer; y asi saldrá una manito cuando te pares encima. Saludos 🙏😁

Deberia haber elegido diferentes avatares, para que cada uno ataque con diferentes elementos, pero pues aja.

South Park enjoyers 😄

Va mejorando:

Apenas soy un novato en este mundo pero me siento conteto al ver los pequeños resultados😊

Me gusta mucho como la profe Estefany explica paso a paso cada detalle, se entiende fácilmente

Estoy siguiendo tal cual, pero, mi código en HTML, esta raro, pero si funciona, tal cual como usted realizo. Gracias profe

![](https://static.platzi.com/media/user_upload/image-a527c9a8-9403-4b76-b8a0-fedf187dc4a9.jpg)
![](https://static.platzi.com/media/user_upload/image-20ba7fc6-fc79-4726-8a43-63d036e5d136.jpg)

asi quedo

Mokepon Arcade :)![](https://static.platzi.com/media/user_upload/Screenshot%202023-10-20%20at%2018.47.01-488d8c95-beee-4765-a11e-900e5fca7f92.jpg)
![](https://static.platzi.com/media/user_upload/image-9cbfd8d2-c93a-47d7-b31e-5abb6342a575.jpg)

Este es mi Mokepon

![]()

esta fue mi idea!!! jeje espero les guste. 😄

Mi boton inicial se ve asi por que tiene una animacion hover… me gusta como va quedando pero claro mucho por mejorar!!

Lo he cambiado un monton de veces y seguramente lo siga haciendo, pero esto me encanta.

Este es mi progreso.

lento pero seguro

Me siento orgulloso de lo que he logrado de la mano de los profesores y quería compartirlo con uds pero no puedo agregar la imagen 😦

Mi boton modificado

A mi diseño use un efecto para seleccionar el personaje con la pseudo clase Hover 😄

border-radius --> radio o redondeo de borde

So far

Css, dandole!