Imágenes y personajes de fondo

Aquí tienen el Mokemap

no conseguí imagen del departamento en pixel art u.u

TIP: Para renombrar algo en todos los lugares donde se está usando y solo escribirlo una vez, pueden presionar F2 en el nombre de la función, variable, etc y se cambiará en todos los lugares.

Soy el unico que ama como enseña ella? love Estefany teacher ❤️

Asi va quedando

Yo te elijo:

Total tiempo invertido viendo la clase 12 minutos, buscando bugs 15 minutos, buscando una imagen adecuada al proyecto para el mapa… 2 horas jajajajaajajajaj

Posible problema

Me salía el siguiente error en la consola del navegador y creaba un bucle infinito :

Error al cargar el método drawImage () en el lienzo de Javascript

Lo resolví cambiando el archivo js a la raíz.
Yo tenía el archivo mokepon.js dentro de una carpeta llamada js antes.
Creo que este problema se presentó porque el js se demoraba en buscar el src del background y como tal la imagen no terminaba de cargar, sino es así por favor me corrigen

Que recuerdos me trae este mapa 😃

Personalmente creé una variable en global que llamé “selectedPet”, esta, tiene entonces el valor correpsondiente a la mascota que escoge el jugador. Y esta variable, es la que paso por parámetro a las demás funciones como pintarMokepon y demás. Lo veo más sencillo así.

hoy aprendi lo mas importante como encontrar los errores en mi codigo jajaja

llegar aqui me ha tomado dos meses pero siento que he aprendido muchisimo, quiza ya estoy al 30% de mi objetivo. Si te tomó tambien mucho tiempo llegar aca no te sientas mal, lo bueno es que vamos avanzando todos.

Los profes enseñan con flash y luego dicen… Ya sabemos…jejejej nos tienen fe…

Este mapa se llama tierra seca donde se originan los vaqueros en mi juego.

‘Hipodoge’ ahora es ‘Háipodoch’

Saludos compañeras, compañeros y profesorado. Viendo que a otro compañero del curso le ha sucedido lo mismo que a mi quiero compartirles algo por si así podemos encontrar una forma más rápida de pintar a nuestro personaje y a nuestro enemigo en el canvas.

Al obtener el personaje y enemigo elegido utilizando una nueva función como se explica en la clase, lo que me ocurría es que, aunque me funcionaba bien, en la consola se me generaba un bucle infinito. Tanto para el personaje como para el enemigo. No sé si hice algo mal, el caso es que pude arreglarlo de una forma más sencilla. Si ya tenemos una función que elige el personaje y otra que elige el enemigo. Agregué ambos resultados a una nueva variable y esa variable es la que utilicé para lienzo.drawImage().

Aquí les muestro algunas capturas para que vean que con las dos funciones que llevamos utilizando todo el curso pude utilizar los resultados en diferentes pantallas y partes de nuestro juego. Aprovecho este aporte por si alguien con más conocimiento o algún profesor puede aportar si es buena práctica hacerlo así o si bien hay otra forma más correcta. Gracias por leerme y espero que les sirva si tuvieron el mismo problema que yo.

Resultado:

Función seleccionarPersonajeJugador();

Función seleccionarPersonajeEnemigo();

Función pintarCanvas();

El Mokemap lo pueden encontrar en los recursos, en programar / mokepon / assets / mokemap.png

Es bueno que se mantenga una estructura de carpetas por este estilo en el local de cada uno para mantener el orden y pueda exportarse la carpeta mokepon a cualquier parte con todo lo que contiene sin que falle!

Es la primera vez que un profesor explica como rastrear los errores de manera clara

Muchas gracias profesora Estefany

Excelente manera como detecto los errores en menos de 1 minuto, ahi se norta la experiencia.

En esta clase me di cuenta de la importancia que tiene de organizar bien el código y como es importante saber donde ponerlo y escribirlo para que puedan aparecer los demás Mokepones.

para cambiar el nombre de la función pintar personaje es mejor usar otro shortcut presionando f2 te deja cambiar de una todas las referencias a esa función o variable así evitas que se te pase alguna

Recuerden siempre comentar su código con las funciones nuevas que vamos aprendiendo. Así cuando lo leemos de nuevo es más fácil ubicarte y comprenderlo.

a mi no me cargaba la imagen, después de muchos intentos pude, no le coloque el punto que va dentro de las comillas.

asi quedo:
let mapaBackground = new Image()
mapaBackground.src = ‘/mokepon/js/imagenes/mapaNinja.webp’

1. primero haremos nuestro mapa mas grande width = 800 y heigth = 800
2. Creamos MapaBackgroud = image()
3. Aqui le agregamos el fondo MapaBackgroud.src = “ruta donde esta la imagen”
4. Reescribimos la funcion pintarpersonaje() como PintarCanvas()
5. y dentro de aqui utlizando lienzo.DrawImage() y dibujamos el fonto en mapaBackgroud
6. ya aqui enves de usar a capipepo utilizamos el mokepon del playes y lo sustraemos en una variable

Así me va quedando el mapa del juego 😄.

Siento raro que yo no haya tenido el problema que tuvo estef al final. Comparto mi codigo porque si jaja

const  sectionSeleccionarAtaques = document.getElementById("seleccionar-ataque")
const  sectionReiniciar = document.getElementById("reiniciar")
const  btnMascota = document.getElementById("seleccionar")
const  btnSiguienteBatalla = document.getElementById("reiniciar")

const  sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
const  spanMascotaJugador = document.getElementById("mascota-jugador")

const  spanMascotaEnemigo = document.getElementById("mascota-enemigo")

const  seccionMensajes = document.getElementById("resultado")
const  ataquesDelJugador = document.getElementById("ataques-del-jugador")
const  ataquesDelEnemigo = document.getElementById("ataques-del-enemigo")

const spanVidasJugador = document.getElementById("vidas-jugador")
const  spanVidasEnemigo = document.getElementById("vidas-enemigo")
const contenedorTarjetas = document.getElementById("contenedorTarjetas")
const  botonesDeAtaque = document.getElementById("botonesDeAtaque")

const sectionMapa = document.getElementById("verMapa")
const mapa = document.getElementById("mapa")

let mokepones = []
let ataqueJugador = []
let ataqueEnemigo = []
let opcionDeMokepones
let inputHipodoge
let inputCapipepo
let inputRatigueya
let inputPaidos
let inputTucapalma
let inputLangostelvis
let inputRafis
let mascotaJugador
let mascotaJugadorObjeto
let ataquesMokepon
let ataquesMokeponEnemigo
let btnFuego
let btnAgua
let btnTierra
let botones = []
let indexAtaqueJugador
let indexAtaqueEnemigo
let victoriasJugador = 0
let victoriasEnemigo = 0
let vidasEnemigo = 3
let vidasJugador = 3
let numeroDeAtaques
let Fuego = { nombre: "🔥", id: "ataque-fuego"}
let Agua = { nombre: "💦", id: "ataque-agua"}
let Tierra = { nombre: "🌏", id: "ataque-tierra"}
let lienzo = mapa.getContext("2d")
let intervalo
let mapaBackground = new Image()
mapaBackground.src = "./png/mokemap.webp"

class Mokepon {
    constructor(nombre, foto, vida, ataques) {
        this.nombre = nombre
        this.foto = foto
        this.vida = vida
        this.ataques = ataques
        this.x = 20
        this.y = 30 
        this.ancho = 80
        this.alto = 80
        this.mapaFoto = new Image()
        this.mapaFoto.src = foto
        this.velocidadX = 0
        this.velocidadY = 0
    }
}

ataques = []

let hipodoge = new Mokepon("Hipodoge", "png/hipodoge.png", 5, [Agua, Tierra, Fuego, Agua])

let capipepo = new Mokepon("Capipepo", "png/capipepo.png", 5, [Tierra, Fuego, Agua, Tierra])

let ratigueya = new Mokepon("Ratigueya", "png/ratigueya.png", 5, [Fuego, Agua, Tierra, Fuego])

let langostelvis = new Mokepon("Langostelvis", "png/langostelvis.png", 5, [Agua, Agua, Tierra, Fuego, Fuego])

let tucapalma = new Mokepon("Tucapalma", "png/tucapalma.png", 5, [Agua, Agua, Fuego, Tierra, Tierra])

let paidos = new Mokepon("Paidos", "png/paidos.png", 5, [Fuego, Fuego, Agua, Tierra, Tierra, Tierra])

let rafis = new Mokepon("Rafis", "png/mafis.png", 5, [Fuego, Fuego, Agua, Agua, Tierra, Tierra])

mokepones.push(hipodoge, capipepo, ratigueya, langostelvis, tucapalma, paidos, rafis)

function iniciarJuego() {

    sectionSeleccionarAtaques.style.display = "none"
    sectionReiniciar.style.display = "none"
    sectionMapa.style.display = "none"

    mokepones.forEach((mokepon) => {
        opcionDeMokepones = `
        <input type="radio" name="mascota" id=${mokepon.nombre}>
        <label for=${mokepon.nombre} class="tarjeta-de-mokepon parrafos-edit">
            <p>${mokepon.nombre}</p>
            <img src="${mokepon.foto}" alt=${mokepon.nombre}>
        </label>
        `
    contenedorTarjetas.innerHTML += opcionDeMokepones

    inputHipodoge = document.getElementById("Hipodoge")
    inputCapipepo = document.getElementById("Capipepo")
    inputRatigueya = document.getElementById("Ratigueya")
    inputPaidos = document.getElementById("Paidos")
    inputTucapalma = document.getElementById("Tucapalma")
    inputLangostelvis = document.getElementById("Langostelvis")
    inputRafis = document.getElementById("Rafis")

    })

    btnMascota.addEventListener("click", seleccionarMascotaJugador)


    btnSiguienteBatalla.addEventListener("click", reiniciarJuego)
}

function cambiarPantallaMapa() {

    sectionSeleccionarMascota.style.display = "none"
    // sectionSeleccionarAtaques.style.display = "flex"
    sectionMapa.style.display = "flex"
    iniciarMapa()


    btnMascota.disabled = true
}

function seleccionarMascotaJugador() {


    if (inputHipodoge.checked == true) {
        spanMascotaJugador.innerHTML = inputHipodoge.id
        mascotaJugador = inputHipodoge.id
        numeroDeAtaques = hipodoge
        cambiarPantallaMapa()
    } else if (inputCapipepo.checked == true) {
        spanMascotaJugador.innerHTML = inputCapipepo.id
        mascotaJugador = inputCapipepo.id
        numeroDeAtaques = capipepo
        cambiarPantallaMapa()
    } else if (inputRatigueya.checked == true) {
        spanMascotaJugador.innerHTML = inputRatigueya.id
        mascotaJugador = inputRatigueya.id
        numeroDeAtaques = ratigueya
        cambiarPantallaMapa()
    } else if (inputPaidos.checked == true) {
        spanMascotaJugador.innerHTML = inputPaidos.id
        mascotaJugador = inputPaidos.id
        numeroDeAtaques = paidos
        cambiarPantallaMapa()
    } else if (inputTucapalma.checked == true) {
        spanMascotaJugador.innerHTML = inputTucapalma.id
        mascotaJugador = inputTucapalma.id
        numeroDeAtaques = tucapalma
        cambiarPantallaMapa()
    } else if (inputLangostelvis.checked == true) {
        spanMascotaJugador.innerHTML = inputLangostelvis.id
        mascotaJugador = inputLangostelvis.id
        numeroDeAtaques = langostelvis
        cambiarPantallaMapa()
    } else if (inputRafis.checked == true) {
        spanMascotaJugador.innerHTML = inputRafis.id
        mascotaJugador = inputRafis.id
        numeroDeAtaques = rafis
        cambiarPantallaMapa()
    } else{
        alert("ERROR❗ Elige una mascota 😳")
    }

    extraerAtaques(mascotaJugador)
    seleccionarMascotaEnemigo()

}

function extraerAtaques(mascotaJugador) {
    let ataques 
    for (let i = 0; i < mokepones.length; i++) {
        if (mascotaJugador === mokepones[i].nombre) {
            ataques = mokepones[i].ataques
        }
    }
    mostrarAtaques(ataques)
}

function mostrarAtaques(ataques) {
    ataques.forEach((ataque) => {
        ataquesMokepon = `
        <button id=${ataque.id} class="btn-ataque BAtaque ${ataque.nombre}">${ataque.nombre}</button>
        `
        botonesDeAtaque.innerHTML += ataquesMokepon
    })

    btnFuego = document.getElementById("ataque-fuego")
    btnAgua = document.getElementById("ataque-agua")
    btnTierra = document.getElementById("ataque-tierra")
    botones = document.querySelectorAll(".BAtaque")

}

function secuenciaAtaque() {
    botones.forEach((boton) => {
        boton.addEventListener('click', (e) => {
            if (e.target.textContent === '🔥') {
                ataqueJugador.push('FUEGO')
                boton.style.background = '#848484'  
                boton.disabled = true 
            } else if (e.target.textContent === '💦') {
                ataqueJugador.push('AGUA')
                boton.style.background = '#848484'
                boton.disabled = true
            } else {
                ataqueJugador.push('TIERRA')
                boton.style.background = '#848484'
                boton.disabled = true
            }
            ataquesEnemigo()
        })
    })
}

function seleccionarMascotaEnemigo() {
    let mascotaAleatorio = aleatorio(0, mokepones.length-1)

    spanMascotaEnemigo.innerHTML = mokepones[mascotaAleatorio].nombre
    ataquesMokeponEnemigo = mokepones[mascotaAleatorio].ataques

    secuenciaAtaque()
}



function ataquesEnemigo() {
    let ataqueAleatorio = aleatorio(0, mokepones.length-1)

    if (ataqueAleatorio == 0 || ataqueAleatorio == 1) {
        ataqueEnemigo.push("FUEGO")
    } else if (ataqueAleatorio == 3 || ataqueAleatorio == 4) {
        ataqueEnemigo.push("AGUA")
    } else {
        ataqueEnemigo.push("TIERRA")
    }

    iniciarPelea()
}

function iniciarPelea() {
    if (ataqueJugador.length === numeroDeAtaques.ataques.length) {
        batalla()
    }
}

function indexAmbosOponentes(jugador, enemigo) {
    indexAtaqueJugador = ataqueJugador[jugador]
    indexAtaqueEnemigo = ataqueEnemigo[enemigo]
}

function batalla() {

    for (let index = 0; index < ataqueJugador.length; index++) {
        if (ataqueJugador[index] === ataqueEnemigo[index]) {
            indexAmbosOponentes(index, index)
            crearMensaje("EMPATE")
        } else if (ataqueJugador[index] === "FUEGO" && ataqueEnemigo[index] === "TIERRA") {
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE")
            victoriasJugador++
            spanVidasJugador.innerHTML = victoriasJugador
        } else if (ataqueJugador[index] === "AGUA" && ataqueEnemigo[index] === "FUEGO"){
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE")
            victoriasJugador++
            spanVidasJugador.innerHTML = victoriasJugador
        } else if (ataqueJugador[index] === "TIERRA" && ataqueEnemigo[index] === "AGUA"){
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE")
            victoriasJugador++
            spanVidasJugador.innerHTML = victoriasJugador
        } else {
            indexAmbosOponentes(index, index)
            crearMensaje("PERDISTE")
            victoriasEnemigo++
            spanVidasEnemigo.innerHTML = victoriasEnemigo
        }
    }

    revisarVidas()

} 

function crearMensaje(resultado) {

    let nuevoAtaqueDelJugador = document.createElement("p")
    let nuevoAtaqueDelEnemigo = document.createElement("p")

    seccionMensajes.innerHTML = resultado
    nuevoAtaqueDelJugador.innerHTML = indexAtaqueJugador
    nuevoAtaqueDelEnemigo.innerHTML = indexAtaqueEnemigo

    ataquesDelJugador.appendChild(nuevoAtaqueDelJugador)
    ataquesDelEnemigo.appendChild(nuevoAtaqueDelEnemigo)
}

function crearMensajeFinal(resultadoFinal) {

    seccionMensajes.innerHTML = resultadoFinal

    sectionReiniciar.style.display = "block"
}

function revisarVidas() {
    if (victoriasJugador === victoriasEnemigo) {
        crearMensajeFinal("ESTO FUE UN EMPATE 🤪")
    } else if ( victoriasJugador > victoriasEnemigo){
        crearMensajeFinal("¡FELICITACIONES! GANASTE :)")
    } else{
        crearMensajeFinal("SUERTE PARA LA PROXIMA 💔")
    }
}

function reiniciarJuego() {
    location.reload()
}

function aleatorio(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min)
}

function pintarCanvas() {
    mascotaJugadorObjeto.x += mascotaJugadorObjeto.velocidadX
    mascotaJugadorObjeto.y += mascotaJugadorObjeto.velocidadY
    lienzo.clearRect(0,0, mapa.width, mapa.height)
    lienzo.drawImage(
        mapaBackground,
        0,
        0,
        mapa.width,
        mapa.height
    )
    lienzo.drawImage(
        mascotaJugadorObjeto.mapaFoto,
        mascotaJugadorObjeto.x,
        mascotaJugadorObjeto.y,
        mascotaJugadorObjeto.ancho,
        mascotaJugadorObjeto.alto
        )
}


 function moverDerecha(){
    mascotaJugadorObjeto.velocidadX = 5
 }
 function moverIzquierda(){
    mascotaJugadorObjeto.velocidadX = -5
 }
 function moverAbajo() {
    mascotaJugadorObjeto.velocidadY = 5
 }
 function moverArriba() {
    mascotaJugadorObjeto.velocidadY = -5
 }

 function detenerMovimiento() {
    mascotaJugadorObjeto.velocidadX = 0
    mascotaJugadorObjeto.velocidadY = 0
 }

 function sePrecionoUnaTecla(event) {
    switch (event.key) {
        case"ArrowUp":
        case"w":
            moverArriba()            
            break;
        case"ArrowDown":
        case"s":
            moverAbajo()            
            break;           
        case"ArrowLeft":
        case"a":
            moverIzquierda()            
            break;
        case"ArrowRight":
        case"d":
            moverDerecha()            
            break;      
        default:
            break;
    }
 }

function iniciarMapa() {
    mapa.width = 650
    mapa.height = 450
    mascotaJugadorObjeto = obtenerObjetoMascota()

    intervalo = setInterval(pintarCanvas, 50)
    window.addEventListener("keydown", sePrecionoUnaTecla)
    window.addEventListener("keyup", detenerMovimiento)
}

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

window.addEventListener("load", iniciarJuego)

Ctrl + f
Busca las concidencias de los que seleccionamos es decir las mismas variables,funciones, etc, donde se repite en el codigo.

Me encanta este curso introductorio que me da miedo porque parece profesional

Eres una excelente profesora te felicito😃

Lo llevo asi pero quiero modificar con el personaje que se recorre el mapa.

Buenas! En mi caso lo que hice para poder pintar el personaje seleccionado fue almacenar en una variable los arreglos de mi personaje luego de que hicieran match al coincider el nombre seleccionado y la variebla con indice. De esa manera la pude utilizar despues sin problemas.
PD: Dejo una captura de mi proyecto. En mi caso utilice un tema diferente 😃

Me parece que este mapa es mucho mejor ❤️

Me encantó esta clase, porque admito que me reí juerte cuando vi que eran mas de 100 errores, luego de ver que lo solucionaste comprendiendo el código y era algo tan aparentemente sencillo, excelente.

nos están enseñando tantas cosas tan impresionantes GRATIS y hay quien se queja…

por ejemplo aprendí como pintar el canvas por medio de un objeto y su atributo src, y como pintar directamente con un src

como no veo un mensaje que lo diga el error que aparecía no era por el iniciar mapa el verdadero problema era que la profe le pasa una variable a la función y esta no la pide

** Aqui esta otra opcion de el mapa**
![](

Les dejo una lista de shortcuts para vsc.

Pueden usar ctrl+shift+L si quieren seleccionar todas las coincidencias, por ejemplo si deseas cambiar todas las coincidencias de “capipepo” lo sombreas y usas el comando, cuando cambies el nombre se cambiará en todo el documento.

VAMOSSS ASI LO TERMINO

Dios esta parte me dío problemas porque me olvidé borrar unas líneasd alskdjsakldsajk
Hasta la pedí ayuda a ChatGPT, pero todo bien, gracias por estas clases!

Poco a poco llegando a pueblo LAVANDA

html {
scroll-behavior: smooth;
}

este codigo se coloca al inicio de css sirve para mejorar la calidad de las imagenes(no para mejorar la calidad de la imagen en canvas)

En mi caso no reutilicé el ciclo for en una nueva función, sino que utilicé la misma función de ataques de mascota jugador para obtener todo el objeto mascota jugador en una nueva variable (objetoMascotaJug):

function ataquesJugador(mascotaJugador) {
    
    for (let i = 0; i < mascotas.length; i++) {
        
        if (mascotaJugador === mascotas[i].nombre ) {
            ataquesMascotaJug = mascotas[i].ataques
            objetoMascotaJug = mascotas[i]
        }
    }
    
    verAtaques(ataquesMascotaJug)
}

Luego llame a la función de cargar el mapa de canvas en la función para seleccionar la mascota del jugador, después de haber llamado a la función de ataques mascota jugador:

function seleccionarMascotaJug() {

    sectionSelMascota.style.display = "none"
    /* sectionSelAtaque.style.display = "flex"*/

    /* sectionVerMapa.style.display ="flex" */
    /*  iniciarMapa()*/
    
        if (inputHypodoge.checked) {
            parrMascotaJug.innerHTML = inputHypodoge.id
            imgMascotaJug.innerHTML = "<img src=./assets/mokepons_mokepon_hypodoge_attack.png>"
            mascotaJugador = inputHypodoge.id
        }   else if (inputCapipepo.checked) {
            parrMascotaJug.innerHTML = inputCapipepo.id
            imgMascotaJug.innerHTML = "<img src=./assets/mokepons_mokepon_capipepo_attack.png>"
            mascotaJugador = inputCapipepo.id
        }   else if (inputRatigueya.checked) {
            parrMascotaJug.innerHTML = inputRatigueya.id
            imgMascotaJug.innerHTML = "<img src=./assets/mokepons_mokepon_ratigueya_attack.png>"
            mascotaJugador = inputRatigueya.id
        }   else if (inputTucapalma.checked) {
            parrMascotaJug.innerHTML = inputTucapalma.id
            imgMascotaJug.innerHTML = "<img src=./assets/mokepons_mokepon_tucapalma_attack.png>"
            mascotaJugador = inputTucapalma.id
        }   else if (inputLangostelvis.checked) {
            parrMascotaJug.innerHTML = inputLangostelvis.id
            imgMascotaJug.innerHTML = "<img src=./assets/mokepons_mokepon_langostelvis_attack.png>"
            mascotaJugador = inputLangostelvis.id
        }   else if (inputPydos.checked) {
            parrMascotaJug.innerHTML = inputPydos.id
            imgMascotaJug.innerHTML = "<img src=./assets/mokepons_mokepon_pydos_attack.png>"
            mascotaJugador = inputPydos.id           
        }   else {
            alert("DEBES HACER UNA ELECCION")
            reiniciarJuego()
        }
            
    ataquesJugador(mascotaJugador)
    
    sectionVerMapa.style.display ="flex"
    iniciarMapa()

    seleccionarMascotaOpo()    
}

Luego sustituí “capipepo” por “objetoMascotaJug” en todas las funciones de colocar y mover a la mascota:

function colocarMascotaMapa() {
    objetoMascotaJug.x = objetoMascotaJug.x + objetoMascotaJug.speedX
    objetoMascotaJug.y = objetoMascotaJug.y + objetoMascotaJug.speedY

    figuraMapa.clearRect(0, 0, mapa.width, mapa.height)

    figuraMapa.drawImage(mapaBackground, 0, 0, mapa.width, mapa.height) 

    figuraMapa.drawImage(
        objetoMascotaJug.mapaMascota,
        objetoMascotaJug.x,
        objetoMascotaJug.y,
        objetoMascotaJug.ancho,
        objetoMascotaJug.alto) 
}

function moverMascotaMapader() {
    /*para evento onclick: capipepo.x = capipepo.x + 5 */

    objetoMascotaJug.speedX = 5
    colocarMascotaMapa()    
}

function moverMascotaMapaizq() {

    objetoMascotaJug.speedX = -5
    colocarMascotaMapa()    
}

function moverMascotaMapaarr() {

    objetoMascotaJug.speedY = -5
    colocarMascotaMapa()    
}

function moverMascotaMapaaba() {

    objetoMascotaJug.speedY = 5
    colocarMascotaMapa()    
}

function detenerMovMasc() {
    objetoMascotaJug.speedX = 0
    objetoMascotaJug.speedY = 0
}

ayudaaaaa me quede en el error de clase pasada del bucle infinito ;-; me la pase todo el dia intentando arreglarlo pero no pude sinceramente este tipo de cosas me dan ganas de dejar el codigo

Asi va quedando el mio, aunque el Mapa y el Mokepon se ven bastante pixeleados y no se como hacerle para que se vean mas nitidos…

En vez de utilizar ctrl + f, podemos utilizar f2 y nos habre una ventana en donde podemos renombrarlo y una vez renombrado nos cambia todas las variables por el nombre que pusimos

Un poquito de analisis pero finalmente salio xde

A mi me sale que el juego esta roto

Aquí vamos!

Si le dan CTRL + F y le dan en la flechita de al lado pueden reemplazar uno o todas las palabras con estos botones

Poder ver a alguien encontrar fallos en su código y hacerse cargo de ellos me parece de las cosas más valiosas del curso (junto con otras muchas más).

🥲 La solución de mascotaJugadorObjeto = mokepones[i] 👨🏻‍🍳🤌🏻💞 yo me dediqué a crear variables donde guardar cada dato let mascotaX = mokepones[i].x, let mascotaY = mokepones[i].y… innecesario. Lo arreglaré en otro momento porque por ahora con mis variables puedo continuar con el curso

esta profesora se equivoca mucho y da demasiadas vueltas, aun asi sigue siendo buena pero creo q los videos serian mas directos sin tanto error

Esta profe me gusta, es más practica

Ahi va.

quisiera compartir como hice mi función para guardar la información de la mascota del jugador y así poder imprimir las imágenes, y en general cualquier información de forma más sencilla:

//primero añadí el arreglo "inputs[]" a la clase de Mokepon para que después de generar cada input, este se guardara en cada mokepon

después, en la función seleccionarMascotaJugador, usé el siguiente código:

function seleccionarMascotaJugador() {
    mokepones.forEach((mokepon) => {
        if (mokepon.inputs[0].checked){
            jugador ++
            // genere anteriormente la variable global jugador = 0 para usarla en casa de que el jugador no escogiera mascota
            mascotaJugador = mokepon
            // específicamente es en esta parte donde guardo la información del Mokepon que escoge el jugador, y así puedo acceder más fácilmente
            spanMascotaJugador.innerHTML = mokepon.nombre
            ataquesU = mokepon.ataquesM
            imagen1 = ` <img src=${mokepon.imagen} alt=${mokepon.nombre}> `
            imgJugador.innerHTML = imagen1
        }
    })

    if (jugador > 0) {
        seleccionarMascotaEnemigo()
        mostrarAtaques(ataquesU)
    } else if (jugador == 0){
        alert("Por favor, elige una mascota")
    }
}

ya después, puedo acudir directamente a mascotaJugador en la función de pintar el mapa:

function pintarMapa() {
    mascotaJugador.x = mascotaJugador.x + mascotaJugador.velocidadX
    mascotaJugador.y = mascotaJugador.y + mascotaJugador.velocidadY
    lienzo.clearRect(0, 0, mapa.width, mapa.height)
    lienzo.drawImage(
        imagenMapa,
        0,
        0,
        mapa.width,
        mapa.height
    )
    lienzo.drawImage(
        mascotaJugador.imagenMapa,
        mascotaJugador.x,
        mascotaJugador.y,
        mascotaJugador.width,
        mascotaJugador.height
    )
}

He adaptado la función que selecciona el objeto de la mascota para seleccionar ambos personajes y de igual forma asignarle las imágenes correspondientes a cada participante ( jugador y enemigo )

buenas, una pregunta, yo cuando pongo el mokepon y el mapa se me ve todo borroso/oixelado, alguno sabe porque?
yo investigue y es por los pixeles de la imagen, como hago para cambiarlo?

EL ERROR DE LA CLASE 65 JAMÁS SE LOGRA ARREGLAR, ES UNA LASTIMA, VENÍA MUY ENTUSIASMADO, CABE RESALTAR QUE NISIQUIERA COPIANDO EL CODIGO DEJADO EN GITHUB, JAMÁS LO PENSÉ PERO AHORA PUNTO NEGATIVO PARA PLATZI.

Como observación, podemos declarar la variable const miMokepon = obtenerObjetoMascota() al inicio en la sección de variables de nuestro código.

Luego, llamarlo en cada una de las funciones y listo.

si igual les pasa que al usar arriba y abajo se les mueve el navegador, les recomiendo que pongan en el css height: 98vh;

<code> 
#ver-mapa{
	height: 98vh;
}

Mi codigo hasta el momento
HTML:

<section id="ver-mapa">
        <h1 class="titulo">Recorre el mapa con tu Mokepon</h1>
        <canvas id="mapa"></canvas>
        <button id="mover-mascota-up" class="moverMascota" onmouseup="detenerMovimiento()" onmousedown="moverMokepon('up')">Mover 🔼</button>
        <button id="mover-mascota-do" class="moverMascota" onmouseup="detenerMovimiento()" onmousedown="moverMokepon('do')">Mover 🔽</button>
        <button id="mover-mascota-le" class="moverMascota" onmouseup="detenerMovimiento()" onmousedown="moverMokepon('le')">Mover ◀</button>
        <button id="mover-mascota-ri" class="moverMascota" onmouseup="detenerMovimiento()" onmousedown="moverMokepon('ri')">Mover ▶</button>
    </section>

JAVASCRIPT:

const sectionVerMapa = document.getElementById('ver-mapa')
const mapa = document.getElementById('mapa')

// Tiene que ser 2d --> le habia puesto 2D y no funciono
let lienzo = mapa.getContext("2d")

let intervalo

let mapaBackground = new Image()
mapaBackground.src = "./images/mokemap.png"

let oMokeponEscogido

function iniciarMapa () {
    mapa.width = 640
    mapa.height = 480

    //ojo en el intervalo el llamado a la funcion no lleva ()
    sectionVerMapa.style.display = 'flex'
    intervalo = setInterval(pintarCanvas, 50)

    // Eventos del teclado
    window.addEventListener("keydown", sePresionoUnaTecla)
    window.addEventListener("keyup", detenerMovimiento)

    // Mostrar Mokepon de la mascota que se selecciono
    oMokeponEscogido = mokepones.find(x => x.nombre.toLowerCase() == mascotaJugadorId)
    console.log(oMokeponEscogido)
}

function pintarCanvas() {
    // Se va actualizando la posicion con la velocidad
    oMokeponEscogido.x += oMokeponEscogido.velocidadX
    oMokeponEscogido.y += oMokeponEscogido.velocidadY

    // Funcion que limpia el canvas
    lienzo.clearRect(0, 0, mapa.width, mapa.height)

    // Pintar el background
    lienzo.drawImage(
        mapaBackground,
        0,
        0,
        mapa.width,
        mapa.height
    )

    // Ahora se ingresa la imagen directamente en el constructor
    lienzo.drawImage(
        oMokeponEscogido.mapaFoto,
        oMokeponEscogido.x,
        oMokeponEscogido.y,
        oMokeponEscogido.ancho,
        oMokeponEscogido.alto
    )
}

function moverMokepon(moverDireccion) {

    switch (moverDireccion) {
        case "up":
            oMokeponEscogido.velocidadY -= 5
            break
        case "do":
            oMokeponEscogido.velocidadY += 5
            break;
        case "le":
            oMokeponEscogido.velocidadX -= 5
            break;
        case "ri":
            oMokeponEscogido.velocidadX += 5
            break;
    }

    // Ahora en seleccionarMascotaJugador se creo intervalo 
    // que continuamente llama a esta funcion
    // pintarCanvas()
}

function sePresionoUnaTecla(event) {
    // console.log(event.key)

    switch (event.key) {
        case "ArrowUp":
            moverMokepon('up')
            break
        case "ArrowDown":
            moverMokepon('do')
            break
        case "ArrowLeft":
            moverMokepon('le')
            break
        case "ArrowRight":
            moverMokepon('ri')
            break
    }
}

function detenerMovimiento() {
    oMokeponEscogido.velocidadX = 0
    oMokeponEscogido.velocidadY = 0
}

No se, no me gusto esta clase

Como solucionar la vida en errores, gracias por hacerlo...

con Ctrl + Shift+ L también selecciona todas las coincidencias para cambiar el nombre de las variables o funciones

Demoré para que la imagen me apareciera pero lo logré, para los que tengan el mismo error, el problema que yo tenía era que estaba colocando la linea de codigo donde se dibuja el mapa antes de la linea donde borra el lienzo, entonces lo que estaba pasando era que se estaba borrando cada vez, espero poder ayudar a alguien con mi aporte

Para lo que tengan el error que no aparece la imagen,recuerden que ella busca la foto en la carpeta assets, tienen que guardar la imagen en esa carpeta, de nada:)))

Creo que cuando se usa la variable de “mascotaJugadorObjeto” y se le asigna el valor de la función “obtenerObjetoMascota(mascotaJugador)” no es necesario pasarle como parámetro la selección del jugador, dado que la función ya trae el objeto (mokepon) que se retornó del bucle for.

<function iniciarMapa() {
    mapa.width = 320
    mapa.height = 240
    mascotaJugadorObjeto = obtenerObjetoMascota()
    console.log(mascotaJugadorObjeto, mascotaJugador);
    intervalo = setInterval(pintarCanvas, 50)
    
    window.addEventListener('keydown', sePresionoUnaTecla)

    window.addEventListener('keyup', detenerMovimiento)
}

function obtenerObjetoMascota() {
    for (let i = 0; i < mokepones.length; i++) {
        if (mascotaJugador === mokepones[i].nombre) {
            return mokepones[i]
        }
        
    }
}> 

Gracias por la clase.

Me gusto mucho que haya buscado los errores de esa forma, se aprende mucho asi

Lo que me costó esta clase lpm jajajja a todos los que llegaron hasta acá no se rindan busquen la solución al error y créanme que el problema es más fácil de lo que parece💪🏽⭐⭐⭐

Hola a todos! Primero que nada felicitaciones a los que hemos llegado hasta este nivel, ha sido un gran aprendizaje. Lo segundo era que habia tenido problemas para que me cargara la imagen y simplemente le quite el assest y asi me quedo el codigo:
let mapaBackground = new Image()
mapaBackground.src = ‘./mokemap.png’

espero le pueda servir a alguien 😄

Cuando enseña a buscar palabras iguales con ctrl + f
En el menú de búsqueda que aparece arriba si desplegamos la flecha izquierda nos va a salir la palabra replace y un espacio abajo donde posemos introducir la nueva palabra que va a reemplazar a la anterior

Estefany Salas >>>>