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: 鈥楻oboto鈥, 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!