Uncaught TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTM...

const sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque") const sectionReiniciar = document.getElementById("reiniciar") const botonMascotaJugador = document.getElementById("boton-mascota")

const botonReiniciarJuego = document.getElementById("boton-reiniciar")

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

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

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

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

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

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

let mokepones = [] let ataqueJugador = [] let ataqueEnemigo = [] let opcionDeMokepones let inputHipodoge let inputCapipepo let inputRatigueya let inputLangostelvis let inputPydos let inputTucapalma let mascotaJugador let mascotaJugadorObjeto let ataquesMokepon let ataqueMokeponEnemigo let botonFuego let botonAgua let botonTierra let botones = [] let indexAtaqueJugador let indexAtaqueEnemigo let victoriasJugador = 0 let victoriasEnemigo = 0 let vidasJugador = 3 let vidasEnemigo = 3 let lienzo = mapa.getContext("2d") let intervalo let mapaBackground = new Image() mapaBackground.src = "mokemap.png"

class Mokepon{ constructor(nombre, foto, vida){ this.nombre = nombre this.foto = foto this.vida = vida this.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 } }

let hipodoge = new Mokepon ("Hipodoge", "./mokepones/hipodoge.png", 5)

let capipepo = new Mokepon ("Capipepo", "./mokepones/capipepo.png", 5)

let ratigueya = new Mokepon ("Ratigueya", "./mokepones/ratigueya.png", 5)

let langostelvis = new Mokepon ("Langostelvis", "./mokepones/langostelvis.png", 5)

let pydos = new Mokepon ("Pydos", "./mokepones/pydos.png", 5)

let tucapalma = new Mokepon ("Tucapalma", "./mokepones/tucapalma.png", 5)

hipodoge.ataques.push( {nombre:"💧",id:"boton-agua"}, {nombre:"💧",id:"boton-agua"}, {nombre:"💧",id:"boton-agua"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"🌱",id:"boton-tierra"}, ),

capipepo.ataques.push( {nombre:"🌱",id:"boton-tierra"}, {nombre:"🌱",id:"boton-tierra"}, {nombre:"🌱",id:"boton-tierra"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"💧",id:"boton-agua"}, ),

ratigueya.ataques.push( {nombre:"🔥",id:"boton-fuego"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"🌱",id:"boton-tierra"}, {nombre:"💧",id:"boton-agua"}, ),

langostelvis.ataques.push( {nombre:"🔥",id:"boton-fuego"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"🌱",id:"boton-tierra"}, {nombre:"💧",id:"boton-agua"}, ),

pydos.ataques.push( {nombre:"🌱",id:"boton-tierra"}, {nombre:"🌱",id:"boton-tierra"}, {nombre:"🌱",id:"boton-tierra"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"💧",id:"boton-agua"}, ),

tucapalma.ataques.push( {nombre:"💧",id:"boton-agua"}, {nombre:"💧",id:"boton-agua"}, {nombre:"💧",id:"boton-agua"}, {nombre:"🔥",id:"boton-fuego"}, {nombre:"🌱",id:"boton-tierra"}, ),

mokepones.push(hipodoge,capipepo,ratigueya,langostelvis,pydos,tucapalma)

function iniciarJuego(){

sectionReiniciar.style.display = "none"//escondemos el boton reiniciar
sectionSeleccionarAtaque.style.display = "none" //escondemos visualmente la secion ataque al principio
sectionVerMapa.style.display = "none"

// por cada mokepon que existe en nuestro array de mokepones has lo siguiente =>{...} mokepones.forEach((mokepon) =>{

 opcionDeMokepones =   `<input type="radio" name="mascota" id=${mokepon.nombre} />
 <label class="tarjeta-de-mokepon" for=${mokepon.nombre} >
     <p>${mokepon.nombre} </p>
     <img src=${mokepon.foto} alt= ${mokepon.nombre} >
 </label>`
  
 contenedorTarjetas.innerHTML += opcionDeMokepones //con el += le decimos que haga iteraciones y recorra todas las opcionDeMokepones
                                                  // y con el innerHTML le decimos que cambie el contenido del contenedorDeTarjetas
                                                //de el DIV de html que ya le asiganamos esta variable arriba con el metodo
                                                  // document.getElement.ById

 inputHipodoge = document.getElementById("Hipodoge") //una vez que se generaron los input arriba en esta misma funcion, le decimos
 inputCapipepo = document.getElementById("Capipepo") // que se ligen los input con las variables para que se guarde la informacion
 inputRatigueya = document.getElementById("Ratigueya")
 inputLangostelvis = document.getElementById("Langostelvis")
 inputPydos = document.getElementById("Pydos")
 inputTucapalma = document.getElementById("Tucapalma")

})

//a la variable le agregamos una lista de eventos que cuando los usuarios apretan el boton que //llamamos con el Id se ejecuta el evento click y luego la funcion de seleccionarMascotaJugador
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador) botonReiniciarJuego.addEventListener("click", reiniciarJuego) }

function seleccionarMascotaJugador(){

sectionSeleccionarMascota.style.display = "none"//ocultamos la seccion de seleccionar mascota y dejamos visual el resto

//sectionSeleccionarAtaque.style.display = "flex"

//getElementById significa: obtener elemento por Id. checked significa si chekiarion o eligieron ese.

if     (inputHipodoge.checked){ 
    spanMascotaJugador.innerHTML = inputHipodoge.id //imprimimos en html el nombre que de la mascota que seleciconamos
    mascotaJugador = inputHipodoge.id // guardamos en una variable el nombre de la mascota que seleccionamos para utilizarla luego
}
else if(inputCapipepo.checked){
    spanMascotaJugador.innerHTML = inputCapipepo.id
    mascotaJugador = inputCapipepo.id
}
else if(inputRatigueya.checked){
    spanMascotaJugador.innerHTML = inputRatigueya.id
    mascotaJugador = inputRatigueya.id
}
else if(inputLangostelvis.checked){
    spanMascotaJugador.innerHTML = inputLangostelvis.id
    mascotaJugador = inputLangostelvis.id 
}

else if(inputPydos.checked){
    spanMascotaJugador.innerHTML = inputPydos.id
    mascotaJugador = inputPydos.id 
}

else if(inputTucapalma.checked){
    spanMascotaJugador.innerHTML = inputTucapalma.id
    mascotaJugador = inputTucapalma.id 
}

else {
    alert("selecciona a tu mascota por favor")
    location.reload()
}



extraerAtaques(mascotaJugador) //llamamos a la funcion de ataques con el parametro de la mascota que hallamos elegido

sectionVerMapa.style.display = "flex"
iniciarMapa()

//automaticamente terminamos de seleccionar nuestra mascota se llama la funcion para que seleccione //de manera aleatoria la mascota del enemigo 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) => { //por cada ataque que exista en el array de ataques has lo siguiente ataquesMokepon =

; // Renderizamos cada ataque del personaje contenedorAtaques.innerHTML += ataquesMokepon; }), // Seleccionar botones luego de crearlos

    botonFuego = document.getElementById("boton-fuego")
    botonAgua = document.getElementById("boton-agua")
    botonTierra = document.getElementById("boton-tierra")
    botones = document.querySelectorAll(".botonesAtaques")//nos selecciona todos los elementos que tengan la misma clase (.) que le decimos
                                                         
    

}

function secuenciaAtaque() { botones.forEach((boton) => { boton.addEventListener('click', (e) => { if (e.target.textContent==="🔥"){ ataqueJugador.push("FUEGO") console.log(ataqueJugador) boton.style.background = '#112f58'
boton.disabled = true
} else if (e.target.textContent==="💧"){ ataqueJugador.push("AGUA") console.log(ataqueJugador) boton.style.background = '#112f58' boton.disabled = true
} else { ataqueJugador.push("TIERRA") console.log(ataqueJugador) boton.style.background = '#112f58' boton.disabled = true } ataqueAleatorioEnemigo() }) })

}

function seleccionarMascotaEnemigo(){ let mascotaAleatoria = aleatorio(0, mokepones.length -1) // le restamos -1 al ultimo para que eliga entre el rango de posiciones de nuestro //array, el 0 cuenta como una posicion y si le sumamos la longitud total luego hay // que restarle -1 para que solo se maneje en la cantidad de posiciones del array.

spanMascotaEnemigo.innerHTML = mokepones[mascotaAleatoria].nombre
ataqueMokeponEnemigo =  mokepones[mascotaAleatoria].ataques

secuenciaAtaque()

}

//Creamos la funcion del ataque aleatorio enemigo con una variable que se le asigna el resultado //de la funcion aleatorio, luego creamos condicionales de acuerdo al resultado aleatorio cambiamos //la variable global de ataqueEnemigo. function ataqueAleatorioEnemigo(){ let ataqueAleatorio = aleatorio(0, ataqueMokeponEnemigo.length -1)

if (ataqueAleatorio == 0 || ataqueAleatorio == 1){
    ataqueEnemigo.push("FUEGO") 

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

console.log(ataqueEnemigo) iniciarPelea() }

function iniciarPelea(){ if(ataqueJugador.length === 5){ combate() } }

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

function combate(){

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 {crearMensaje("PERDISTE") 
            victoriasEnemigo++
            spanVidasEnemigo.innerHTML = victoriasEnemigo
    }
    
}
revisarVidas()
}

function revisarVidas(){ if (victoriasJugador === victoriasEnemigo){ crearMensajeFinal(" ESTO FUE UN EMPATE") } else if(victoriasJugador > victoriasEnemigo){ crearMensajeFinal(" GANASTE,LA MASCOTA DEL ENEMIGO A MUERTO :) ") } else {crearMensajeFinal(" PERDISTE, TU MASCOTA A MUERTO :(")}

}

function crearMensaje(resultado){ //seleccionamos en el doc de html el elemento que tenga el Id "mensajes"y se lo //asignamos a una variable.

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

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

//Creamos un metodo de createElemnt que sirve para crear un parrafo o un //elemento para transmitirlo en pantalla y ponemos su contendo interno con innerHTML

//con otro metodo de manipulacion del DOM appendChild seleccionamos la variable parrafo para que imprima //en pantalla el parrafo que creamos arriba dentro de la seccion de mensajes del html.

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

}

function crearMensajeFinal(resultadoFinal){

sectionMensajes.innerHTML = resultadoFinal

//en el mensaje final llamamos a las variables de los botones y le agregamos el atributo //disabled = true para que se desactiven los botones despues del mensaje final para que //solamente para seguir jugando tengan que apretar el boton reiniciar.

sectionReiniciar.style.display = "block"//habilitamos visualmente el boton reiniciar

}

function reiniciarJuego(){ location.reload()// con este metodo recargamos ubicacion inicial

}

function pintarCanvas() { mascotaJugadorObjeto.x = mascotaJugadorObjeto.x + mascotaJugadorObjeto.velocidadX mascotaJugadorObjeto.y = 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 = 5 }

function moverIzquierda(){ mascotaJugadorObjeto = -5 }

function moverAbajo(){ mascotaJugadorObjeto = 5 }

function moverArriba(){ mascotaJugadorObjeto = -5 }

function detenerMovimiento(){ mascotaJugadorObjeto.velocidadx = 0 mascotaJugadorObjeto.velocidady = 0 } function sePresionoUnaTecla(event) { switch (event.key) { case 'ArrowUp': moverArriba() break case 'ArrowDown': moverAbajo() break case 'ArrowLeft': moverIzquierda() break case 'ArrowRight': moverDerecha() break default: break } }

function iniciarMapa(){ mapa.width=320 mapa.height=240 mascotaJugadorObjeto=obtenerObjetoMascota(mascotaJugador) console.log(mascotaJugadorObjeto,mascotaJugador);intervalo=setInterval(pintarCanvas,50)

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

    }
}     

}

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

//nuestro codigo de js no se va a ejecutar hasta que cargue el evento de "load" para que todos los //elemntos de HTML ya existan y ahi llamamos a la funcion de INICIAR JUEGO Y seleccionamos del HTML //el BOTON-MASCOTA, lo guardamos en una variable botonMascotaJugador y con la funcion addEventListener //cuando le den CLICK mandamos a llamar a la funcion seleccionarMascotaJugador. window.addEventListener("load", iniciarJuego)