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!

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

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

pro tip: cuando quieran seleccionar un palabra específica múltiples veces, pueden pararse sobre ella con el mouse y luego usar

ctrl + D 

con esto empezarán a seleccionar las palabras que estén escritas exactamente igual, una por uno de ahí para abajo

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

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.

Les dejo un buen articulo para complementar el principio DRY

7 acrónimos que cualquier developer debería conocer

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.

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;
  });

También pueden seleccionar toda la línea de código haciendo click en el número que la identifica a la izquierda.

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!!!😄

Yo instale esta extensión, me parece graciosa y útil

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

Con alt + arriba o abajo, pueden mover una linea de código sin cortar y pegar 😄

Si sienten que se van a perder durante el transcurso de la clase hagan un respaldo .txt de su script JS original, cuando estén moviendo sus variables let comenten a function pertenecen, así podrán saber en donde se ubican en caso de que código se rompa.

El código se puede mejorar

Despues de haber escrito el código y tenerlo funcional, se puede pasar a mejorarlo, hacerlo más corto y hacer que sea más agradable para el usuario. En lugar de tener una misma linea de código repetida múlples veces

<aside>
💡 Existe una opción para no tener lineas largas de código en visual studio
Solo hay que ir a view → word wrap y listo! también se puede usar alt + z

</aside>

Con esto podemos sacar variables locales que tienen el mismo nombre y se declaran múltiples veces y volverlas globales, esto evita repeticiones, además

Existen distintos tipos de variables

• let es un tipo de variable que permite modificar el valor contenida en ella
• const es un tipo de variable que guarda un valor que no queremos modificar en el futuro, una constante

Tengo este problema y no se como resolver 😦

![]

Esta clase es oro puro

Otro atajo que me sirvió muchísimo, espero que a ustedes igual

Para MAC Command
Para Windows Control

Command + D: Para seleccionar todos los similares uno por uno.
Command + Shift + L: Para seleccionar todos los similares al mismo tiempo.

Consejo VS Code

.
Para hacer más rápida la búsqueda de código duplicado pueden usar el atajo

Control +F

Después de seleccionar el código elegido. Esto hará que busque, cuente y señale todas las coincidencias que haya en el código.

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.

Se siente la tención en el ambiente mientras el profe Diego, corta y pega el código previamente escrito…

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

muy buena clase para aprender otro tipo de opinion sobre js y otro tipo de variables, lo que hice fue dejar el documento anterior tal cual y crear otro para hacer las modificaciones 😃

La estructura del curso esta genial, de esta manera se comprende mejor el porqué de las cosas y para que la usamos.

Me dio paz mental y tranquilidad ver el código mejor ordenado aunque sigo sin entender del todo, TODO lo que he escrito XD. Aún así seguimos en la batalla.

woow, super muy buena clase

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

WOW QUE GRAN PROFESOR QUE ERES DIEGO, TODO SE ENTIENDE RAPIDISIMO.

Excelente inicio del Profesor, para la optimización del código en JS. Muy claro y conciso al momento de explicar las mejores practicas y la diferencia entre let y const. 🧑🏼‍💻

JavaScript me rompe la cabeza ahora que estoy recién comenzando, pero el profesor Diego me la vuelve a armar.
Un genio y le entiendo todo.
Muchas gracias Diego

Les dejo este atajo, espero que les sirva.

Para MAC Option
Para Windows ALT

Para seleccionar varias líneas de código:

1. Presionan Option
2. Sin dejar de presionar Option irán marcando las líneas de código con el mouse.

(ctrl + d ) estos teclados es para seleccionar en serie hacia abajo como hacia a los let.

cuando usamos la variable let : se puede modificar esta variable podrá modificarse es decir será dinámica durante un juego podría cambiar de texto etc.

cuando usamos const :es lo contrario se queda estable y no se modificara en el juego o en la pagina. puede servir para títulos.

esta fue la soliucion que logre antes de empezar esta clase 😃

// al crear una constante asignamos el $ con el fin de ahorrarno el texto del evento getElementById
const $ = selector => document.getElementById(selector)
let ataqueJugador 
let ataqueRival
let triunfosJugador = 3
let triunfosRival = 3
let sectionReiniciar = $('reiniciar')
let imgAvatar
let spanAvatar
let boton
let sectionSeleccionar
let alAzar

function iniciarJuego(){
    sectionSeleccionar = $('elegir-ataque')
    sectionSeleccionar.style.display = "none"
    
    sectionReiniciar.style.display = "none"

    //creación de variable con LET enlazando con el HTML el id del boton ( esto se podria ver como una conversión de HTML a JS)
    boton = $('boton-avatar') //nombre variable = objeto. tipo de metodo ('nombre de id en html')
    boton.addEventListener('click', seleccionarAvatarJugador) // nombre variable (el que se va manipular presente). tipo de metodo ( evento"argumento", variable que se va ejecutar después)
    
    boton = $('boton-aire')
    boton.addEventListener('click', ataqueAire)
    boton = $('boton-agua')
    boton.addEventListener('click', ataqueAgua)
    boton = $('boton-fuego')
    boton.addEventListener('click', ataqueFuego)
    boton = $('boton-tierra')
    boton.addEventListener('click', ataqueTierra)

    boton = $('boton-reiniciar')
    boton.addEventListener('click', reiniciarJuego)
}

// esta función permite identificar que avatar selecccionaste y dependiendo del valor verdadero dara a conocer tu elección
function seleccionarAvatarJugador(){
    sectionSeleccionar = $('elegir-avatar')
    sectionSeleccionar.style.display = "none"

    sectionSeleccionar = $('elegir-ataque')
    sectionSeleccionar.style.display = "flex"

    let inputAng = $('ang')
    let inputKatara = $('katara')
    let inputSuko = $('suko')
    let inputToph = $('toph')
    spanAvatar = $('avatar-jugador')
    imgAvatar = $('img-avatar-jugador')

    if(inputAng.checked){
        spanAvatar.innerHTML = 'Ang'
        imgAvatar.src = "../img/ang.png"
    } else if(inputKatara.checked){
        spanAvatar.innerHTML = 'Katara'
        imgAvatar.src = "../img/katara.png"
    } else if (inputSuko.checked){
        spanAvatar.innerHTML = 'Suko'
        imgAvatar.src = "../img/zuko.png"
    } else if(inputToph.checked){
        spanAvatar.innerHTML = 'Toph'
        imgAvatar.src = "../img/toph.png"
    } else{
        alert("Debes seleccionar un avatar para iniciar el juego.")
        reiniciarJuego()
    }

    seleccionarAvatarRival()
}

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

//Función para seleccionar rival la misma logica con el piedra, papel y tijeras
function seleccionarAvatarRival(){ 
    alAzar = (1,4)
    spanAvatar = $('avatar-rival')
    imgAvatar = $('img-avatar-rival')

    if(alAzar == 1){
        spanAvatar.innerHTML ='Ang'
        imgAvatar.src = "../img/ang.png"
    } else if(alAzar == 2){
        spanAvatar.innerHTML = 'Katara'
        imgAvatar.src = "../img/katara.png"
    } else if(alAzar == 3){
        spanAvatar.innerHTML = 'Suko'
        imgAvatar.src = "../img/zuko.png"
    } else if(alAzar == 4){
        spanAvatar.innerHTML = 'Toph'
        imgAvatar.src = "../img/toph.png"
    } else{
        alert("Debes seleccionar un avatar para dar inicio al juego.")
    }

}

function ataqueAire(){
    ataqueJugador = 'Aire'   
    seleccionarElementoRival()
}

function ataqueAgua(){
    ataqueJugador = 'Agua'
    seleccionarElementoRival()
}

function ataqueFuego(){
    ataqueJugador = 'Fuego'
    seleccionarElementoRival()
}

function ataqueTierra(){
    ataqueJugador = 'Tierra'
    seleccionarElementoRival()
}

function seleccionarElementoRival(){ 
    alAzar = Aleatorio(1,4)

    if(alAzar == 1){
        ataqueRival = 'Aire'
    } else if(alAzar == 2){
        ataqueRival = 'Agua'
    } else if(alAzar == 3){
        ataqueRival = 'Fuego'
    } else if(alAzar == 4){
        ataqueRival = 'Tierra'
    }

    combate()
}

function combate(){
    let spanVidasJugador = $('vida-jugador')
    let spanVidasRival = $('vida-rival')

    if( ataqueJugador == ataqueRival ){
        crearMensaje("Empataron")
    } else if((ataqueJugador == 'Aire' && ataqueRival == 'Agua')
    || (ataqueJugador == 'Tierra' && ataqueRival == 'Fuego') 
    || (ataqueJugador == 'Tierra' && ataqueRival == 'Aire')
    || (ataqueJugador == 'Fuego' && ataqueRival == 'Aire')
    || (ataqueJugador == 'Agua' && ataqueRival == 'Fuego')
    || (ataqueJugador == 'Agua' && ataqueRival == 'Tierra')){
        crearMensaje("Ganaste")
        triunfosRival --
        spanVidasRival.innerHTML = triunfosRival
    } else{
        crearMensaje("Perdiste")
        triunfosJugador --
        spanVidasJugador.innerHTML = triunfosJugador
    }

    revisarVidas()
}   

function revisarVidas(){
    if(triunfosRival == 0){
        crearMensajeFinal ('Felicitaciones, Ganaste! 🎆')
    } else if(triunfosJugador == 0){
        crearMensajeFinal ('A dado una gran pelea, pero tu rival a sido muy fuerte. Perdiste. 🙁')
    }
}

function crearMensaje(resultado){
    // en esta línea estamos ayudando a identificar createElement que etiqueta editar en HTML
    let sectionMensajes = $('resultado')
    let ataqueDelJugador = $('ataques-jugador')
    let ataqueDelRival = $('ataques-rival')

    // el metodo createElement permite editar el HTML desde JS cualquier etiqueta
    let nuevoAtaqueJugador = document.createElement('p')
    let nuevoAtaqueRival = document.createElement('p')
    
    sectionMensajes.innerHTML = resultado
    nuevoAtaqueJugador.innerHTML = ataqueJugador
    nuevoAtaqueRival.innerHTML = ataqueRival

    ataqueDelJugador.appendChild(nuevoAtaqueJugador)
    ataqueDelRival.appendChild(nuevoAtaqueRival)

}

function crearMensajeFinal(resultadoFinal){

    let sectionMensajes = $('resultado')

    sectionMensajes.innerHTML = resultadoFinal
    
    boton = $('boton-aire')
    boton.disabled = true
    boton = $('boton-agua')
    boton.disabled = true
    boton = $('boton-fuego')
    boton.disabled = true
    boton = $('boton-tierra')
    boton.disabled = true

    sectionReiniciar.style.display = "block"

}    

function reiniciarJuego(){
    location.reload()
}


//este metodo lo que hace es ejecutar la carga de la pagina después de haber invocado la funcion de la línea 1
window.addEventListener('load', iniciarJuego )

Intenté usar variables globales para ahorrar algunas líneas de código. Solo que, el juego está presentando errores con el botón de reiniciar y seleccionar la mascota 😐

yo lo que hice fue mandar todas las variables que usaba en 2 o mas funciones y las dejaba como global.

let ataqueJugador = ''
let ataqueEnemigo = ''
let vidaJugador = 3
let vidaEnemigo = 3
let sectionMensajeCombate  = document.getElementById('resultado')
let sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque')
    sectionSeleccionarAtaque.style.display = 'none'
let sectionMensajeFinal = document.getElementById('mensajes')
    sectionMensajeFinal.style.display = 'none'
let btnReiniciar = document.getElementById('Reiniciar')
    btnReiniciar.style.display = 'none'  
let botonMascotaJugador = document.getElementById('boton-mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
let botonFuego = document.getElementById('boton-fuego')
    botonFuego.addEventListener('click',ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
    botonAgua.addEventListener('click',ataqueAgua)
let botonPlanta = document.getElementById('boton-planta') 
    botonPlanta.addEventListener('click',ataquePlanta)
let botonReiniciar = document.getElementById('reiniciar')
    botonReiniciar.addEventListener('click',reiniciarJuego)   
            


// función para saber que eleccion tomo el jugador
function seleccionarMascotaJugador(){
    let mokeponHipodoge = document.getElementById('hipodoge')
    let mokeponCapipepo = document.getElementById('capipepo')
    let mokeponRatigueya = document.getElementById('ratigueya')
    let mokeponLangostelvis = document.getElementById('langostelvis')
    let mokeponTucapalma = document.getElementById('tucapalma')
    let mokeponPydos = document.getElementById('pydos')
    let spanMascotaJugador = document.getElementById('mascota-jugador')
    let imagenMokeponCombate = document.getElementById('imagen-mokepon-jugador')
    let eleccionJugador= ''
    if(mokeponHipodoge.checked){         
        eleccionJugador = 'Hipodoge'
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/hipodoge.jpg" alt="">')        
    }else if(mokeponCapipepo.checked){
        eleccionJugador = 'Capipepo' 
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/capipepo.jpg" alt="">')         
    }else if(mokeponRatigueya.checked){
        eleccionJugador = 'Ratigueya' 
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/ratigueya.jpg" alt="">')   
    }else if(mokeponLangostelvis.checked){
        eleccionJugador = 'Langostelvis'
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/langostelvis.jpg" alt="">')   
    }else if(mokeponTucapalma.checked){
        eleccionJugador = 'Tucapalma' 
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/tucapalma.jpg" alt="">')  
    }else if(mokeponPydos.checked){
        eleccionJugador = 'Pydos'
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/pydos.jpg" alt="">')   
    }else{
        alert ('No seleccionaste a un Mokepon')
    }
    spanMascotaJugador.innerHTML = eleccionJugador
    if(eleccionJugador!=''){
        seleccionarMascotaEnemigo()
    }

    
}

//función para saber que mokepon elige la computadora
function seleccionarMascotaEnemigo(){
//mostramos la seccion ataque
    sectionSeleccionarAtaque.style.display = 'flex'
//ocultamos la seccion mascota
    let sectionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        sectionSeleccionarMascota.style.display = 'none'
//la computadora elige un mokemon aleatorio con un numero de 1 a 6
    let eleccionEnemigo = aleatorio(1,6)
    let imagenMokeponCombate = document.getElementById('imagen-mokepon-enemigo')
    let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
    if(eleccionEnemigo == 1){
        spanMascotaEnemigo.innerHTML = 'Hipodoge' 
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/hipodoge.jpg" alt="">')        
    }else if(eleccionEnemigo == 2){ 
        spanMascotaEnemigo.innerHTML = 'Capipepo' 
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/capipepo.jpg" alt="">')         
    }else if(eleccionEnemigo == 3){
        spanMascotaEnemigo.innerHTML = 'Ratigueya'
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/ratigueya.jpg" alt="">')   
    }else if(eleccionEnemigo == 4){
        spanMascotaEnemigo.innerHTML = 'Langostelvis'
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/langostelvis.jpg" alt="">')   
    }else if(eleccionEnemigo == 5){
        spanMascotaEnemigo.innerHTML = 'Tucapalma'
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/tucapalma.jpg" alt="">')   
    }else if(eleccionEnemigo == 6){
        spanMascotaEnemigo.innerHTML = 'Pydos' 
        imagenMokeponCombate.innerHTML = ('<img src="./imagenes/pydos.jpg" alt="">')  
    }        
    
}

// aca son las funciones de los 3 botones de ataque y se inicia la seleccion de ataque del enemigo
function ataqueFuego(){
    ataqueJugador = 'Fuego'
    fnAtaqueEnemigo()
}


function ataqueAgua(){
    ataqueJugador = 'Agua'
    fnAtaqueEnemigo()
}


function ataquePlanta(){
    ataqueJugador = 'Planta'
    fnAtaqueEnemigo()
}

//aca el enemigo genera un ataque aleatorio 1 es fuego 2 agua 3 planta
function fnAtaqueEnemigo(){
    let ataqueAleatorioEnemigo = aleatorio(1,3)
    if(ataqueAleatorioEnemigo == 1){
        ataqueEnemigo='Fuego'
    }else if(ataqueAleatorioEnemigo == 2){
        ataqueEnemigo='Agua'
    }else{
        ataqueEnemigo='Planta'
    } 
    combate()        
} 

//se inicia el combate y se da el mensaje del resultado, tambien se incia el contador de vidas 
function combate(){ 
    spanVidasJugador = document.getElementById('vida-jugador')
    spanVidasEnemigo = document.getElementById('vida-enemigo')
    if(ataqueJugador == ataqueEnemigo){
        crearMensaje('No hizo efecto')
    }else if(ataqueJugador == 'Fuego' && ataqueEnemigo == 'Planta'  ||  ataqueJugador == 'Agua' && ataqueEnemigo == 'Fuego'  ||  ataqueJugador == 'Planta' &&ataqueEnemigo == 'Agua'){
        crearMensaje('Fue: Muy eficaz')
        vidaEnemigo --
        spanVidasEnemigo.innerHTML=(vidaEnemigo)
    }else{
        crearMensaje('Fue: Poco eficaz')
        vidaJugador --
        spanVidasJugador.innerHTML=(vidaJugador)
    }
    revisarVidas()
}

//revisamos las vidas si algun jugador queda en 0 vidas se despliega la funcion mensaje final
function revisarVidas(){
    if (vidaJugador == 0 ){
        crearMensajeFinal('Perdiste')           
    }else if(vidaEnemigo == 0){
        crearMensajeFinal('Ganaste')
    }
}

 //aca creamos los mensajes del combate: ataque del jugador, enemigo y el resultado del mismo
 function crearMensaje(resultadoCombate){
    //creamos el parrafo y lo asignamos al id mensajes 
    let mensajeAtaqueJugador = document.getElementById('ataque-jugador')
    let mensajeAtaqueEnemigo = document.getElementById('ataque-enemigo')
    mensajeAtaqueJugador.innerHTML =(ataqueJugador)
    mensajeAtaqueEnemigo.innerHTML = (ataqueEnemigo)
    sectionMensajeCombate.innerHTML = (resultadoCombate)

}

//función mensaje final
function crearMensajeFinal(resultadoVidas){  
    //ocultamos el contenido del combate y mostramos el mensajes final en la misma ventana 
    sectionMensajeCombate.style.display = 'none'
    sectionMensajeFinal.style.display = 'flex'
    //mostramos boton reiniciar 
    btnReiniciar.style.display = 'flex'
    //creamos el parrafo y lo asignamos al id mensajes       
    let parrafoMensajeFinal = document.createElement('p')
    //enviamos el mensaje que se va a colocar en el parrafo creado anteriormente
    parrafoMensajeFinal.innerHTML = resultadoVidas
    sectionMensajeFinal.appendChild(parrafoMensajeFinal) 
    //deshabilitamos los botones de ataque
    botonAgua.disabled = true
    botonFuego.disabled = true
    botonPlanta.disabled = true
}

//función reinciar juego
function reiniciarJuego(){
    location.reload()
}

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

‘Por qué estos no las pusimes’, se oye al profesor en el minuto 16:35. Esa palabra no existe, es pusimos.

Esta fue mi solucion

const $ = (a)=> document.querySelector(a);

asi podemos seleccionar todos los elementos del html tanto por id como por clase

En muchas ocaciones, es importante diferenciar las variables globales de las locales, para ello se puede colocar una gv o una lv al inicio de la variable

Volviendo a repetir las clases 😥, tengo un error que no he logrado solucionar de clases más avanzadas

Esto es lo que necesitaba para poder aportar a mi código sin romperme la cabeza, ahora se siente ordenado y fácil de leer, muchas gracias :3

Un truco para seleccionar la línea mucho más rápido dando tres click rápidos seleccionas toda la línea, otro para borrar los espacios rápidamente al darle click en una línea y luego mantienes la tecla alt y le das click en otra línea vas a crear un nuevo cursor y luego que ya tengas todos los cursores en los espacios que deseas borrar solo debes de dar ctrl + x, y listo ya los espacios se han borrado

para optimizar este código(Cod1) lo solucione(Cod 2) de la siguiente forma

Cod1:

function crearMensajeEnemigo (){
  
  let parrafo = document.createElement('p')  
    parrafo.innerHTML = ataqueEnemigo
    mensajeEnemigo.appendChild(parrafo)
   }

function crearMensajeJugador (){

  let parrafo = document.createElement('p')
    parrafo.innerHTML = ataquejugador 
    mensajeJugador.appendChild(parrafo)
  }

Cod2

function crearMensaje (ataque,mensaje){
    let parrafo = document.createElement('p')  
    parrafo.innerHTML = ataque
    mensaje.appendChild(parrafo)
   }

En linux si quieren seleccionar diferentes partes del codigo presionen

Crtl+Shift+P

Despues busquen

Toggle Multi-Cursor Modifier

Presionen Enter y ya solo presionando Ctrl pueden seleccionar diferentes partes del codigo.

Fuente: https://stackoverflow.com/questions/60272595/vscode-multi-line-edit-select-on-linux-mint

Para leer mejor el código
En el menú View+Word Wrap
Mac Option+Z
Windows Alt+Z

Yo necesito un curso más básico que este =(

Muy útil lo de declarar variables al principio del código JS, lo que a mi entender quedarían como variables o constantes “globales”, las cuales podremos utilizar dentro de cualquier función.
Algo importante es nombrarlas de manera clara para dar una idea de a qué se refieren, así cuando las utilicemos dentro de las funciones será más fácil entender a qué hacen referencia.

let: una cajita donde podes ir guardando diferentes cosas

const: una caja fuerte donde solo puedes guardar una sola cosa para siempre

Algo para que tengas en cuenta

lo estaba haciendo en la marcha, y cuando me salio el error de doble variable me asuste ya que hasta se perdió el centrado.

arriba! diego buena clase percibo que si eres un buen docente…

let playerAttack
let enemyAttack
let mascotaJugador
let mascotaEnemigo
let vidasJugador = 3
let vidasEnemigo = 3

function styleDisplay(htmlElementName, displayOption) {
    let variableSP = document.getElementById(htmlElementName)
    variableSP.style.display = displayOption
}

function eventListener(htmlElementName, event, functionName) {
    let variableAEL = document.getElementById(htmlElementName)
    variableAEL.addEventListener(event, functionName)
}

function inputChecked(htmlElementName) {
    let variableIC = document.getElementById(htmlElementName)
    if (variableIC.checked) {
        return true
    } else {
        return false
    }
}

function setDisabled(htmlElementName,state) {
    let variableSD = document.getElementById(htmlElementName)
    variableSD.disabled = state
}

function innerHTMLfunction(htmlElementName, text) {
    let variableIHTML = document.getElementById(htmlElementName)
    variableIHTML.innerHTML = text
}

function iniciarJuego() {
    styleDisplay('seleccionar-ataque', 'none')
    
    eventListener('boton-mascota', 'click', seleccionarMascotaJugador)

    eventListener('boton-fuego', 'click', ataqueFuego)
    eventListener('boton-agua', 'click', ataqueAgua)
    eventListener('boton-tierra', 'click', ataqueTierra)
    eventListener('boton-reiniciar', 'click', restartGame)
}

function ataqueFuego() {
    playerAttack = "🔥"
    enemyRandomAttack()
}

function ataqueAgua() {
    playerAttack = "💧"
    enemyRandomAttack()
}

function ataqueTierra() {
    playerAttack = "🌱"
    enemyRandomAttack()
}

function seleccionarMascotaJugador() {
    styleDisplay('reiniciar','none')

    if (inputChecked('hipodoge')) {
        innerHTMLfunction('mascota-jugador', 'Hipodoge')
        mascotaJugador = "Hipodoge"
        sectionsSwipe()
    } else if (inputChecked('capipepo')) {
        innerHTMLfunction('mascota-jugador', 'Capipepo')
        mascotaJugador = "Capipepo"
        sectionsSwipe()
    } else if (inputChecked('ratigueya')) {
        innerHTMLfunction('mascota-jugador', 'Ratigüeya')
        mascotaJugador = "Ratigüeya"
        sectionsSwipe()
    } else {
        alert("Seleccione su mascota")
    }

    seleccionarMascotaEnemiga()   
}

function seleccionarMascotaEnemiga() {
    let randNum = randomNumber(1,3)

    if (randNum == 1) {
        innerHTMLfunction('mascota-enemigo', 'Hipodoge')
        mascotaEnemigo = "Hipodoge"
    } else if (randNum == 2) {
        innerHTMLfunction('mascota-enemigo', 'Capipepo')
        mascotaEnemigo = "Capipepo"
    } else {
        innerHTMLfunction('mascota-enemigo', 'Ratigüeya')
        mascotaEnemigo = "Ratigüeya"
    }
}

function sectionsSwipe() {
    innerHTMLfunction('vidas-jugador', vidasJugador)
    innerHTMLfunction('vidas-enemigo', vidasEnemigo)
    styleDisplay('seleccionar-ataque','flex')
    styleDisplay('seleccionar-mascota','none')
}

function enemyRandomAttack() {
    let randomAttack = randomNumber(1,3)
    
    if (randomAttack == 1) {
        enemyAttack = "🔥"
    } else if (randomAttack == 2) {
        enemyAttack = "💧"
    } else {
        enemyAttack = "🌱"
    }
    combat()
}

function combat() {
    if (playerAttack == enemyAttack) {
        createMessage("¡EMPATE!")
    } else if (playerAttack == "🔥" && enemyAttack == "🌱") {
        createMessage("¡BATALLA GANADA!")
        vidasEnemigo--
        innerHTMLfunction('vidas-enemigo',vidasEnemigo)
    } else if (playerAttack == "💧" && enemyAttack == "🔥") {
        createMessage("¡BATALLA GANADA!")
        vidasEnemigo--
        innerHTMLfunction('vidas-enemigo',vidasEnemigo)
    } else if (playerAttack == "🌱" && enemyAttack == "💧") {
        createMessage("¡BATALLA GANADA!")
        vidasEnemigo--
        innerHTMLfunction('vidas-enemigo',vidasEnemigo)
    } else {
        createMessage("¡BATALLA PERDIDA!")
        vidasJugador--
        innerHTMLfunction('vidas-jugador',vidasJugador)
    }
    revisarVidas()
}

function revisarVidas() {
    if (vidasEnemigo == 0) {
        createFinalMessage("¡GANASTE LA GUERRA!")
        styleDisplay('reiniciar','block')
    } else if (vidasJugador == 0){
        createFinalMessage("¡PERDISTE LA GUERRA!")
        styleDisplay('reiniciar','block')
    }
}

function innerAndAppend(typeOfElement,text,HTMLelementName) {
    let variableIandA1 = document.createElement(typeOfElement)
    let variableIandA2 = document.getElementById(HTMLelementName)
    variableIandA1.innerHTML = text
    variableIandA2.appendChild(variableIandA1)
}

function createMessage(resultado) {
    innerHTMLfunction("resultado",resultado)
    innerAndAppend('p',playerAttack,"ataques-del-jugador")
    innerAndAppend('p',enemyAttack,"ataques-del-enemigo")
}

function createFinalMessage(finalResult) {
    innerHTMLfunction("resultado",finalResult)
    setDisabled('boton-fuego',true)
    setDisabled('boton-agua',true)
    setDisabled('boton-tierra',true)
}

function restartGame() {
    location.reload()
}

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

window.addEventListener('load', iniciarJuego)

wow para mi es otro level

gracias por el comentario

Me encantan todos los profesores de Platzi, contagian la energia!

don’t repeat yourself (dry) --> no te repitas

const --> constante
let --> variable

¡Gracias por la clase! Estuve un poco confundido con ciertas cosas, pero logré entenderlas. Este curso ha pasado de algo muy básico a cosas complejas. La evolución es evidente, pero los profesores explican de maravilla y te motivan a seguir hasta el final.

DRY, a trasladar el código repetido arriba , antes iniciar las funciones y así puede eliminar las repeticiones.

Yo lo hice así, remplacé todos los document.get.ElementById() por esta función.

function  returnElement(nameElement)
{
    let newElement = document.getElementById(nameElement)
    return newElement
}

Lo que yo hice fue crear más funciones para no tener tantas variables globales, se me hace más facil de leer y organizado.
Si se les ocurren mejoras avisen 😃

// Variables globales
let ataqueJugador = '';
let ataqueEnemigo = '';
let resultado = '';
let vidasJugador = 3;
let vidasEnemigo = 3;


function iniciarJuego() {
  ocultarElemento('container-juego');
  ocultarElemento('reiniciar');
  
  // Selección de mascota del jugador	
  evento('boton-mascota', 'click', seleccionarMascotaJugador);

  // Botones de ataque del jugador
  evento('boton-fuego', 'click', ataqueFuego);
  evento('boton-agua', 'click', ataqueAgua);
  evento('boton-tierra', 'click', ataqueTierra);

  // Reiniciar el juego
  evento('boton-reiniciar', 'click', reiniciarJuego);
}

// Funciones para la mascota del jugador
function seleccionarMascotaJugador() {
  let inputDragon = document.getElementById('dragon');
  let inputPerro = document.getElementById('perro');
  let inputPez = document.getElementById('pez');
  let spanMascotaJugador = document.getElementById('mascota-jugador');

  switch (true) {
    case inputDragon.checked:
      spanMascotaJugador.innerHTML = '🐉 Dragoncito';
      break;
    case inputPerro.checked:
      spanMascotaJugador.innerHTML = '🐕 Perrito';
      break;
    case inputPez.checked:
      spanMascotaJugador.innerHTML = '🦈 Pececito';
      break;
    default:
      alert('selecciona una mascota');
  }

  mostrarElemento('container-juego', 'flex');
  ocultarElemento('container-mascota');

  seleccionarMascotaEnemigo();
}

function ataqueFuego() {
  ataqueJugador = '🔥';
  elementoAtaqueEnemigo();
}
function ataqueAgua() {
  ataqueJugador = '💧';
  elementoAtaqueEnemigo();
}
function ataqueTierra() {
  ataqueJugador = '🌱';
  elementoAtaqueEnemigo()
}

// Funciones para la mascota enemiga
function seleccionarMascotaEnemigo() {
  let mascotaAleatoria = aleatorio(1, 3);
  let spanMascotaEnemigo = document.getElementById('mascota-enemigo');

  switch (mascotaAleatoria) {
    case 1:
      spanMascotaEnemigo.innerHTML = '🐉 Dragoncito';
      break;
    case 2:
      spanMascotaEnemigo.innerHTML = '🐕 Perrito';
      break;
    default:
      spanMascotaEnemigo.innerHTML = '🦈 Pececito';
      break;
  }
}

function elementoAtaqueEnemigo() {
  let ataqueAleatorio = aleatorio(1, 3);

  switch (ataqueAleatorio) {
    case 1:
      ataqueEnemigo = '🔥';
      break;
    case 2:
      ataqueEnemigo = '💧';
      break;
    default:
      ataqueEnemigo = '🌱';
      break;
  }
  
  combate();
}

// Combate
function combate() {
  switch (ataqueJugador, ataqueEnemigo) {
    case ataqueEnemigo, ataqueJugador:
      resultado = 'Empataste';
      break;
    case '🌱', '💧' || '💧', '🔥' || '🔥', '🌱':
      resultado = 'Ganaste';
      vidasEnemigo--;
      break;
    default:
      resultado = 'Perdiste';
      vidasJugador--;
      break;
  }

  actualizarVidas(vidasJugador, vidasEnemigo);

  crearMensaje(ataqueJugador, 'ataque-jugador');
  crearMensaje(ataqueEnemigo, 'ataque-enemigo');
  crearMensaje(resultado, 'resultado-ronda');

  if (revisarVidas() !== '') crearMensajeGanador(revisarVidas());
}

// Actualizar vidas
function actualizarVidas(vidasJugador, vidasEnemigo) {
  modificarMensaje(vidasJugador, 'vidas-jugador');
  modificarMensaje(vidasEnemigo, 'vidas-enemigo');
}

// document.getElementById(id).innerHTML = mensaje;
function crearMensajeGanador(ganador) {
  crearMensaje(`🏆 El ganador es ${ganador} 🏆`, 'resultado');

  // Desactivar botones para evitar ataques después de terminado el juego
  desactivarBotones('boton-fuego');
  desactivarBotones('boton-agua');
  desactivarBotones('boton-tierra');

  // Mostrar botón de reinicio
  mostrarElemento('reiniciar', 'flex');
}

function desactivarBotones(id) {
  document.getElementById(id).disabled = true;
}

function revisarVidas() {
  let ganador = '';
  switch (true) {
    case vidasJugador === 0:
      ganador = '🤬 Enemigo';
      break;
    case vidasEnemigo === 0:
      ganador = '😂 Jugador';
      break;
  }
  return ganador;
}

function reiniciarJuego() {
  location.reload();
}

// Funciones auxiliares
function evento(id, evento, funcion) {
  document.getElementById(id).addEventListener(evento, funcion);
}

function ocultarElemento(id) {
  document.getElementById(id).style.display = 'none';
}

function mostrarElemento(id, display) {
  document.getElementById(id).style.display = display;
}

function crearMensaje(mensaje, id) {
  let parrafo = document.createElement('p');
  parrafo.innerHTML = mensaje;
  document.getElementById(id).appendChild(parrafo);
  document.getElementById(id).scrollTop = document.getElementById(id).scrollHeight;
}

function modificarMensaje(mensaje, id) {
  document.getElementById(id).innerHTML = mensaje;
}

function aleatorio(min, max) { 
  return Math.floor(Math.random() * (max - min + 1) + min) ;
}
window.addEventListener('load', iniciarJuego);

Buenos días: hice a si;
let botonFuego = document.getElementById(‘boton-fuego’,‘boton-agua’,‘boton-tierra’)
botonFuego.disabled = true
let spanVidasJugador = document.getElementById(‘vidas-jugador’,‘vidas-enemigo’)

EL resto no me atreví a tocarlo 😐

(DRY)

<code> function crearMensajeFinal(resultadoFinal) {
    
    let sectionMensajes = document.getElementById('resultado')

    sectionMensajes.innerHTML = resultadoFinal

    var buttonPoderes = ['boton-fuego', 'boton-flechas', 'boton-esqueletos']

    buttonPoderes.forEach(function(ataques){
       var botones= document.getElementById(ataques);
       botones.disabled = true;
    })

    let sectionReiniciar = document.getElementoById('reiniciar')
    sectionReiniciar.style.display = 'block'
}

En vez del ataque me aparece [HTMLDIVELEMENT] ?

Llevo atrapado en esta parte bastante tiempo y la verdad no se como solucionar. mil gracias

Nunca había sentido tanto placer por el orden y la no repetición. :v

Los docentes de platzi son muy bien seleccionados. Son carismáticos; saben transpolar su conocimiento, que es mucho, para que uno como estudiante pueda entender. Además, generan mucha emoción al expresar sus ideas.

Felicito en gran medida a su equipo de trabajo.

Yo crearía variables globales o funciones que me permitan acceder a variables que se deban usar una y otra vez.

lo primero que se me vino a la cabeza fue esto

function crearMensaje(resultado, ataqueJugador, ataqueEnemigo) {
    const sectionMensajes = document.getElementById('resultado');
    sectionMensajes.innerHTML = resultado;

Otra manera muy sencilla y rápida de seleccionar una línea entera es haciendo 3 clicks rápidos sobre la línea en cualquier punto.

Sirve también para seleccionar varias líneas a la vez con mantener presionada la tecla Alt así como hace el profesor Diego.

Entonces JDC nos creco un monton de variables repetidas… tocara hablar seriamente con él.

Espero poder ayudarle a quien tenga alguna duda con el reto del profesor.

En el código se repetían demasiados…

document.getElementById();.

En la primera función que corre cuando el html ha cargado por completo tenía algunas secciones configuradas para que no se muestren, como un ejemplo tenemos:

let seccion2 = document.getElementById("seccionElegirAtaque");
seccion2.style.display = "none";

//Este código se repetía algunas otras veces más junto con más secciones en el resto del código//
.
Lo que hice para optimizar y no volver a repetir el mismo código fue hacer la siguiente función:

function seccion2(x) {
let seccion2 = document.getElementById("seccionElegirAtaque");
seccion2.style.display = x;
}

Y listo, ahora en la primera función que corre en el script, a la cual yo reconozco como la principal tengo el siguiente código:

//Para ocultar la seccion...
seccion2("none"); 

//Para mostrar la seccion con el display tipo flex...
seccion2("flex");

A partir de aquí remplazé esta misma función por las partes de mi código donde se repetía todo el código.

Espero les haya ayudado compañeros 😃

Con "CTRL + F " pueden abrir el buscador de palabras del visual studio, así pueden identificar más rápido esas variables repetidas.

Ya me parecía raro tantas variables iguales dentro de funciones, yo en un inicio pensaba dejarlas afuera y no lo hice por el tema que los profes no lo hacían.

Que increible es Diego, de verdad que da una seguridad escucharlo, y mostrar como es que programa, increible.

Desde el inicio no sé porqué pero no seguí el código y estas dos últimas clases no tuve que editarlo, lo tengo como al final de esta clase 😁

VAR vs LET vs CONST

la variable const quiere decir que no se puede volver a reasignar, cuando el valor de una variable const es un array o object estos si pueden ser mutables

Un consejo…ya que a partir de acá se va a modificar el código inicial de JavaScript…creen otro archivo .js, copien todo a ese nuevo archivo y en el HTML llaman a ese nuevo archivo en script…de esta manera tendrán el código mejorado y lo podrán comparar con el anterior.

💪 Evita repetir el MISMO código varias veces, esto para tener un código limpio y fácil de escalar.
 
Aprendí que:

• Let para variables que pueden modificar su valor varias veces
• Const para variables que cuando reciban su valor se quede fijo.

Es interesante el proceso de depuración que sucede ya en esta etapa. Es importante ir paso a paso, declarar las variables que vamos a ir utilizando y siempre luego si revisar nuestro código para saber como optimizarlo sin que falle.

Lo que veo es que el Profe Diego es de muy cortar y pegar para hacer optimizaciones. En este punto ya me hace mucha falta entender del control de versión en GitHub, por ahora tuve que crear una carpeta aparte con una copia del proyecto anterior.
Solo hago esto porque no se como llevar el control de versiones ahora mismo y siento que en cualquier momento voy a romper el código.

Es interesante la forma en que se usaron todas las variables “ID” como una declaracion de variables globales. Sabia de estos, pero nunca como usarlos en las practicas. Ahora si me quedo claro el como se deben aplicar. Espero seguir aprendiendo mas sobre esto.

Que pedazo de crack que es el profe diego. Lo banco a muerte en 2 clases me demostró que es un monstro!