Botones bonitos y viewport

Les dejo una propuesta para los botones tipo mando de consola. Pueden hacerlo con display: grid.

Acá el código:

Como podéis ver, la clave para poder posicionar cada botón en la parte que queramos de nuestra Grid es asignarle en nuestro documento HTML una clase para cada posición.

Lugo en el CSS es donde le indicamos en qué posición de nuestra Grid queremos posicionar dicho botón.

En mi ejemplo utilicé en la declaración el selector padre para ser más específico, por si en el futuro el proyecto creciese y aunque no es buena práctica, si hubiese otros componentes con las clases up, right, down y left al ser específicos, estos estilos sólo se aplican a los botones dentro del Grid. Espero que les sirva. Ya falta menos para terminar el curso 💪🏼

💚 💚
Me salvaste la vida con esto

Cuando mantenes el botón para moverte con el mouse y soltas el botón por fuera de su área el jugador se sigue moviendo indefinidamente, esto es porque “detenerMovimiento” se ejecuta cuando soltas el click por encima del botón.
Para evitar eso hay que añadirles a los botones en el HTML

onmouseout="detenerMovimiento()"

para que el jugador no se pueda mover si el mouse no esta encima del botón.

Termine hasta esta parte pero no sé como hacer que los botones funcionen en el celular.
Mokepon - Canvas

Espero volver y haber encontrado la solución.
(Me desanimo ver que eso no funcionaba y me fui una semana de Platzi porque me enoje jajaja)

No sé por qué me dice que el margin no es válido

Tendré que revisar mi CSS

Cuando me doy cuenta de que se viene la parte del Backend.

---

Hola, para que le sirva, lo quise colocar como en un tetris

en HTML dividi cada boton y le asigne una clase especifica

HTML:

< <div class="contenedor-botones">
                <button class="boton-arriba" onmouseup="detenerMovimiento()" onmousedown="moverArriba()">Arriba</button> 
            </div>
            <div>
                <button class="boton-izquierda"onmouseup="detenerMovimiento()" onmousedown="moverIzquierda()">Izquierda</button>
            </div> 
            <div>
                <button class="boton-abajo"onmouseup="detenerMovimiento()" onmousedown="moverAbajo()">Abajo</button> 
            </div>
            <div>
                <button class="boton-derecha"onmouseup="detenerMovimiento()" onmousedown="moverDerecha()">Derecha</button> 
            </div>   > 

CSS:

<.boton-arriba {
    display: flex;
    width: 75px;
    height: 30px;
    padding: 10px;
    margin-top: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 3px solid rgb(0, 0, 0);
    background-color: yellow;
    justify-content: center;
    align-items: center;
}
.boton-abajo {
    display: flex;
    width: 75px;
    height: 30px;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 3px solid rgb(0, 0, 0);
    background-color: yellow;
    justify-content: center;
    align-items: center;
}
.boton-izquierda {
    display: flex;
    width: 75px;
    height: 30px;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 3px solid rgb(0, 0, 0);
    background-color: yellow;
    justify-content: center;
    align-items: center;
    margin-left: -110px;
}
.boton-derecha {
    display: flex;
    width: 75px;
    height: 30px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 3px solid rgb(0, 0, 0);
    background-color: yellow;
    justify-content: center;
    align-items: center;
    margin-left: 150px;
    margin-top:  -70px;
}> 

Termine con la clase N° 70… me falta controlar que el mokepon no se salga del mapa cuando el usuario utiliza los botones de moviemiento con el mouse…(investigare ¿como hacerlo?)… el resto esta terminado con algunos efectos y otras cosas… aqui el resultado:

https://github.com/JorgeRHidalgo/Mokepon---Curso-de-Platzi

Asi quedo mi juego de Mokepon hasta este módulo Link: [MOKEPON ! 🔮 (p3podev.github.io)](https://p3podev.github.io/mokepon/) y Repositorio: [p3podev/mokepon at 84fefe08dc3f1c3f895becfc9c6cc1e9bce0bc55 (github.com)](https://github.com/p3podev/mokepon/tree/84fefe08dc3f1c3f895becfc9c6cc1e9bce0bc55) 

Pensé que lo iban a explicar en la siguiente clase pero no, si abrimos el juego desde el cel hay un bug los botones no funcionan y es por que lo configuramos a que respondan mediante el mouse y cuando tocas la pantalla es una funcion diferente
Aquí explica mas acerca de la funcion ontouch
para hacer funcionar los botones

.
Y este es el codigo que use basicamente fue agregarle que cuando se toque la pantalla inicialice tal funcion

  <button class="button button-move" ontouchstart="moveCharacterUp()"  ontouchend = "stopMove()"onmouseup="stopMove()" onmousedown="moveCharacterUp()">UP</button>

Así va quedando mi juego por ahora. Gracias Platzi 💚 1 1 1

les dejo este código para que los botones funcionen en dispositivos touch

 <button ontouchend="detenerMovimiento()" onmouseup="detenerMovimiento()" ontouchstart="moverArriba()" onmousedown="moverArriba()">Arriba</button>
            <div>
                <button ontouchend="detenerMovimiento()" ontouchstart="moverIzquierda()" onmouseup="detenerMovimiento()" onmousedown="moverIzquierda()">Izquierda</button ontouchend="detenerMovimiento">
                <button ontouchend="detenerMovimiento()" ontouchstart="moverAbajo()" onmouseup="detenerMovimiento()" onmousedown="moverAbajo()">Abajo</button ontouchend="detenerMovimiento">
                <button ontouchend="detenerMovimiento()" ontouchstart="moverDerecha()" onmouseup="detenerMovimiento()" onmousedown="moverDerecha()">Derecha</button>
            </div> 

Realmente la profe Estefany se puso la 10 en esta parte del curso, explicó como hacer algunas cosas de manera clara, muchas gracias

Así me quedó a mi

En VS Code para insertar el meta viewport solo tienen que escribir lo siguiente…

meta:vp

• Resultado Final

Así va quedando mi juego. Las imágenes de fondo fueron generadas con Dall-E, en cualquier momento le hago historia al juego jajaj. Ya a partir de la tercera pantalla mi imaginación comenzó a decaer 😂   

Ya no veo comentarios de que les está siendo difícil, al parecer sólo nos encaprichamos con JavaScript. jaja

 Me gusto como me quedo xD como botones de un control normalito xD

Les muestro mis botones utilizando grid. Aquí pueden ver el resultado, mi código en HTML y en CSS…

Trabajo honesto: 

gracias Profe !

de todo este material con esta profesora me gusta que explica el codigo como si fuera un leguaje, lo que no me gusto es que las variables las enreda haha

Para los que quisieron probar en móvil y los botones no les funcionaron se soluciona en el HTML en donde se declara los métodos "onmouse" 

Un camino bastante chevere, exitos para todos    ![]()

No ha sido nada facil llegar hasta este punto pero he conseguido esta hermosura °-° 


```js ```

 ```js Asi voy ```

```js const sectionSeleccionarDragon = document.getElementById('seleccionar-dragon'); const sectionSeleccionarMapa = document.getElementById('seleccionar-mapa'); const sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque'); const sectionReiniciar = document.getElementById('reiniciar'); const botonDragonJugador = document.getElementById('boton-dragon'); const botonMapa = document.getElementById('boton-mapa'); const botonReiniciar = document.getElementById('boton-reiniciar'); sectionReiniciar.style.display = 'none' const spanDragonJugador = document.getElementById('dragon-jugador'); const spanDragonEnemigo = document.getElementById('dragon-enemigo'); const spanMapaSeleccionado = document.getElementById('mapa-seleccionado'); const image = document.getElementById('dragon-jugador-img'); const imageEnemigo = document.getElementById('dragon-enemigo-img'); const inputIcandur = document.getElementById('Icandur'); const inputValtihar = document.getElementById('Valtihar'); const inputTartaro = document.getElementById('Tartaro'); const contenedorTarjetas = document.getElementById('contenedorTarjetas'); const contenedorAtaques = document.getElementById('contenedorAtaques'); 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 spanVictorias = document.getElementById('victorias'); const spanDerrotas = document.getElementById('derrotas'); const spanEmpates = document.getElementById('empates'); const sectionVerMapa = document.getElementById('ver-mapa') const mapa = document.getElementById('mapa') let dragones = []; let ataqueJugador = []; let ataqueEnemigo = []; let opcionDeDragones; let inputDorian; let inputShenron; let inputSmaug; let dragonJugador; let dragonJugadorObjeto; let ataquesDragon; let ataquesDragonEnemigo; let botonFuego; let botonAgua; let botonTierra; let botones = []; let indexAtaqueJugador; let indexAtaqueEnemigo; let vidasJugador = 3; let vidasEnemigo = 3; let victorias = 0; let derrotas = 0; let empates = 0; let lienzo = mapa.getContext("2d") let intervalo let mapaBackground = new Image() let mapaSeleccionado; mapaBackground.src = '/public/assets/Valtihar.jpeg' let alturaQueBuscamos let anchoDelMapa = window.innerWidth - 20 const anchoMaximoDelMapa = 800 if (anchoDelMapa > anchoMaximoDelMapa) { anchoDelMapa = anchoMaximoDelMapa - 20 } alturaQueBuscamos = anchoDelMapa * 1000 / 1500 mapa.width = anchoDelMapa mapa.height = alturaQueBuscamos class dragon { constructor(nombre, foto, vida, fotoMapa) { this.nombre = nombre; this.foto = foto; this.vida = vida; this.ataques = []; this.ancho = 40 this.alto = 40 this.x = aleatorio(0, mapa.width - this.ancho) this.y = aleatorio(0, mapa.height - this.alto) this.mapaFoto = new Image() this.mapaFoto.src = fotoMapa this.velocidadX = 0 this.velocidadY = 0 } } let Dorian = new dragon('Dorian', './assets/Dorian.gif', 5); let Shenron = new dragon('Shenron', './assets/Shenron.gif', 5); let Smaug = new dragon('Smaug', './assets/Smaug.gif', 5); Dorian.ataques.push( { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🌱', id: 'boton-tierra' } ); DorianEnemigo.ataques.push( { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🌱', id: 'boton-tierra' }, ) Shenron.ataques.push( { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' } ); ShenronEnemigo.ataques.push( { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, ) Smaug.ataques.push( { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🌱', id: 'boton-tierra' } ); SmaugEnemigo.ataques.push( { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🌱', id: 'boton-tierra' }, ) dragones.push(Dorian, Shenron, Smaug); function iniciarJuego() { sectionSeleccionarDragon.style.display = 'flex'; sectionSeleccionarMapa.style.display = 'none'; sectionVerMapa.style.display = 'none' sectionSeleccionarAtaque.style.display = 'none'; dragones.forEach((dragon) => { opcionDeDragones=` <input type="radio" name="Dragon" id=${dragon.nombre} /> <label class="tarjeta-de-Dragon" for=${dragon.nombre}>

${dragon.nombre}

</label> ` contenedorTarjetas.innerHTML+=opcionDeDragones inputDorian=document.getElementById('Dorian') inputShenron=document.getElementById('Shenron') inputSmaug=document.getElementById('Smaug') }) botonDragonJugador.addEventListener('click',seleccionarDragonJugador) botonMapa.addEventListener('click', seleccionarMapa) botonReiniciar.addEventListener('click',reiniciarJuego) } function seleccionarDragonJugador() { sectionSeleccionarDragon.style.display = 'none'; sectionSeleccionarMapa.style.display = 'flex'; sectionVerMapa.style.display = 'none' sectionSeleccionarAtaque.style.display = 'none'; if (inputDorian.checked) { image.src = '/public/assets/Dorian.gif' spanDragonJugador.innerHTML = 'Dorian'; } else if (inputShenron.checked) { image.src = '/public/assets/Shenron.gif' spanDragonJugador.innerHTML = 'Shenron'; } else if (inputSmaug.checked) { image.src = '/public/assets/Smaug.gif' spanDragonJugador.innerHTML = 'Smaug'; } else { alert('Selecciona un dragón'); location.reload() } dragonJugador = spanDragonJugador.innerHTML; extraerAtaques(dragonJugador) seleccionarDragonEnemigo(); } function seleccionarMapa() { sectionSeleccionarMapa.style.display = 'none'; sectionVerMapa.style.display = 'flex' sectionSeleccionarAtaque.style.display = 'none'; if (inputIcandur.checked) { spanMapaSeleccionado.innerHTML = 'Icandur'; } else if (inputValtihar.checked) { spanMapaSeleccionado.innerHTML = 'Valtihar'; } else if (inputTartaro.checked) { spanMapaSeleccionado.innerHTML = 'Tartaro'; } else { alert('Selecciona un mapa'); location.reload() } iniciarMapa() } function extraerAtaques(dragonJugador) { let ataques for(let i=0;i<dragones.length;i++) { if(dragonJugador === dragones[i].nombre) { ataques=dragones[i].ataques } } mostrarAtaques(ataques) } function mostrarAtaques(ataques) { ataques.forEach((ataque)=> { ataquesDragon=` <button id=${ataque.id} class="boton-de-ataque BAtaque">${ataque.nombre}</button> ` contenedorAtaques.innerHTML+=ataquesDragon }) 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='rgba(255, 42, 0, 0.463)' boton.disabled=true } else if(e.target.textContent ==='💧') { ataqueJugador.push('AGUA') console.log(ataqueJugador) boton.style.background = 'rgba(0, 166, 255, 0.463)' boton.disabled=true } else { ataqueJugador.push('TIERRA') console.log(ataqueJugador) boton.style.background = 'rgba(212, 255, 0, 0.463)' boton.disabled=true } ataqueAleatorioEnemigo() }) }) } function seleccionarDragonEnemigo() { let dragonAleatorio=aleatorio(0,dragones.length-1) spanDragonEnemigo.innerHTML=dragones[dragonAleatorio].nombre imageEnemigo.src = dragones[dragonAleatorio].foto ataquesDragonEnemigo = dragones[dragonAleatorio].ataques secuenciaAtaque() } function ataqueAleatorioEnemigo() { let ataqueAleatorio=aleatorio(0,ataquesDragonEnemigo.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 indexAmbosOponente(jugador,enemigo) { indexAtaqueJugador=ataqueJugador[jugador] indexAtaqueEnemigo=ataqueEnemigo[enemigo] } function combate() { for(let index=0;index<ataqueJugador.length;index++) { if(ataqueJugador[index] === ataqueEnemigo[index]) { indexAmbosOponente(index,index) crearMensaje("EMPATE") empates++ spanEmpates.innerHTML = empates } else if(ataqueJugador[index] === 'FUEGO'&&ataqueEnemigo[index] === 'TIERRA') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else if(ataqueJugador[index] === 'AGUA'&&ataqueEnemigo[index] === 'FUEGO') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else if(ataqueJugador[index] === 'TIERRA'&&ataqueEnemigo[index] === 'AGUA') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else { indexAmbosOponente(index,index) crearMensaje("PERDISTE") vidasJugador-- derrotas++ spanDerrotas.innerHTML = derrotas spanVidasJugador.innerHTML = '❤️'.repeat(vidasJugador) } } revisarVidas() } function revisarVidas() { if(vidasJugador === vidasEnemigo) { crearMensajeFinal("Esto fue un empate!!!") } else if(vidasJugador > vidasEnemigo) { crearMensajeFinal("<-VICTORIA->") } else { crearMensajeFinal('<-DERROTA->') } } function crearMensaje(resultado) { let nuevoAtaqueDelJugador=document.createElement('p') let nuevoAtaqueDelEnemigo=document.createElement('p') sectionMensajes.innerHTML=resultado nuevoAtaqueDelJugador.innerHTML=indexAtaqueJugador nuevoAtaqueDelEnemigo.innerHTML=indexAtaqueEnemigo ataquesDelJugador.appendChild(nuevoAtaqueDelJugador) ataquesDelEnemigo.appendChild(nuevoAtaqueDelEnemigo) } 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() { dragonJugadorObjeto.x = dragonJugadorObjeto.x + dragonJugadorObjeto.velocidadX dragonJugadorObjeto.y = dragonJugadorObjeto.y + dragonJugadorObjeto.velocidadY lienzo.clearRect(0, 0, mapa.width, mapa.height) lienzo.drawImage( mapaBackground, 0, 0, mapa.width, mapa.height ) dragonJugadorObjeto.pintarDragon() DorianEnemigo.pintarDragon() ShenronEnemigo.pintarDragon() SmaugEnemigo.pintarDragon() if (dragonJugadorObjeto.velocidadX !== 0 || dragonJugadorObjeto.velocidadY !== 0) { revisarColision(DorianEnemigo) revisarColision(ShenronEnemigo) revisarColision(SmaugEnemigo) } } function moverDerecha() { dragonJugadorObjeto.velocidadX = 5 } function moverIzquierda() { dragonJugadorObjeto.velocidadX = -5 } function moverAbajo() { dragonJugadorObjeto.velocidadY = 5 } function moverArriba() { dragonJugadorObjeto.velocidadY = -5 } function detenerMovimiento() { dragonJugadorObjeto.velocidadX = 0 dragonJugadorObjeto.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() { dragonJugadorObjeto = obtenerObjetoDragon(dragonJugador) console.log(dragonJugadorObjeto, dragonJugador); const mapaSeleccionadoInput = document.querySelector('input[name="mapa"]:checked'); if (!mapaSeleccionadoInput) { alert('Selecciona un mapa'); location.reload(); return; } const mapaSeleccionado = mapaSeleccionadoInput.id; mapaBackground.src = `./assets/${mapaSeleccionado}.jpeg`; intervalo = setInterval(pintarCanvas, 50) window.addEventListener('keydown', sePresionoUnaTecla) window.addEventListener('keyup', detenerMovimiento) } function obtenerObjetoDragon(nombreDragon) { for (let i = 0; i < dragones.length; i++) { if (nombreDragon === dragones[i].nombre) { return dragones[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 arribaDragon = dragonJugadorObjeto.y const abajoDragon = dragonJugadorObjeto.y + dragonJugadorObjeto.alto const derechaDragon = dragonJugadorObjeto.x + dragonJugadorObjeto.ancho const izquierdaDragon = dragonJugadorObjeto.x if( abajoDragon < arribaEnemigo || arribaDragon > abajoEnemigo || derechaDragon < izquierdaEnemigo || izquierdaDragon > derechaEnemigo ) { return } detenerMovimiento() clearInterval(intervalo) console.log('Se detecto una colision'); sectionSeleccionarAtaque.style.display = 'flex' sectionVerMapa.style.display = 'none' seleccionarDragonEnemigo(enemigo) } window.addEventListener('load',iniciarJuego) ```const sectionSeleccionarDragon = document.getElementById('seleccionar-dragon');const sectionSeleccionarMapa = document.getElementById('seleccionar-mapa');const sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque');const sectionReiniciar = document.getElementById('reiniciar'); const botonDragonJugador = document.getElementById('boton-dragon');const botonMapa = document.getElementById('boton-mapa');const botonReiniciar = document.getElementById('boton-reiniciar');sectionReiniciar.style.display = 'none' const spanDragonJugador = document.getElementById('dragon-jugador');const spanDragonEnemigo = document.getElementById('dragon-enemigo');const spanMapaSeleccionado = document.getElementById('mapa-seleccionado'); const image = document.getElementById('dragon-jugador-img');const imageEnemigo = document.getElementById('dragon-enemigo-img'); const inputIcandur = document.getElementById('Icandur');const inputValtihar = document.getElementById('Valtihar');const inputTartaro = document.getElementById('Tartaro'); const contenedorTarjetas = document.getElementById('contenedorTarjetas');const contenedorAtaques = document.getElementById('contenedorAtaques'); 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 spanVictorias = document.getElementById('victorias');const spanDerrotas = document.getElementById('derrotas');const spanEmpates = document.getElementById('empates'); const sectionVerMapa = document.getElementById('ver-mapa')const mapa = document.getElementById('mapa') let dragones = \[];let ataqueJugador = \[];let ataqueEnemigo = \[]; let opcionDeDragones; let inputDorian;let inputShenron;let inputSmaug; let dragonJugador;let dragonJugadorObjeto; let ataquesDragon;let ataquesDragonEnemigo; let botonFuego;let botonAgua;let botonTierra; let botones = \[];let indexAtaqueJugador;let indexAtaqueEnemigo; let vidasJugador = 3;let vidasEnemigo = 3;let victorias = 0;let derrotas = 0;let empates = 0; let lienzo = mapa.getContext("2d")let intervalolet mapaBackground = new Image()let mapaSeleccionado;mapaBackground.src = '/public/assets/Valtihar.jpeg' let alturaQueBuscamoslet anchoDelMapa = window.innerWidth - 20const anchoMaximoDelMapa = 800 if (anchoDelMapa > anchoMaximoDelMapa) { anchoDelMapa = anchoMaximoDelMapa - 20} alturaQueBuscamos = anchoDelMapa \* 1000 / 1500 mapa.width = anchoDelMapamapa.height = alturaQueBuscamos class dragon { constructor(nombre, foto, vida, fotoMapa) { *this*.nombre = nombre; *this*.foto = foto; *this*.vida = vida; *this*.ataques = \[]; *this*.ancho = 40 *this*.alto = 40 *this*.x = aleatorio(0, mapa.width - *this*.ancho) *this*.y = aleatorio(0, mapa.height - *this*.alto) *this*.mapaFoto = new Image() *this*.mapaFoto.src = fotoMapa *this*.velocidadX = 0 *this*.velocidadY = 0 }} let Dorian = new dragon('Dorian', './assets/Dorian.gif', 5);let Shenron = new dragon('Shenron', './assets/Shenron.gif', 5);let Smaug = new dragon('Smaug', './assets/Smaug.gif', 5); Dorian.ataques.push( { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🌱', id: 'boton-tierra' });DorianEnemigo.ataques.push( { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🌱', id: 'boton-tierra' },)Shenron.ataques.push( { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' });ShenronEnemigo.ataques.push( { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, )Smaug.ataques.push( { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🌱', id: 'boton-tierra' });SmaugEnemigo.ataques.push( { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🌱', id: 'boton-tierra' },) dragones.push(Dorian, Shenron, Smaug); function iniciarJuego() { sectionSeleccionarDragon.style.display = 'flex'; sectionSeleccionarMapa.style.display = 'none'; sectionVerMapa.style.display = 'none' sectionSeleccionarAtaque.style.display = 'none'; dragones.forEach((dragon) => { opcionDeDragones=` \<input type="radio" name="Dragon" id=${dragon.nombre} /> \<label class="tarjeta-de-Dragon" for=${dragon.nombre}> \

${dragon.nombre}\

\

\</label> ` contenedorTarjetas.innerHTML+=opcionDeDragones inputDorian=document.getElementById('Dorian') inputShenron=document.getElementById('Shenron') inputSmaug=document.getElementById('Smaug') }) botonDragonJugador.addEventListener('click',seleccionarDragonJugador) botonMapa.addEventListener('click', seleccionarMapa) botonReiniciar.addEventListener('click',reiniciarJuego)}function seleccionarDragonJugador() { sectionSeleccionarDragon.style.display = 'none'; sectionSeleccionarMapa.style.display = 'flex'; sectionVerMapa.style.display = 'none' sectionSeleccionarAtaque.style.display = 'none'; if (inputDorian.checked) { image.src = '/public/assets/Dorian.gif' spanDragonJugador.innerHTML = 'Dorian'; } else if (inputShenron.checked) { image.src = '/public/assets/Shenron.gif' spanDragonJugador.innerHTML = 'Shenron'; } else if (inputSmaug.checked) { image.src = '/public/assets/Smaug.gif' spanDragonJugador.innerHTML = 'Smaug'; } else { alert('Selecciona un dragón'); location.reload() } dragonJugador = spanDragonJugador.innerHTML; extraerAtaques(dragonJugador) seleccionarDragonEnemigo();}function seleccionarMapa() { sectionSeleccionarMapa.style.display = 'none'; sectionVerMapa.style.display = 'flex' sectionSeleccionarAtaque.style.display = 'none'; if (inputIcandur.checked) { spanMapaSeleccionado.innerHTML = 'Icandur'; } else if (inputValtihar.checked) { spanMapaSeleccionado.innerHTML = 'Valtihar'; } else if (inputTartaro.checked) { spanMapaSeleccionado.innerHTML = 'Tartaro'; } else { alert('Selecciona un mapa'); location.reload() } iniciarMapa()}function extraerAtaques(dragonJugador) { let ataques for(let i=0;i\<dragones.length;i++) { if(dragonJugador === dragones\[i].nombre) { ataques=dragones\[i].ataques } } mostrarAtaques(ataques)}function mostrarAtaques(ataques) { ataques.forEach((ataque)=> { ataquesDragon=` \<button id=${ataque.id} class="boton-de-ataque BAtaque">${ataque.nombre}\</button> ` contenedorAtaques.innerHTML+=ataquesDragon }) 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='rgba(255, 42, 0, 0.463)' boton.disabled=true } else if(e.target.textContent ==='💧') { ataqueJugador.push('AGUA') console.log(ataqueJugador) boton.style.background = 'rgba(0, 166, 255, 0.463)' boton.disabled=true } else { ataqueJugador.push('TIERRA') console.log(ataqueJugador) boton.style.background = 'rgba(212, 255, 0, 0.463)' boton.disabled=true } ataqueAleatorioEnemigo() }) })}function seleccionarDragonEnemigo() { let dragonAleatorio=aleatorio(0,dragones.length-1) spanDragonEnemigo.innerHTML=dragones\[dragonAleatorio].nombre imageEnemigo.src = dragones\[dragonAleatorio].foto ataquesDragonEnemigo = dragones\[dragonAleatorio].ataques secuenciaAtaque()}function ataqueAleatorioEnemigo() { let ataqueAleatorio=aleatorio(0,ataquesDragonEnemigo.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 indexAmbosOponente(jugador,enemigo) { indexAtaqueJugador=ataqueJugador\[jugador] indexAtaqueEnemigo=ataqueEnemigo\[enemigo]}function combate() { for(let index=0;index\<ataqueJugador.length;index++) { if(ataqueJugador\[index] === ataqueEnemigo\[index]) { indexAmbosOponente(index,index) crearMensaje("EMPATE") empates++ spanEmpates.innerHTML = empates } else if(ataqueJugador\[index] === 'FUEGO'&\&ataqueEnemigo\[index] === 'TIERRA') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else if(ataqueJugador\[index] === 'AGUA'&\&ataqueEnemigo\[index] === 'FUEGO') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else if(ataqueJugador\[index] === 'TIERRA'&\&ataqueEnemigo\[index] === 'AGUA') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else { indexAmbosOponente(index,index) crearMensaje("PERDISTE") vidasJugador-- derrotas++ spanDerrotas.innerHTML = derrotas spanVidasJugador.innerHTML = '❤️'.repeat(vidasJugador) } } revisarVidas()}function revisarVidas() { if(vidasJugador === vidasEnemigo) { crearMensajeFinal("Esto fue un empate!!!") } else if(vidasJugador > vidasEnemigo) { crearMensajeFinal("<-VICTORIA->") } else { crearMensajeFinal('<-DERROTA->') }}function crearMensaje(resultado) { let nuevoAtaqueDelJugador=document.createElement('p') let nuevoAtaqueDelEnemigo=document.createElement('p') sectionMensajes.innerHTML=resultado nuevoAtaqueDelJugador.innerHTML=indexAtaqueJugador nuevoAtaqueDelEnemigo.innerHTML=indexAtaqueEnemigo ataquesDelJugador.appendChild(nuevoAtaqueDelJugador) ataquesDelEnemigo.appendChild(nuevoAtaqueDelEnemigo)} 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() { dragonJugadorObjeto.x = dragonJugadorObjeto.x + dragonJugadorObjeto.velocidadX dragonJugadorObjeto.y = dragonJugadorObjeto.y + dragonJugadorObjeto.velocidadY lienzo.clearRect(0, 0, mapa.width, mapa.height) lienzo.drawImage( mapaBackground, 0, 0, mapa.width, mapa.height ) dragonJugadorObjeto.pintarDragon() DorianEnemigo.pintarDragon() ShenronEnemigo.pintarDragon() SmaugEnemigo.pintarDragon() if (dragonJugadorObjeto.velocidadX !== 0 || dragonJugadorObjeto.velocidadY !== 0) { revisarColision(DorianEnemigo) revisarColision(ShenronEnemigo) revisarColision(SmaugEnemigo) }} function moverDerecha() { dragonJugadorObjeto.velocidadX = 5} function moverIzquierda() { dragonJugadorObjeto.velocidadX = -5} function moverAbajo() { dragonJugadorObjeto.velocidadY = 5} function moverArriba() { dragonJugadorObjeto.velocidadY = -5} function detenerMovimiento() { dragonJugadorObjeto.velocidadX = 0 dragonJugadorObjeto.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() { dragonJugadorObjeto = obtenerObjetoDragon(dragonJugador) console.log(dragonJugadorObjeto, dragonJugador); const mapaSeleccionadoInput = document.querySelector('input\[name="mapa"]:checked'); if (!mapaSeleccionadoInput) { alert('Selecciona un mapa'); location.reload(); return; } const mapaSeleccionado = mapaSeleccionadoInput.id; mapaBackground.src = `./assets/${mapaSeleccionado}.jpeg`; intervalo = setInterval(pintarCanvas, 50) window.addEventListener('keydown', sePresionoUnaTecla) window.addEventListener('keyup', detenerMovimiento)}function obtenerObjetoDragon(nombreDragon) { for (let i = 0; i < dragones.length; i++) { if (nombreDragon === dragones\[i].nombre) { return dragones\[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 arribaDragon = dragonJugadorObjeto.y const abajoDragon = dragonJugadorObjeto.y + dragonJugadorObjeto.alto const derechaDragon = dragonJugadorObjeto.x + dragonJugadorObjeto.ancho const izquierdaDragon = dragonJugadorObjeto.x if( abajoDragon < arribaEnemigo || arribaDragon > abajoEnemigo || derechaDragon < izquierdaEnemigo || izquierdaDragon > derechaEnemigo ) { return } detenerMovimiento() clearInterval(intervalo) console.log('Se detecto una colision'); sectionSeleccionarAtaque.style.display = 'flex' sectionVerMapa.style.display = 'none' seleccionarDragonEnemigo(enemigo)} window.addEventListener('load',iniciarJuego)

no entiendo porque no me funciona el codigo. alguno que me pueda explicar la unica diferencia es que trate de que segun el mapa que el jugador escogio ese se el mapa que se pinte en mi ventana. const sectionSeleccionarDragon = document.getElementById('seleccionar-dragon');const sectionSeleccionarMapa = document.getElementById('seleccionar-mapa');const sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque');const sectionReiniciar = document.getElementById('reiniciar'); const botonDragonJugador = document.getElementById('boton-dragon');const botonMapa = document.getElementById('boton-mapa');const botonReiniciar = document.getElementById('boton-reiniciar');sectionReiniciar.style.display = 'none' const spanDragonJugador = document.getElementById('dragon-jugador');const spanDragonEnemigo = document.getElementById('dragon-enemigo');const spanMapaSeleccionado = document.getElementById('mapa-seleccionado'); const image = document.getElementById('dragon-jugador-img');const imageEnemigo = document.getElementById('dragon-enemigo-img'); const inputIcandur = document.getElementById('Icandur');const inputValtihar = document.getElementById('Valtihar');const inputTartaro = document.getElementById('Tartaro'); const contenedorTarjetas = document.getElementById('contenedorTarjetas');const contenedorAtaques = document.getElementById('contenedorAtaques'); 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 spanVictorias = document.getElementById('victorias');const spanDerrotas = document.getElementById('derrotas');const spanEmpates = document.getElementById('empates'); const sectionVerMapa = document.getElementById('ver-mapa')const mapa = document.getElementById('mapa') let dragones = \[];let ataqueJugador = \[];let ataqueEnemigo = \[]; let opcionDeDragones; let inputDorian;let inputShenron;let inputSmaug; let dragonJugador;let dragonJugadorObjeto; let ataquesDragon;let ataquesDragonEnemigo; let botonFuego;let botonAgua;let botonTierra; let botones = \[];let indexAtaqueJugador;let indexAtaqueEnemigo; let vidasJugador = 3;let vidasEnemigo = 3;let victorias = 0;let derrotas = 0;let empates = 0; let lienzo = mapa.getContext("2d")let intervalolet mapaBackground = new Image()let mapaSeleccionado;mapaBackground.src = '/public/assets/Valtihar.jpeg' let alturaQueBuscamoslet anchoDelMapa = window.innerWidth - 20const anchoMaximoDelMapa = 800 if (anchoDelMapa > anchoMaximoDelMapa) { anchoDelMapa = anchoMaximoDelMapa - 20} alturaQueBuscamos = anchoDelMapa \* 1000 / 1500 mapa.width = anchoDelMapamapa.height = alturaQueBuscamos class dragon { constructor(nombre, foto, vida, fotoMapa) { *this*.nombre = nombre; *this*.foto = foto; *this*.vida = vida; *this*.ataques = \[]; *this*.ancho = 40 *this*.alto = 40 *this*.x = aleatorio(0, mapa.width - *this*.ancho) *this*.y = aleatorio(0, mapa.height - *this*.alto) *this*.mapaFoto = new Image() *this*.mapaFoto.src = fotoMapa *this*.velocidadX = 0 *this*.velocidadY = 0 }} let Dorian = new dragon('Dorian', './assets/Dorian.gif', 5);let Shenron = new dragon('Shenron', './assets/Shenron.gif', 5);let Smaug = new dragon('Smaug', './assets/Smaug.gif', 5); Dorian.ataques.push( { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🌱', id: 'boton-tierra' });DorianEnemigo.ataques.push( { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🌱', id: 'boton-tierra' },)Shenron.ataques.push( { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' });ShenronEnemigo.ataques.push( { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '🌱', id: 'boton-tierra' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🔥', id: 'boton-fuego' }, )Smaug.ataques.push( { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🌱', id: 'boton-tierra' });SmaugEnemigo.ataques.push( { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '🔥', id: 'boton-fuego' }, { nombre: '💧', id: 'boton-agua' }, { nombre: '🌱', id: 'boton-tierra' },) dragones.push(Dorian, Shenron, Smaug); function iniciarJuego() { sectionSeleccionarDragon.style.display = 'flex'; sectionSeleccionarMapa.style.display = 'none'; sectionVerMapa.style.display = 'none' sectionSeleccionarAtaque.style.display = 'none'; dragones.forEach((dragon) => { opcionDeDragones=` \<input type="radio" name="Dragon" id=${dragon.nombre} /> \<label class="tarjeta-de-Dragon" for=${dragon.nombre}> \

${dragon.nombre}\

\

\</label> ` contenedorTarjetas.innerHTML+=opcionDeDragones inputDorian=document.getElementById('Dorian') inputShenron=document.getElementById('Shenron') inputSmaug=document.getElementById('Smaug') }) botonDragonJugador.addEventListener('click',seleccionarDragonJugador) botonMapa.addEventListener('click', seleccionarMapa) botonReiniciar.addEventListener('click',reiniciarJuego)}function seleccionarDragonJugador() { sectionSeleccionarDragon.style.display = 'none'; sectionSeleccionarMapa.style.display = 'flex'; sectionVerMapa.style.display = 'none' sectionSeleccionarAtaque.style.display = 'none'; if (inputDorian.checked) { image.src = '/public/assets/Dorian.gif' spanDragonJugador.innerHTML = 'Dorian'; } else if (inputShenron.checked) { image.src = '/public/assets/Shenron.gif' spanDragonJugador.innerHTML = 'Shenron'; } else if (inputSmaug.checked) { image.src = '/public/assets/Smaug.gif' spanDragonJugador.innerHTML = 'Smaug'; } else { alert('Selecciona un dragón'); location.reload() } dragonJugador = spanDragonJugador.innerHTML; extraerAtaques(dragonJugador) seleccionarDragonEnemigo();}function seleccionarMapa() { sectionSeleccionarMapa.style.display = 'none'; sectionVerMapa.style.display = 'flex' sectionSeleccionarAtaque.style.display = 'none'; if (inputIcandur.checked) { spanMapaSeleccionado.innerHTML = 'Icandur'; } else if (inputValtihar.checked) { spanMapaSeleccionado.innerHTML = 'Valtihar'; } else if (inputTartaro.checked) { spanMapaSeleccionado.innerHTML = 'Tartaro'; } else { alert('Selecciona un mapa'); location.reload() } iniciarMapa()}function extraerAtaques(dragonJugador) { let ataques for(let i=0;i\<dragones.length;i++) { if(dragonJugador === dragones\[i].nombre) { ataques=dragones\[i].ataques } } mostrarAtaques(ataques)}function mostrarAtaques(ataques) { ataques.forEach((ataque)=> { ataquesDragon=` \<button id=${ataque.id} class="boton-de-ataque BAtaque">${ataque.nombre}\</button> ` contenedorAtaques.innerHTML+=ataquesDragon }) 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='rgba(255, 42, 0, 0.463)' boton.disabled=true } else if(e.target.textContent ==='💧') { ataqueJugador.push('AGUA') console.log(ataqueJugador) boton.style.background = 'rgba(0, 166, 255, 0.463)' boton.disabled=true } else { ataqueJugador.push('TIERRA') console.log(ataqueJugador) boton.style.background = 'rgba(212, 255, 0, 0.463)' boton.disabled=true } ataqueAleatorioEnemigo() }) })}function seleccionarDragonEnemigo() { let dragonAleatorio=aleatorio(0,dragones.length-1) spanDragonEnemigo.innerHTML=dragones\[dragonAleatorio].nombre imageEnemigo.src = dragones\[dragonAleatorio].foto ataquesDragonEnemigo = dragones\[dragonAleatorio].ataques secuenciaAtaque()}function ataqueAleatorioEnemigo() { let ataqueAleatorio=aleatorio(0,ataquesDragonEnemigo.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 indexAmbosOponente(jugador,enemigo) { indexAtaqueJugador=ataqueJugador\[jugador] indexAtaqueEnemigo=ataqueEnemigo\[enemigo]}function combate() { for(let index=0;index\<ataqueJugador.length;index++) { if(ataqueJugador\[index] === ataqueEnemigo\[index]) { indexAmbosOponente(index,index) crearMensaje("EMPATE") empates++ spanEmpates.innerHTML = empates } else if(ataqueJugador\[index] === 'FUEGO'&\&ataqueEnemigo\[index] === 'TIERRA') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else if(ataqueJugador\[index] === 'AGUA'&\&ataqueEnemigo\[index] === 'FUEGO') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else if(ataqueJugador\[index] === 'TIERRA'&\&ataqueEnemigo\[index] === 'AGUA') { indexAmbosOponente(index,index) crearMensaje("GANASTE") vidasEnemigo-- victorias++ spanVictorias.innerHTML = victorias spanVidasEnemigo.innerHTML = '❤️'.repeat(vidasEnemigo) } else { indexAmbosOponente(index,index) crearMensaje("PERDISTE") vidasJugador-- derrotas++ spanDerrotas.innerHTML = derrotas spanVidasJugador.innerHTML = '❤️'.repeat(vidasJugador) } } revisarVidas()}function revisarVidas() { if(vidasJugador === vidasEnemigo) { crearMensajeFinal("Esto fue un empate!!!") } else if(vidasJugador > vidasEnemigo) { crearMensajeFinal("<-VICTORIA->") } else { crearMensajeFinal('<-DERROTA->') }}function crearMensaje(resultado) { let nuevoAtaqueDelJugador=document.createElement('p') let nuevoAtaqueDelEnemigo=document.createElement('p') sectionMensajes.innerHTML=resultado nuevoAtaqueDelJugador.innerHTML=indexAtaqueJugador nuevoAtaqueDelEnemigo.innerHTML=indexAtaqueEnemigo ataquesDelJugador.appendChild(nuevoAtaqueDelJugador) ataquesDelEnemigo.appendChild(nuevoAtaqueDelEnemigo)} 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() { dragonJugadorObjeto.x = dragonJugadorObjeto.x + dragonJugadorObjeto.velocidadX dragonJugadorObjeto.y = dragonJugadorObjeto.y + dragonJugadorObjeto.velocidadY lienzo.clearRect(0, 0, mapa.width, mapa.height) lienzo.drawImage( mapaBackground, 0, 0, mapa.width, mapa.height ) dragonJugadorObjeto.pintarDragon() DorianEnemigo.pintarDragon() ShenronEnemigo.pintarDragon() SmaugEnemigo.pintarDragon() if (dragonJugadorObjeto.velocidadX !== 0 || dragonJugadorObjeto.velocidadY !== 0) { revisarColision(DorianEnemigo) revisarColision(ShenronEnemigo) revisarColision(SmaugEnemigo) }} function moverDerecha() { dragonJugadorObjeto.velocidadX = 5} function moverIzquierda() { dragonJugadorObjeto.velocidadX = -5} function moverAbajo() { dragonJugadorObjeto.velocidadY = 5} function moverArriba() { dragonJugadorObjeto.velocidadY = -5} function detenerMovimiento() { dragonJugadorObjeto.velocidadX = 0 dragonJugadorObjeto.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() { dragonJugadorObjeto = obtenerObjetoDragon(dragonJugador) console.log(dragonJugadorObjeto, dragonJugador); const mapaSeleccionadoInput = document.querySelector('input\[name="mapa"]:checked'); if (!mapaSeleccionadoInput) { alert('Selecciona un mapa'); location.reload(); return; } const mapaSeleccionado = mapaSeleccionadoInput.id; mapaBackground.src = `./assets/${mapaSeleccionado}.jpeg`; intervalo = setInterval(pintarCanvas, 50) window.addEventListener('keydown', sePresionoUnaTecla) window.addEventListener('keyup', detenerMovimiento)}function obtenerObjetoDragon(nombreDragon) { for (let i = 0; i < dragones.length; i++) { if (nombreDragon === dragones\[i].nombre) { return dragones\[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 arribaDragon = dragonJugadorObjeto.y const abajoDragon = dragonJugadorObjeto.y + dragonJugadorObjeto.alto const derechaDragon = dragonJugadorObjeto.x + dragonJugadorObjeto.ancho const izquierdaDragon = dragonJugadorObjeto.x if( abajoDragon < arribaEnemigo || arribaDragon > abajoEnemigo || derechaDragon < izquierdaEnemigo || izquierdaDragon > derechaEnemigo ) { return } detenerMovimiento() clearInterval(intervalo) console.log('Se detecto una colision'); sectionSeleccionarAtaque.style.display = 'flex' sectionVerMapa.style.display = 'none' seleccionarDragonEnemigo(enemigo)} window.addEventListener('load',iniciarJuego)

asi quedo el mio.

Mi avance:

La profe iba excelente hasta que por culpa de la edición hace 3 clases toco hacer mucho de extra, pero aquí estamos firmes 💪
prefiero los botones asi con eso no tengo que cambiarlos tampoco en mobile.

Con bastantes tropiezos y algo de frustracion a la hora de romper el codigo, pero he llegado hasta aqui y vamos por mas…

Me dare un suspiro antes de introducirme al Backend. Lo que vimos de acomodar los botones de movimiento ya me habia adelantado en clases pasadas jajaja pero bueno les comparto como quedo el mio…

<meta name="viewport" content="width=device-width, initial-scale=1.0">

lo ponemos debajo de la llamada a CSS en el HTML,
Nos sirve para que el responsive pueda activarse y verse como como lo modificamos, en otros dispositivos ya sea smartphones o ipad etc.

Yo la verdad es que no entiendo. Hice el mismo Div que puso la profe pero mis botones no se separaron como se ve en la clase.

me sigue pasando que al seleccionar mi primer mokepon y moverlo con las flechas después de 1 segundo de estar presionando una tecla este coge super velocidad y se va a otro universo

no me pasa con ninguno de los otros mokepones ( tengo 6 )

Les dejo el codigo asi lo pueden pegar directamente!

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Así se ve la primera pantalla de mi juego en un 🤩. Gracias Estefany #2 por tus conocimientos.

Espero convertirme en Frontend pronto 😅