Segui los pasos pero a mi me sigue generando dos clicks <code>// Variables constantes ligadas a elementos de HTML que no cambian const s...

Pregunta de la clase:
Programación de eventos y colisiones en un juego interactivo
Adonay Lizardo

Adonay Lizardo

Pregunta
student•hace 3 años

Segui los pasos pero a mi me sigue generando dos clicks

// Variables constantes ligadas a elementos de HTML que no cambian

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

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')

// Variables Globales

let mokepones = []
let ataqueJugador = []
let ataqueEnemigo = []
let opcionDeMokepones
let inputYoda
let inputAhsoka
let inputVader
let mascotaJugador
let mascotaJugadorObjeto
let ataquesMokepon
let ataquesMokeponEnemigo
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 = './assets/mokemap.png'

// Creamos Objetos (personajes)

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

    pintarMokepon() {
        lienzo.drawImage (
            this.mapaFoto,
            this.x,
            this.y,
            this.ancho,
            this.alto
        )
    }
}

// Personajes del Jugador

let yoda = new Mokepon('Yoda', './assets/personajes_yoda.gif', 3, './assets/personajes_yoda.gif')
let ahsoka = new Mokepon('Ahsoka', './assets/personajes_ahsoka.png', 3, './assets/personajes_ahsoka.png')
let vader = new Mokepon('Vader', './assets/personajes_vader.png', 3, './assets/personajes_vader.png')
let chewbacca = new Mokepon('Chewbacca', './assets/personajes_chewbacca.png', 3, './assets/personajes_chewbacca.png')
let jango = new Mokepon('Jango', './assets/personajes_jango.png', 3, './assets/personajes_jango.png')
let han = new Mokepon('Han', './assets/personajes_han.gif', 3, './assets/personajes_han.gif')

// Personajes del Enemigo

let yodaEnemigo = new Mokepon('Yoda', './assets/personajes_yoda.gif', 3, './assets/personajes_yoda.gif', 80, 120)
let ahsokaEnemigo = new Mokepon('Ahsoka', './assets/personajes_ahsoka.png', 3, './assets/personajes_ahsoka.png', 150, 95)
let vaderEnemigo = new Mokepon('Vader', './assets/personajes_vader.png', 3, './assets/personajes_vader.png', 200, 190)
let chewbaccaEnemigo = new Mokepon('Chewbacca', './assets/personajes_chewbacca.png', 3, './assets/personajes_chewbacca.png', 40, 60)
let jangoEnemigo = new Mokepon('Jango', './assets/personajes_jango.png', 3, './assets/personajes_jango.png', 75, 35)
let hanEnemigo = new Mokepon('Han', './assets/personajes_han.gif', 3, './assets/personajes_han.gif', 100, 100)

// Ataques Personajes Jugador

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

ahsoka.ataques.push(
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '💧', id: 'boton-agua' },

)

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

chewbacca.ataques.push(
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '🔥', id: 'boton-fuego' },
)

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

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

// Ataques Personajes Enemigo

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

ahsokaEnemigo.ataques.push(
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '💧', id: 'boton-agua' },

)

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

chewbaccaEnemigo.ataques.push(
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '🔥', id: 'boton-fuego' },
)

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

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

mokepones.push(yoda, ahsoka, vader, chewbacca, jango, han)

// Iniciar juego

function iniciarJuego(){

    sectionSeleccionarAtaque.style.display = 'none'
    sectionVerMapa.style.display = 'none'

    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 

     inputYoda = document.getElementById('Yoda')
     inputAhsoka = document.getElementById('Ahsoka')
     inputVader = document.getElementById('Vader')
     inputChewbacca = document.getElementById('Chewbacca')
     inputJango = document.getElementById('Jango')
     inputHan = document.getElementById('Han')

    })

    sectionReiniciar.style.display = 'none'

    // Variables
    
    botonMascotaJugador.addEventListener('click',seleccionarMascotaJugador)

    // Eventos
    
    
    botonReiniciar.addEventListener('click', reiniciarJuego)

}

// Funciones para mascotas

function seleccionarMascotaJugador() {

    sectionSeleccionarMascota.style.display = 'none'


    if (inputYoda.checked) {
        spanMascotaJugador.innerHTML = inputYoda.id
        mascotaJugador = inputYoda.id
    } else if (inputAhsoka.checked) {
        spanMascotaJugador.innerHTML = inputAhsoka.id
        mascotaJugador = inputAhsoka.id
    } else if (inputVader.checked) {
        spanMascotaJugador.innerHTML = inputVader.id
        mascotaJugador = inputVader.id
    } else if (inputChewbacca.checked) {
        spanMascotaJugador.innerHTML = inputChewbacca.id
        mascotaJugador = inputChewbacca.id
    } else if (inputJango.checked) {
        spanMascotaJugador.innerHTML = inputJango.id
        mascotaJugador = inputJango.id
    } else if (inputHan.checked) {
        spanMascotaJugador.innerHTML = inputHan.id
        mascotaJugador = inputHan.id
    } else {
        alert('Selecciona tu mascota')
    }

    extraerAtaques(mascotaJugador)
    sectionVerMapa.style.display = 'flex'
    iniciarMapa()
    
}

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="boton-de-ataque BAtaque">${ataque.nombre}</button>
        `
        contenedorAtaques.innerHTML += ataquesMokepon
    })

     botonFuego = document.getElementById('boton-fuego')
     botonAgua = document.getElementById('boton-agua')
     botonTierra = document.getElementById('boton-tierra')
     botones = document.querySelectorAll('.BAtaque')

}

function secuenciaAtaque() {
    botones.forEach((boton) => {
        boton.addEventListener('click',(e) => {
            if (e.target.textContent === '🔥') {
                ataqueJugador.push('Fuego 🔥')
                console.log(ataqueJugador)
                boton.style.background = '#30336b'
                boton.disabled = true
            } else if (e.target.textContent === '💧') {
                ataqueJugador.push('Agua 💧')
                console.log(ataqueJugador)
                boton.style.background = '#30336b'
                boton.disabled = true
            } else {
                ataqueJugador.push('Tierra 🌱')
                console.log(ataqueJugador)
                boton.style.background = '#30336b'
                boton.disabled = true
            }
            ataqueAleatorioEnemigo()

        })
    })
}

function seleccionarMascotaEnemigo () {
    let mascotaAleatoria = aleatorio(0,mokepones.length -1)
    
    spanMascotaEnemigo.innerHTML = mokepones[mascotaAleatoria].nombre
    ataquesMokeponEnemigo = mokepones[mascotaAleatoria].ataques
    secuenciaAtaque()
}


function ataqueAleatorioEnemigo() {
    let ataqueAleatorio = aleatorio(0,ataquesMokeponEnemigo.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]
}

// Funciones para combates

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

// Funciones para revisar vidas

function revisarVidas() {
    if (victoriasJugador === victoriasEnemigo) {
        crearMensajeFinal("Esto fue un empate!!! 🏳")
    } else if (victoriasJugador > victoriasEnemigo) {
        crearMensajeFinal("FELICITACIONES! Ganaste 🏆")
    } else {
        crearMensajeFinal('Lo siento, perdiste 😭')
    }
}

// Funciones para mensajes

function crearMensaje(resultado) {

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

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

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

}

function crearMensajeFinal(resultadoFinal) {
    
    sectionMensajes.innerHTML = resultadoFinal

    sectionReiniciar.style.display = 'block'

}

function reiniciarJuego() {
    location.reload()
}

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

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
    )
   mascotaJugadorObjeto.pintarMokepon()
   yodaEnemigo.pintarMokepon()
   ahsokaEnemigo.pintarMokepon()
   vaderEnemigo.pintarMokepon()
   chewbaccaEnemigo.pintarMokepon()
   jangoEnemigo.pintarMokepon()
   hanEnemigo.pintarMokepon()
   if(mascotaJugadorObjeto.velocidadX !== 0 || mascotaJugadorObjeto.velocidadY !== 0) {
    revisarColision(yodaEnemigo)
    revisarColision(ahsokaEnemigo)
    revisarColision(vaderEnemigo)
    revisarColision(chewbaccaEnemigo)
    revisarColision(jangoEnemigo)
    revisarColision(hanEnemigo)

   }

}

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 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 = 400
    mapa.height = 300
    mascotaJugadorObjeto = obtenerObjetoMascota(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]
        }
        
    }
}

function revisarColision (enemigo) {
    const arribaEnemigo = enemigo.y
    const abajoEnemigo = enemigo.y + enemigo.alto
    const derechaEnemigo = enemigo.x + enemigo.ancho
    const izquierdaEnemigo = enemigo.x

    const arribaMascota = 
    mascotaJugadorObjeto.y
    const abajoMascota = 
    mascotaJugadorObjeto.y + mascotaJugadorObjeto.alto
    const derechaMascota = 
    mascotaJugadorObjeto.x + mascotaJugadorObjeto.ancho
    const izquierdaMascota = 
    mascotaJugadorObjeto.x

    if(
        abajoMascota < arribaEnemigo ||
        arribaMascota > abajoEnemigo || 
        derechaMascota < izquierdaEnemigo || 
        izquierdaMascota > derechaEnemigo
    ) {
        return
    }
    detenerMovimiento()
    clearInterval(intervalo)
    console.log('Se detecto una colision')
    sectionSeleccionarAtaque.style.display = 'flex'
    sectionVerMapa.style.display = 'none'
    seleccionarMascotaEnemigo(enemigo)
}

// NOTA: esta es otra manera de llamar al script despues de que se cargue todo el HTML. La funcion iniciarJuego se carga cuando ya todo el contenido esta cargado.

window.addEventListener('load', iniciarJuego)
4 respuestas
para escribir tu comentario
    Dante Escamilla

    Dante Escamilla

    student•hace 2 años

    Tengo el mismo error y aún no lo soluciono, alguien que nos ayude?

    Saul Hirad Pulido Gutierrez

    Saul Hirad Pulido Gutierrez

    student•hace 2 años

    También a mi me da ese error, alguien tendrá la solución a eso?

    Diego Gaeta

    Diego Gaeta

    student•hace 3 años

    Hola tengo el misimo problema como pudiste resolverlo?

    Andrea Hernández

    Andrea Hernández

    student•hace 3 años

    A mi también. Veo que si se pulsa demás a las teclas aparecen las colisiones, no me funciono el clearInterval(intervalo)

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Domina los fundamentos de programación con JavaScript, HTML y CSS creando un videojuego desde cero. Aprende lógica, estructuras, manipulación del DOM y bases de desarrollo web y backend.

Ir al curso
Curso Gratis de Programación Básica
Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Domina los fundamentos de programación con JavaScript, HTML y CSS creando un videojuego desde cero. Aprende lógica, estructuras, manipulación del DOM y bases de desarrollo web y backend.

Ir al curso