Introducción a canvas: dibujando con JavaScript

El curso se debería llamar “Reto 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 👍🏼🐢

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

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

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

Probando ChatGPT para entender mejor lo que estamos haciendo.

La respuesta que buscas es: drawImage()

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
    )

La imagen del cohete que esta en el cavas se ve un poco distorsionada, no se por qué 😥

Quiero recomendarte, primero, que te animes a realizar los demás cursos de Platzi ( CSS, Responsive, Grid, Animación, Javascript…etc).
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…etc. 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 ).

El Mapa de esta clase me recuerda a “Choose Your Framework” 😂, ya lo vieron:

https://www.chooseyourframework.dev/

Gochita?

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.

Ojo con la R de fillRect va en mayúscula. Perdí 15 min con esto. 😦

Esta parte del curso esta genial!! 😄

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.

volvieron las clases entretenidas !!

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.

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

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

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 😀

Un compañero (Gustavo Sírtori) dejó que él extraía la imagen teniendo en cuenta el mokepon seleccionado. Si creáis una función de extraerFoto( ) y mostrarFoto( ) igual que en extraerAtaques( ) y mostrarAtaques( ), os saldrá la imagen del mokepon seleccionado.

IMPORTANTE: que esas dos funciones no se declaren dentro de seleccionarMascotaJugador( ). Ahí dentro solo debe haber nuevo el display flex de esta sección al principio y el extraerFoto(mascotaJugador) justo antes de seleccionarMascotaEnemiga.

NOTA: yo he declarado foto como variable global, debajo de lienzo

function extraerFoto(mascotaJugador) {
    let foto
    for (let i = 0; i < mokepones.length; i++) {
        if (mascotaJugador === mokepones[i].nombre) {
            foto = mokepones[i].foto
        }      
    }
    mostrarFoto(foto)
}

function mostrarFoto(foto) {
    let avatarMascota = new Image()
    avatarMascota.src = foto
    lienzo.drawImage(avatarMascota, 20, 40, 100, 100)
}

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)

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.

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 ‘drawImage’ on ‘CanvasRenderingContext2D’: 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.

Ojo cuando escriban el “let imagenDeCapipepo = new Image()”, asegúrense de que el “Image()” tenga la “I” 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.

Buenas tardes tenía el siguiente error Uncaught TypeError: Cannot read properties of null (reading ‘style’)
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 ‘TODO 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();

https://youtu.be/widZEAJc0QM

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…con esta introducción y por lo que he logrado ver que se puede lograr con canvas…ufff 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 “canvas”. 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…jpg]

(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 “Console”, no se que tendre mal, si alguien pudiera ayudarme por favor.

buenas eramientas