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

Visual Studio Code

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 gano 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 22

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

.

🎉🎉🐲

MOKEPON

Tienes que atraparlos, mi destino así es 🎶

Me gusto el resultado final 😄

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

Hasta luego señorita Estefany 🤞

Aquí como lo hice:

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

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

Asi que el mio!

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 fue mi resultado final.

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;
}

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

👏 Estefany 👏

Y así quedó mi juego jaja

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

Que genial seguir aprendiendo! :3

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

así vamos y con ganas de mas…

![](
![](