Don't repeat yourself (DRY)

Para evitar tener que esperar ir al navegador y ver los errores en consola, podemos descargar la extensión:

así poder ver los errores de esta manera:

espero les sirva!

La linea 5 del código no es una variable. Cuidado ahí.

Les dejo un buen articulo para complementar el principio DRY

7 acrónimos que cualquier developer debería conocer

Resumen

Es buena práctica sacar las variables del tipo .getElementById de las funciones y colocarlas al inicio del js para ser usadas como variables globales. Así nos aseguramos de no estar repitiendo código. Es importante no definir más de una vez la misma variable y las funciones deben tener nombres distintos para evitar problemas.

Tipos de variables:
let = su valor puede variar, es decir cambia a lo largo del código
const = su valor será el mismo de inicio a fin

Una de las frases que más paz mental me da es esa de que podemos llegar a diferentes soluciones y si funciona, ESTÁ BIEN HECHO.

despues de un rato buscando el atajo del teclado para seleccionar las let y cambiarlas por const… eso se hace con CTRL+ALT+FLECHA HACIA ABAJO

le agregue en el HTML la propiedad name con el valor boton a los 3 botones, entonces con el metodo getElementsByName()
me trae los 3 botones juntos en un array el cual recorro con un forEach y de esa manera les agrega uno por uno la propiedad disabled

<code> 
```let botones = document.getElementsByName("boton");
  botones.forEach((boton) => {
    boton.disabled = true;
  });

Primera vez que para una constante no se dice “Como por ejemplo el número pi”… Muchas, muchas, muchas y más gracias por dar un ejemplo de que es un valor constate en el mundo real!!!😄

Les dejo esta extension, esta super porque te permite editar tus tags apertura y cierre de HTML al mismo tiempo.

Creo que es una practica muy avanzada para alguien que va empezando en la programacion, porque retirar los getElementByID de su locazlizacion original puede afectar al momento de querer leer el codigo siendo nuevo en la programacion, yo por mi parte las deje como comentario.

Variables:
­
Imagínate que te gusta el sushi de camarón 🍙 🍤y nomas compras ese.

const sushiDeCamaron

Como siempre compras ese sushi y no lo cambias, lo metes a esa variable const.
­
El asunto será cuando quieras pagar ese sushi de camarón y ver su precio. El precio no será el mismo este mes y dentro de 6 meses, el costo cambia.

Así que su precio será una variable let:

// lunes, 8 de agosto de 2022, precio de sushi de camarón:
 let sushiDeCamarón = 129

// lunes, 8 de marzo de 2023, precio de sushi de camarón:
 let sushiDeCamarón = 179

Comparto mi código js

let ataqueJugador
let ataqueEnemigo
let vidasJugador = 3
let vidasEnemigo = 3

const $ = id => document.getElementById(id)
const $createE = element => document.createElement(element)

const $botonMascotaJugador = $('boton-mascota')
const $inputHipodoge = $('hipodoge')
const $inputCapipepo = $('capipepo')
const $inputRatigueya = $('ratigueya')

$botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)

const $spanMascotaJugador = $('mascota-jugador')

const $spanMascotaEnemigo = $('mascota-enemigo')

const $sectionMensajes = $('resultado')
const $ataquesJugador = $('ataques-jugador')
const $ataquesEnemigo = $('ataques-enemigo')
const $nuevoAtaqueJugador = $createE('p')
const $nuevoAtaqueEnemigo = $createE('p')

const $spanVidasJugador = $('vidas-jugador')
const $spanVidasEnemigo = $('vidas-enemigo')

const $botonReiniciar = $('boton-reiniciar')

let $botonFuego = $("boton-fuego")
let $botonAgua = $("boton-agua")
let $botonTierra = $("boton-tierra")

$botonFuego.addEventListener('click', ataqueFuego)
$botonAgua.addEventListener('click', ataqueAgua)
$botonTierra.addEventListener('click', ataqueTierra)

$botonReiniciar.addEventListener('click', reiniciarJuego)

const $sectionSeleccionarAtaque = $('seleccionar-ataque')

const $sectionSeleccionarMascota = $('seleccionar-mascota')

const $sectionReiniciar = $('reiniciar')

$sectionSeleccionarAtaque.style.display = 'none'
$sectionReiniciar.style.display = 'none'

function seleccionarMascotaJugador() {
    $sectionSeleccionarMascota.style.display = 'none'
    $sectionSeleccionarAtaque.style.display = 'flex'

    if($inputHipodoge.checked) {
        $spanMascotaJugador.innerHTML = 'Hipodoge'
    }
    else if ($inputCapipepo.checked) {
        $spanMascotaJugador.innerHTML = 'Capipepo'
    }
    else if ($inputRatigueya.checked) {
        $spanMascotaJugador.innerHTML = 'Ratigueya'
    }
    else {
        alert('Selecciona un Moqopon')
    }
    seleccionarMascotaEnemigo()
}

function seleccionarMascotaEnemigo() {
    let mascotaAleatoria = aleatorio(1,3)

    if (mascotaAleatoria == 1) {
        $spanMascotaEnemigo.innerHTML = 'Hipodoge'
    } else if (mascotaAleatoria == 2) {
        $spanMascotaEnemigo.innerHTML = 'Capipepo'
    } else {
        $spanMascotaEnemigo.innerHTML = 'Ratigueya'
    }
}

function ataqueFuego() {
    ataqueJugador = 'FUEGO🔥🔥🔥'
    ataqueAleatorioEnemigo()
}
function ataqueAgua() {
    ataqueJugador = 'AGUA💧💧💧'
    ataqueAleatorioEnemigo()
}
function ataqueTierra() {
    ataqueJugador = 'TIERRA🌱🌱🌱'
    ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo() {
    let ataqueAleatorio = aleatorio(1,3)

    if(ataqueAleatorio == 1) {
        ataqueEnemigo = 'FUEGO🔥🔥🔥'
    } else if (ataqueAleatorio == 2) {
        ataqueEnemigo = 'AGUA💧💧💧'
    } else {
        ataqueEnemigo = 'TIERRA🌱🌱🌱'
    }
    combate()
}

function combate() {
    if (ataqueJugador == ataqueEnemigo) {
        crearMensaje('EMPATE')
    } else if (ataqueJugador == 'FUEGO🔥🔥🔥' && ataqueEnemigo == 'TIERRA🌱🌱🌱') {
        crearMensaje('GANASTE')
        vidasEnemigo--
        $spanVidasEnemigo.innerHTML = vidasEnemigo
    } else if (ataqueJugador == 'AGUA💧💧💧' && ataqueEnemigo == 'FUEGO🔥🔥🔥') {
        crearMensaje('GANASTE')
        vidasEnemigo--
        $spanVidasEnemigo.innerHTML = vidasEnemigo
    } else if (ataqueJugador == 'TIERRA🌱🌱🌱' && ataqueEnemigo == 'AGUA💧💧💧') {
        crearMensaje('GANASTE')
        vidasEnemigo--
        $spanVidasEnemigo.innerHTML = vidasEnemigo
    } else {
        crearMensaje('PERDISTE')
        vidasJugador--
        $spanVidasJugador.innerHTML = vidasJugador
    }
    revisarVidas()
}

function revisarVidas() {
    if (vidasEnemigo == 0) {
        crearMensajeFinal('Felicitaciones Ganaste :)')
    } else if (vidasJugador == 0) {
        crearMensajeFinal('Felicitaciones Perdiste :(')
    }
}

function crearMensaje(resultado) {
    $sectionMensajes.innerHTML = resultado
    $nuevoAtaqueJugador.innerHTML = ataqueJugador
    $nuevoAtaqueEnemigo.innerHTML = ataqueEnemigo

    $ataquesJugador.appendChild($nuevoAtaqueJugador)
    $ataquesEnemigo.appendChild($nuevoAtaqueEnemigo)
}

function crearMensajeFinal(resultadoFinal) {
    $sectionMensajes.innerHTML = resultadoFinal

    $botonFuego.disabled = true
    $botonAgua.disabled = true
    $botonTierra.disabled = true

    $sectionReiniciar.style.display = 'block'

    $botonFuego.style.background = '#fff'
    $botonAgua.style.background = '#fff'
    $botonTierra.style.background = '#fff'
}

function reiniciarJuego() {
    location.reload()
}

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

no, a mi se me daño el juego, e hice los pasos del video.

Uno de las herramientas de Visual Estudio Code es que podemos darle un formato al código al dar un “click derecho” a la pagina y luego “Dar formato al documento” o mediante su atajo del teclado " Shift + Alt + F "
Si el formato no te gusta puedes quitarlo con " Ctrl + Z "

El formato por defecto le pone " ; " al final de las líneas de código

Yo lo que hice fue buscar todas las declaraciones de variables que se repitieron y las coloqué como globales. Las que no se repetian si las dejé en el mismo lugar

Básicamente cortar de sus funciones todas las variables let que contienen document.getElementById y pegarlas arriba de todo el código, borrar las que se repiten (que no se porque su VSCode no se las marca con subrayado en rojo) y cambiarlas de let a const.

En pocas palabras, lo recomendable es crear nuestras variables como variables globales a menos que estas sean específicas para una función en particular.

que chevere no sabia nada eso .😃