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

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
7H
24M
8S

Introducci贸n a canvas: dibujando con JavaScript

61/84
Recursos

Aportes 69

Preguntas 30

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Record茅 este post de 25 ejemplos loquisimos usando Canvas

Canvas es muy util!!! aqui un ejemplo de lo que se puede hacer 馃榿馃榿馃榿

El curso se deber铆a llamar 鈥淩eto Intenso de Programaci贸n鈥

Lo que viene en las siguientes clases es apasionante. Creo que est谩 muy por encima de cualquier curso de Programaci贸n b谩sica que haya hecho antes.

Aplicando algunas modificaciones para que los enemigos sean diferentes a los personajes que podemos elegir. Me hab铆a complicado con los ataques, pero creo que es mejor continuar con algo m谩s sencillo y m谩s adelante intentar mejorar el juego. Mucho 谩nimo a todas las personas que llegu茅is hasta aqu铆, ya falta menos 馃挭馃徏

No me apareci贸 la imagen de capipepo pero el rect谩ngulo si me aparec铆a. En la siguiente clase hacemos que se mueva el personaje y ah铆 si logre que apareciera hasta que le di click en el bot贸n de mover.
Lo comento para que no se queden aqu铆 buscando la soluci贸n. Puede que llegue mas tarde 馃憤馃徏馃悽

REPORT: En el quiz de la clase anterior, la pregunta de c贸mo sacar la longitud de un array tiene la respuesta correcta repetida.

La respuesta que buscas es: drawImage()

Creo que no es buena idea tener todo en un solo archivo de JS

Esto de hacer cosas sin saber hasta donde se quiere llegar es ridiculo. Minuto 5 y lo unico que hago es COPIAR porque no tengo ni idea del punto a donde se quiere llegar

Probando ChatGPT para entender mejor lo que estamos haciendo.

La imagen del cohete que esta en el cavas se ve un poco distorsionada, no se por qu茅 馃槬

El Mapa de esta clase me recuerda a 鈥淐hoose Your Framework鈥 馃槀, ya lo vieron:

https://www.chooseyourframework.dev/

Quiero recomendarte, primero, que te animes a realizar los dem谩s cursos de Platzi ( CSS, Responsive, Grid, Animaci贸n, Javascript鈥tc).
Ahora, unas herramientas para que, puedas checar e analizar si tu juego est谩 responsive ( Media Queries).
MyDevice: An谩lisis de las medidas ( https://www.mydevice.io/#compare-devices ).
Responsive Viewer (Chrome): Puedes checar tu juego, p谩gina鈥tc. C贸mo se ve ( Responsive ) ( https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb )
Css Grid Overlay : Puedes ver las columnas de otras p谩ginas o sitios e inspirarte. ( https://chrome.google.com/webstore/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack )

Por 煤ltimo, la gu铆a de Mozilla para complementar lo aprendido en las clases ( https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API ) ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas ).

Si te sientes frustrado porque no aparece la imagen de capipepo en el canvas, revisa lo siguiente:

new img() / debe ser = new Image()

Con esto resuelves el problema, yo me vi nuevamente la clase para darme cuenta del error que cometi.

脡xitos y recuerda que todo tiene una soluci贸n, no te rindas!

    let imagenDeCapipepo = new Image()
    imagenDeCapipepo.src = capipepo.foto
    lienzo.drawImage(
        imagenDeCapipepo,
        20,
        40,
        100,
        100
    )

Gochita?

Esta parte del curso esta genial!! 馃槃

Interesante hasta ahora. Sin embargo, me hubiera gustado que nos dieran un poco de contexto acerca de la herramienta y no creo que despu茅s la trabajemos en el mismo archivo de JS, se ve raro. Pero apenas es el inicio y esperamos que nos sigan sorprendiendo.

Ojo con la R de fillRect va en may煤scula. Perd铆 15 min con esto. 馃槮

volvieron las clases entretenidas !!

En mi opini贸n para ser la introducci贸n a la etiqueta deber铆a profundizar un poco m谩s en los conceptos y explicar por qu茅 va a帽adiendo esas l铆neas de c贸digo, la verdad ya estoy confundida 馃槙

Les recomiendo escribir Mokep贸n con acento la 煤ltima o.

despu茅s de 61 clases la frustraci贸n apareci贸. A mi no se me dibuja el capipepo

En caso de que no aparezca la imagen en el canvas:

Puede deberse a que la imagen no se est茅 cargando correctamente en el c贸digo porque la carga de la imagen depende de muchos factores, como la velocidad de la conexi贸n a internet o el tama帽o de la imagen.

Para solucionar esto, debemos de dibujar la imagen cuando ya estemos seguros de que la image que estamos generando se haya cargado, para eso utilizamos onload de la siguiente manera:

		let hydroSlimeImage = new Image()
 		hydroSlimeImage.onload = function () {
			canvas.drawImage(
				hydroSlimeImage, 
				20, 
				40, 
				100, 
				100,
			)
		}

		hydroSlimeImage.src = slimeHydro.icon

Por lo tanto, es posible que en algunos casos, la imagen se cargue lo suficientemente r谩pido como para ser dibujada inmediatamente (Como en la clase), mientras que en otros casos, se necesite esperar a que la imagen se cargue completamente antes de poder dibujarla.

Muchachos a los que no les aparezca la imagen de su mokepon en el Canvas. Cambien la 鈥渋鈥 en image() por una, i mayuscula. Asi: new Image () y problema resuelto. Ya les deberia aparecer su mokepon.

va muy r谩pido y no entend铆 nada solo estaba copiando lo que hacia a la velocidad de la luz jajaja, voy a ver la clase de nuevo, tengo muchas preguntas sobre que es exactamente canvas pero bno.

OMG me gusta esta clase , que podamos crear un mapa es algo fantastico podre hacer mi juego rpg como quiero gracias

a todos los guerreros que terminaron la parte pasada, excelente!

Ok, iniciamos un nuevo segmento del curso y creo que he podido respirar un poco. No me pasaba desde hace muchas clases. Esta clase me volvi贸 a dar tranquilidad y ojal谩 contin煤e as铆.

Esta clase les comparto que tuve un error en un solo detalle. Aqu铆 si no escribes bien una palabra todo tu c贸digo se rompe. Afortunadamente en la consola del navegador te sale el error y lo puedes corregir. Es un poco frustrante pero satisfactorio al final que si lo logras.

Genial!!

Esta parte del curso esta genial!!

La etiqueta canvas nos sirve para hacer un mapa y que en el pueda haber elementos que estaremos poniendo nosotros en cualquier parte del mapa con un plano cartesiano con los ejes, X y Y, le diremos que lugar ocupar en el mapa.

capipepo esta como grande pa ese canvas 馃榾

En mi caso no aparec铆a la imagen de Capipepo si ejecutaba el juego con el inspector abierto desde el principio. As铆 que si tampoco te aparece la imagen, prueba ejecutar el juego sin el inspector abierto.

me podrian ayudar con los recursos de la clase #60 ?

Otra vez a revisar linea por linea. 馃槬

Primera clase con Estefany, mucho mejor docente que Diego

Virgen Santa, sigue el error en el t矛tulo de la primera secci貌n: Mokepono en lugar de Mokepon jejeje

Si a alguien le sale este error

Uncaught TypeError: Failed to execute 鈥榙rawImage鈥 on 鈥楥anvasRenderingContext2D鈥: The provided value is not of type 鈥(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)鈥.

Es porque les falta el .src cuando se esta haciendo la vinculaci贸n de la imagen de capipeo, justo en esta parte del c贸digo.

let imagenDeCapipepo = new Image();
  imagenDeCapipepo.src = capipepo.foto;
  lienzo.drawImage(imagenDeCapipepo, 20, 40, 100, 100);

f铆jense que al momento de declarar esta variable lleva .src, imagenDeCapipepo.src = capipepo.foto;

tranquila muchacha, con calma 馃槓

Waow, esto de usar Canvas es totalmente nuevo para m铆, impresionante todo lo que se puede hacer. GRacias.

Esta es mi soluci贸n, toma en cuenta el Mokepon seleccionado

// con el nombre obtengo el ID y lo guardo
// ! este calculo lo uso para otros cosas
 for (let i = 0; i < mokepones.length; i++) {
     if(mascotaJugador == mokepones[i].nombre){
         mascotaJugador = i
      }
  }

//mostrar mokepon en el canvas
let imgSelec = new Image();
imgSelec.src = mokepones[mascotaJugador].foto;
lienzo.drawImage(
  imgSelec,
  20,40,
  100,100)

Ojo cuando escriban el 鈥渓et imagenDeCapipepo = new Image()鈥, aseg煤rense de que el 鈥淚mage()鈥 tenga la 鈥淚鈥 en Mayuscula, vi que a varios les paso y esto me incluye a mi, gracias a los comentarios de mis compa帽eros me ahorre horas de buscar y ahi si pudo aparecer el Capipepo en el Canvas

canvas --> espacio rectangular
nombre.fillrect() --> crea rectangulo en canvas
nombre.drawimage() --> inserta una imagen en canvas

Que tremendo curso! super genial, salir con bases de todo.

Se deber铆a de llamar el en vez de basico a avanzado el curso

Buenas tardes ten铆a el siguiente error Uncaught TypeError: Cannot read properties of null (reading 鈥榮tyle鈥)
at iniciarJuego , el motivo era por que existia un espacio luego de las comillas en el html del id OJO con eso saludos

el tema camvas se ve muy interesante.

La primera clase con la profesora Estefany se ve interesante, pero ser铆a de buen ver, una introducci贸n m谩s grafica del resultado que se espera al finalizar la sesi贸n, esto es para no quedarnos con lo explicado por los Coach, sino para irnos dando una idea de c贸mo el estudiante, din谩micamente podr铆a crear un mapa mental o un 鈥楾ODO LIST鈥 de c贸mo abordar el tema, y que la clase se vuelva la gu铆a鈥

Lo comento como sugerencia no solo para la Coach Estefany, sino para todos los cursos que he seguido hasta ahora.

Como que con el avance del curso voy concluyendo que me siento mejor en el backend

Dure un buen rato buscando el error de mi codigo que no servia, era una I mayuscula en image();

Con que hacen las presentaciones

Literal, si no aparece la imagen, lo mejor es copiarlo del codigo que aparece, algo hace que si lo digito no me funciona, muy extra帽o

        let imageDogEvil = new Image()
        imageDogEvil.src = dogEvil.photo
        lienzo.drawImage(
            imageDogEvil,
            20,
            40,
            100,
            100
        )   

Nunca hab铆a visto a profundidad lo que es canvas鈥on esta introducci贸n y por lo que he logrado ver que se puede lograr con canvas鈥fff estoy emocionad铆simo.

馃挭 Canvas como la etiqueta en HTML que nos permite introducir un 谩rea donde dibujar

Es interesante la forma que se usa mapas en html con el codigo 鈥渃anvas鈥. Habia escuchado de eso pero nunca lo habia implementado en una pagina HTML. Definitivamente en el campo laboral hay un monton de sorpresas. A seguir aprendiendo.

Vamos subiendo del nivel, paso a paso. Ya estamos aprendiendo a dibujar en JavaScript 馃挌

necesito ayuda con este proyecto.

S脥:
.mapa {
border: 2px solid black;
}

NO:
#mapa {
border: 2px solid black;
}

con el punto si aparece el cuadro y con el hashtag no me aparec铆a.

**Ayuda, me aparece este error en la consola. **

![foto2鈥pg]

(https://static.platzi.com/media/user_upload/foto2.-b527db0d-2209-4ff0-a056-f39546b88b22.jpg)

As铆 esta mi c贸digo:

excelente clase.

Lo que mas me esta gustando de las clases en Platzi , es que me estan haciendo recordar todo nuevamente lo de java,
Estan avanzando rapido , falta mas explicacion , pero yo con conocimientos previos se me facilita entender mejor , nose si a todos se les facilita


Despues de hacer el canvas me aparece asi, pero no me muestra ningun eror en 鈥淐onsole鈥, no se que tendre mal, si alguien pudiera ayudarme por favor.

buenas eramientas