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

Botones bonitos y viewport

70/84
Recursos

Aportes 36

Preguntas 10

Ordenar por:

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

Les dejo una propuesta para los botones tipo mando de consola. Pueden hacerlo con display: grid.

Ac谩 el c贸digo:

Como pod茅is ver, la clave para poder posicionar cada bot贸n en la parte que queramos de nuestra Grid es asignarle en nuestro documento HTML una clase para cada posici贸n.

Lugo en el CSS es donde le indicamos en qu茅 posici贸n de nuestra Grid queremos posicionar dicho bot贸n.

En mi ejemplo utilic茅 en la declaraci贸n el selector padre para ser m谩s espec铆fico, por si en el futuro el proyecto creciese y aunque no es buena pr谩ctica, si hubiese otros componentes con las clases up, right, down y left al ser espec铆ficos, estos estilos s贸lo se aplican a los botones dentro del Grid. Espero que les sirva. Ya falta menos para terminar el curso 馃挭馃徏

Backend!!! voy por ti!!

馃挌 馃挌
Me salvaste la vida con esto

https://responsively.app/ nos ayuda a trabajar muchas dimensiones y tipos de dispositivos a la vez para probar el responsive

As铆 va quedando mi juego! gracias profes!!! 鉂わ笍

No s茅 por qu茅 me dice que el margin no es v谩lido

Tendr茅 que revisar mi CSS

Mil gracias Profe!!!
.

.

.

Estuvo buena esta secci贸n se me ocurrieron varias mejoras para mi juego mientras iba viendo lo que proponen 馃槃 y ahora tengo un lindo juego con mis personajes en el :3

Termine con la clase N掳 70鈥 me falta controlar que el mokepon no se salga del mapa cuando el usuario utiliza los botones de moviemiento con el mouse鈥(investigare 驴como hacerlo?)鈥 el resto esta terminado con algunos efectos y otras cosas鈥 aqui el resultado:

https://github.com/JorgeRHidalgo/Mokepon---Curso-de-Platzi

Termine hasta esta parte pero no s茅 como hacer que los botones funcionen en el celular.
Mokepon - Canvas

Espero volver y haber encontrado la soluci贸n.
(Me desanimo ver que eso no funcionaba y me fui una semana de Platzi porque me enoje jajaja)

驴Puedes convertiste en el Maestro Plagiomon y vencer al todopoderoso Miaudos?
Click aqu铆 para jugar Plagiomon

Ustedes no borraron los botones hace como 5 clases cuando las mascotas pudieron moverse con las flechas? 馃槮

en que momento dejo de ser basico esto, el las timas clases de esta unidad me consto ender unas cosas pero todo bien creo

Les comparto como qued贸 mi mapa con los 6 mokepones situados aleatoriamente en 茅l.

aasuuuuuuu que emoci贸n 馃槂馃槂馃槂 estoy ,muy contento por las clase 馃槈馃槈

al inicio de clases hab铆an m谩s de 200 comentarios y ahora casi 30 wow

  • Resultado Final

cuando uno no elige el mokepon ya no se muestra el canva.

Tengo miedo al backend 馃槖 !! Pero vamos con TODO :3

Gracias por su trabajo Maestra

隆Hola compa帽eros!
Les comparto mokeponV3, la versi贸n 3 de mi juego, que incluye todo hasta la clase 70 donde incorporamos el **mapa **y las colisiones. Aprovech茅 para aprender c贸mo generar un repositorio en GitHub y hacerlo disponible online f谩cilmente con pages github
Pueden jugarlo directamente ac谩 (borrar los espacios): bit .ly /mokeponv3

saber que se diga saber, no鈥 pero si se entiende bastante.

excelente profesora mas porque termino explicando muchas cosas que los otros solo dejaron en el tintero, muy clara y explicita, disfrute mucho esta parte del curso con ella

me sigue pasando que al seleccionar mi primer mokepon y moverlo con las flechas despu茅s de 1 segundo de estar presionando una tecla este coge super velocidad y se va a otro universo

no me pasa con ninguno de los otros mokepones ( tengo 6 )

con cuantos puntos se gana este curso querido amigos

siiiiiiiiiiiiiiiuuuuuuuuuuuuuuuuuuuuuu

Les dejo el codigo asi lo pueden pegar directamente!

<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>

Backend馃敟

Les dejo el mapa con los demas mokepon. [Code]

As铆 se ve la primera pantalla de mi juego en un 馃ぉ. Gracias Estefany #2 por tus conocimientos.

Espero convertirme en Frontend pronto 馃槄

Este curso es extremadamente completo!!

chao Steffany te extra帽aremos