Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

Programación en Navegadores: Primeros Pasos

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de árbol en HTML

6

Instalando tu primer editor de código

7

Cómo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del código usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

¿Qué es el DOM?

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación con HTML

17

Sección de elegir mascota

18

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulación del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

¿Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

¿Quién ganó el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatomía de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Imágenes para los Mokepones

37

Estilos del botón

38

Adaptando HTML al diseño del juego

39

Layout: título y ataques

40

Adaptando JavaScript al diseño del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimización de código

44

Revisión de código

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaración lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques dinámicos por cada mascota: extraer

55

Renderizado dinámico en HTML

56

Eventos de click dinámicos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimización de código

Mapa con canvas

61

Introducción a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Imágenes y personajes de fondo

66

Métodos en las clases

67

Obstáculos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

¿Qué es backend?

72

Instalación de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisión de coordenadas

79

Mokepones dinámicos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Probando el juego en varios dispositivos

84

¿Y ahora qué curso tomar?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Juan David Castro Gallego

Juan David Castro Gallego

¿Ganaste, perdiste o empataste?

26/84
Recursos

Aportes 545

Preguntas 165

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Voy siguiendo el curso con una ligera variante

Lo resolvi con una o dos lineas demás yo…

let resultado //común a todas las funciones

function ataqueAleatorioEnemigo() {
    let ataqueAleatorio = aleatorio(1, 3)
    if (ataqueAleatorio == 1) {
        ataqueEnemigo = "FUEGO"
    } else if (ataqueAleatorio == 2){
        ataqueEnemigo = "AGUA"
    } else if (ataqueAleatorio == 3){
        ataqueEnemigo = "TIERRA"}
    
    combate()//se invoca la función aquí, antes de la de crearMensaje, para que la variable resultado ya tenga un valor establecido
    crearMensaje()
}

function combate() {
    if (ataqueJugador == ataqueEnemigo) {
      resultado = "EMPATE"
  } else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") {
      resultado = "GANASTE"
  } else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") {
      resultado = "GANASTE"
  } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
      resultado = "GANASTE"
  } else {resultado = "PERDISTE"}
}//En vez de invocar la función crearMensaje en cada una de las condicionantes se le asigna un valor a la variable resultado

function crearMensaje() {
    let sectionMensajes = document.getElementById("mensajes")
    let parrafo = document.createElement("p")
    parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + ": " + resultado
    sectionMensajes.appendChild(parrafo)
}

Muy bueno que en este curso nuevo de programación básica utilicen let en js 💚

Descripción. let te permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando. a diferencia de la palabra clave var la cual define una variable global o local en una función sin importar el ámbito del bloque.

para no crear muchos ELSE IF por cada victoria, yo lo que hice fue, meter todas las victorias en un solo ELSE IF, usando este operador “||”

if(ataqueJugador == ataqueEnemigo){
	crearMensaje("EMPATE");
}else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" || ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"  || ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
	crearMensaje("GANASTE");
}else{
	crearMensaje("perdiste");
}

Mejor explicado no puede haber, su forma de enseñar con animos y alegria, al usuario lo mantiene atento a la clase, cosa que no pasa con algunos prof de las universidades

Soy demasiado novata en esto, tenía miedo de empezar y siempre me preguntaba cómo hacen los programadores para saber qué hacer en cada caso, pero creo que tengo la respuesta, y es hacer lo que hicieron en el caso anterior jajaja, me gusta estar entendiendo por fin!!

  1. Yo cree una variable global llamada resultadoDelCombate

  2. Cree una función llamada combate() la cual se ejecuta dentro de la función ataqueAleatoreoEnemigo() Justo antes de la función crearmensaje()

  3. La logica del combate es exactamente la misma del Piedra Papel o Tijera, donde por medio de los condicionales if, else if y else se define el resultado que se guarda en la variable global resultadoDelCombate.

  4. Añado la variable global resultadoDelCombate dentro de mi parrafo en la funcion crearMensaje()

voy a pasasr este juego a nft xD

Así lo resolví. Creé una nueva variable global llamada resultado , luego creé una función llamada combate y dentro de la función, el resultado del combate se lo asignaba a la variable resultado. Por último, el resultado lo concateno con el mensaje que se dispara en la función crearMensaje.

Estuve dos dias, DOS DIAS¡¡¡¡ intentando solucionar un error, el error consistía que el resultado siempre me daba undefined, y lo que pasa es que estuve haciendo de todo para solucionar el dicho error, al fin lo encontré, y es que no estaba invocando a la función combate, que felicidad xd
no se olviden de revisar donde invocan las funciones, es reimportante ya que la solución no se encuentra en ninguna parte mas que en la lógica, y se los digo por que busque en muchas zonas como solucionar errores de directorio y eso, mucha suerte¡¡¡

Vamos que vamos👏🙌

Yo de mokepon no se mucho de quien debería ganar pero yo lo hice así:


//Se creo la variable resultado
let resultado

//Se hizo la función de resultado de batalla
function resultado_batalla(){
    if (ataqueEnemigo == ataqueJugador){
        resultado = "EMPATE"
    } else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
        resultado = "GANASTE"
    } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "FUEGO"){
        resultado = "GANASTE"
    } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        resultado = "GANASTE"
    } else{
        resultado = "PERDISTE"
    }
}

// Coloque la función antes de que se cree el mensaje
function ataqueAleatorioEnemigo(){
    let ataqueAleatorio = aleatorio(1,3)
    // let spanAtaqueEnemigo = document.getElementById("mascota-enemigo")

    if (ataqueAleatorio == 1){
        ataqueEnemigo = "FUEGO"
    }
    else if (ataqueAleatorio == 2){
        ataqueEnemigo = "AGUA"
    }
    else if (ataqueAleatorio == 3){
        ataqueEnemigo = "TIERRA"
    }

    resultado_batalla()
    crearMensaje() 
}

//Se agrego a la función de creanMensaje la variable resultado

function crearMensaje(){
    let sectionMensajes = document.getElementById("mensajes")

    let parrafo = document.createElement("p")
    parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " " + resultado
    sectionMensajes.appendChild(parrafo)
}

vi en un comentario anterior a alguien usando “and/or” || y me ha servido para agrupar todas las posiiblidades con eñ mismo resultado, les dejo esa parte de mi codigo

function combate(){

if (ataqueJugador == ataqueEnemigo) {
    result = "EMPATE"
} else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA" || ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" || ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
    result = "GANASTE"
} else {
    result = "PERDISTE"
}

Yo lo resolví de otra manera. Puse todo el combate dentro de la función crearMensaje que ya teníamos y no cambié nada más.
Me quedo asi:

let ataqueJugador
let ataqueEnemigo


function iniciarJuego(){
    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 botonTierra = document.getElementById("boton-tierra")
    botonTierra.addEventListener("click", ataqueTierra)


}

function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let spanMascotaJugador = document.getElementById("mascota-jugador")
        
    if (inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = "Hipodoge"
    }  else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = "Capipepo"
    }  else if (inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = "Ratigueya"
    }  else {
        alert("Todavía no seleccionaste a tu mascota")
    }

    seleccionarMascotaEnemigo()
    
}
function seleccionarMascotaEnemigo() {
    let mascotaAleatoria = aleatorio(1,3)
    let spanMascotaEnemigo = document.getElementById("mascota-enemigo")

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

    crearMensaje()
}    


function crearMensaje() {
    let resultado
    if (ataqueJugador == ataqueEnemigo) {
        resultado = "Empate 🤝"
    } else if ((ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") || (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") || (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA")) {
        resultado = "Ganaste! 🎉"
    } else if ((ataqueJugador == "FUEGO" && ataqueEnemigo == "AGUA") || (ataqueJugador == "AGUA" && ataqueEnemigo == "TIERRA") || (ataqueJugador == "TIERRA" && ataqueEnemigo == "FUEGO")) {
        resultado = "Perdiste! 😭"
    }

    let sectionMensajes = document.getElementById("mensajes")

    let parrafo = document.createElement("p")
    parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + ". " + resultado

    sectionMensajes.appendChild(parrafo)

}

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

window.addEventListener("load", iniciarJuego) 

Me pasó lo de los memes…

Hice una solución distinta a la del maestro, primero no funcionó entonces usé la solución de él. Pero me di cuenta de un error y volví a intentar con mi solución y funcionó.

Aunque si les soy honesto, no tengo ni pta idea de por qué mi código funciona xd

Está fue la manera como lo resolví. El código me funciona sin embargo es algo diferente a como lo realizó El profe Juan David

gracias platzi tengo trece años y es muy genial y facil aprender con ustedes una pregunta mi pagina se creshea al momento de aplicar un while

//#region variablesId
    
    //#region buttonsId
        let petButton = document.getElementById("selectPet");
        let fireButtonAttack = document.getElementById("fireAttack");
        let waterButtonAttack = document.getElementById("waterAttack");
        let earthButtonAttack = document.getElementById("earthAttack");
    //#endregion

    //#region petsId
        let hipodogeId = document.getElementById("hipodoge");
        let capipepoId = document.getElementById("capipepo");
        let ratigueyaId = document.getElementById("ratigueya");
        let langostelvisId = document.getElementById("langostelvis");
        let tucapalmaId = document.getElementById("tucapalma");
        let pydosId = document.getElementById("pydos");
    //#endregion

    //#region dataPetsId
    let petToThePlayer = document.getElementById("petToPlayer");
    let petToThePlayerLives = document.getElementById("livesToPetToPlayer");
    let petToTheEnemy = document.getElementById("petToEnemy");
    let petToTheEnemyLives = document.getElementById("livesToPetToEnemy");

    
    labelP = document.getElementById("messages");
    //#endregion

//#endregion

//#region normalVars
    
    let playerPetName;
    let pcPetName;
    let playerSiSelecionaste;
    let pcSiSelecionaste;
    let playerAttack;
    let playerAttackName;
    let pcAttack;
    let pcAttackName;

    var attackPlayerText;
    var attackPCText;
    var vicOderText;
    var pcPetText;
    var playerPetText;
    var winsPlayer = 0;
    var winsPC = 0;
    var quienGano;

//#endregion

//#region events
    fireButtonAttack.addEventListener("click",buttonFireAttack);
    waterButtonAttack.addEventListener("click",buttonWaterAttack);
    earthButtonAttack.addEventListener("click",buttonEarthAttack);

//#endregion

//#region importantExtra
function aleatorio(min,max)
{
    return Math.floor(Math.random() * (max - min + 1) + min );
}

function startGame()
{
    petButton.addEventListener("click",playerSelectPet);
}

function drawText(messageText)
{
    var newMessage = document.createElement("p");
    
    labelP.appendChild(newMessage);
    newMessage.innerHTML = messageText;
}

//#endregion

//#region player

function playerSelectPet()
{

    if (hipodogeId.checked == true)
    {
        playerSiSelecionaste = "has seleccionado a: ";
        playerPetName = " Hipodoge ";
        petToThePlayer.innerHTML = playerPetName + "";
    }
    else if (capipepoId.checked == true)
    {
        playerSiSelecionaste = "has seleccionado a: ";
        playerPetName = " Capipepo ";
        petToThePlayer.innerHTML = playerPetName + "";
    }
    else if (ratigueyaId.checked == true)
    {
        playerSiSelecionaste = "has seleccionado a: ";
        playerPetName = " Ratigueya ";
        petToThePlayer.innerHTML = playerPetName + "";
    }
    else if (langostelvisId.checked == true)
    {
        playerSiSelecionaste = "has seleccionado a: ";
        playerPetName = " Langostelvis ";
        petToThePlayer.innerHTML = playerPetName + "";
    }
    else if (tucapalmaId.checked == true)
    {
        playerSiSelecionaste = "has seleccionado a: ";
        playerPetName = " Tucapalma ";
        petToThePlayer.innerHTML = playerPetName + "";
    }
    else if (pydosId.checked == true)
    {
        playerSiSelecionaste = "has seleccionado a: ";
        playerPetName = " Pydos ";
        petToThePlayer.innerHTML = playerPetName + "";
    }
    else
    {
        playerSiSelecionaste = "";
        playerPetName = "no has seleccionado ningun mokepon";
        petToThePlayer.innerHTML = "";
    }

    playerPetText = playerSiSelecionaste + playerPetName;

    drawText(playerPetText);

    attackPlayerText = "el ataque de tu mascota " +  playerPetName + " es de " + playerAttackName;
    vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;

    pcSelectPet();

}

function buttonFireAttack()
{
    playerAttack = 0;
    playerAttackName = "FUEGO";
    attackPlayerText = "el ataque de tu mascota " +  playerPetName + " es de " + playerAttackName;
    drawText(attackPlayerText);
    vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
    pcSelectAttack();
}

function buttonWaterAttack()
{
    playerAttack = 1;
    playerAttackName = "AGUA";
    attackPlayerText = "el ataque de tu mascota " +  playerPetName + " es de " + playerAttackName;
    drawText(attackPlayerText);
    vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
    pcSelectAttack();
}

function buttonEarthAttack()
{
    playerAttack = 2;
    playerAttackName = "TIERRA";
    attackPlayerText = "el ataque de tu mascota " +  playerPetName + " es de " + playerAttackName;
    drawText(attackPlayerText);
    vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
    pcSelectAttack();
}

//#endregion

//#region pc

function pcSelectPet()
{

    let resultadoAleatorio = aleatorio(1,6);

    if (resultadoAleatorio == 1)
    {
        pcSiSelecionaste = " tu oponente ha seleccionado a:  ";
        pcPetName = " Hipodoge ";
        petToEnemy.innerHTML = pcPetName + "";
    }
    else if (resultadoAleatorio == 2)
    {
        pcSiSelecionaste = " tu oponente ha seleccionado a:  ";
        pcPetName = " Capipepo ";
        petToEnemy.innerHTML = pcPetName + "";
    }
    else if (resultadoAleatorio == 3)
    {
        pcSiSelecionaste = " tu oponente ha seleccionado a: ";
        pcPetName = " Ratigueya ";
        petToEnemy.innerHTML = pcPetName + "";
    }
    else if (resultadoAleatorio == 4)
    {
        pcSiSelecionaste = " tu oponente ha seleccionado a: ";
        pcPetName = " Langostelvis ";
        petToEnemy.innerHTML = pcPetName + "";
    }
    else if (resultadoAleatorio == 5)
    {
        pcSiSelecionaste = " tu oponente ha seleccionado a: ";
        pcPetName = " Tucapalma ";
        petToEnemy.innerHTML = pcPetName + "";
    }
    else if (resultadoAleatorio == 6)
    {
        pcSiSelecionaste = " tu oponente ha seleccionado a: ";
        pcPetName = " Pydos ";
        petToEnemy.innerHTML = pcPetName + "";
    }

    pcPetText = pcSiSelecionaste + pcPetName;

    drawText(pcPetText);

    attackPCText = "el ataque de la mascota enemiga " +  pcPetName + " es de " + pcAttackName;
    vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;

}

function pcSelectAttack()
{
    let resultadoAleatorio = aleatorio(1,3);

    if (resultadoAleatorio == 1)
    {
        pcAttack = 0;
        pcAttackName = "FUEGO"; 
    }

    else if (resultadoAleatorio == 2)
    {
        pcAttack = 1;
        pcAttackName = "AGUA";
    }

    else
    {
        pcAttack = 2;
        pcAttackName = "TIERRA";
    }

    attackPCText = "el ataque de la mascota enemiga " +  pcPetName + " es de " + pcAttackName;
    vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;

    drawText(attackPCText);

    battle();

}

//#endregion

function battle()
{

    //while(winsPlayer < 3 || winsPC < 3)
    //{
        if (playerAttack == pcAttack)
        {
            winsPlayer = winsPlayer;
            winsPC = winsPC;
            quienGano = " EMPATE ";
        
            vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
            drawText(vicOderText);
        }
        else
        {
            if (playerAttack == 0 && pcAttack == 2)
            {
                winsPlayer += 1;
                quienGano = " GANASTE ";

                vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
                drawText(vicOderText);
            }
            else if (playerAttack == 1 && pcAttack == 0)
            {   
                winsPlayer += 1;
                quienGano = " GANASTE ";

                vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
                drawText(vicOderText);
            }
            else if (playerAttack == 2 && pcAttack == 1)
            {
                winsPlayer += 1;
                quienGano = " GANASTE ";

                vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
                drawText(vicOderText);
            }
            else
            {
                winsPC += 1;
                quienGano = " PERDISTE ";

                vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
                drawText(vicOderText);
            }

        }

Mi solucion fue crear una nueva variable al inicio llamada “combatPlay”

let attackPlayer
let attackEnemy
let combatPlay

Y luego a la funcion del combate, sustitui las alertas por la variable creada. Por ultimo hice una concatenacion con el resultado

function combat() {
    if(attackPlayer == attackEnemy) {
        combatPlay = "Empate"
    } 	else if(attackPlayer == "Fuegardo" && attackEnemy == "Hierbajo") {
        combatPlay = "Ganaste"
    } 	else if(attackPlayer == "Aguado" && attackEnemy == "Fuegardo") {
        combatPlay = "Ganaste"		
    }  	else if(attackPlayer == "Hierbajo" && attackEnemy == "Aguado") {
        combatPlay = "Ganaste"	
    } 	else {
        combatPlay = "Perdiste"
    }

    Textcombat()
}

function Textcombat() {
    let sectionMensajes=document.getElementById("mensajes")
    let parrafo=document.createElement("p")

    parrafo.innerHTML="Tu pet ataco con " + attackPlayer + ", la pet del enemigo ataco con " + attackEnemy + " " + combatPlay
    sectionMensajes.appendChild(parrafo)


lo estoy logrando

Otra forma de concatenar con comillas invertidas

parrafo.innerHTML = `Tu mascota ataco con ${ataqueJugador} , la mascota del enemigo ataco con ${ataqueEnemigo} - ${resultado}🎉`

function combate(pc, jugador) {
//combate
if (ataquePC == ataqueJug) {
mensaje = “Empate”
} else if (ataqueJug == “FUEGO” && ataquePC == “TIERRA”) {
mensaje = “Ganaste”
} else if (ataqueJug == “AGUA” && ataquePC == “FUEGO”) {
mensaje = “Ganaste”
} else if (ataqueJug == “TIERRA” && ataquePC == “AGUA”) {
mensaje = “Ganaste”
} else {
mensaje = “Perdiste”
}
setMensage(mensaje)
}

function setMensage(mensajeRes) {
let sectionMessage = document.getElementById(‘mensajes’)
let parrafo = document.createElement(‘p’)
parrafo.innerHTML = "tu mascota ataco con " + ataqueJug + ", la mascota del PC ataco con " + ataquePC + " " + mensajeRes
sectionMessage.appendChild(parrafo)
}

DEJO MI SOLUCION DE COMO PONER EL RESULTADO!!! 😁

Así lo llevo al momento, lo iré personalizando con el transcurso del curso le quiero poner mas poderes según sus personajes y animaciones.

Aui mi aporte con ataques combinados:

//CLAVE PARA GANAR:
//AGUA le gana al FUEGO
//TIERRA le gana al AGUA
//FUEGO le gana a la TIERRA


//variables de vidas
let vidasJugador1 = 3
let vidasJugador2 = 3


// Función para saber quién gana
    function compararAtaques(ataqueElegidoJugador1, ataqueElegidoJugador2) {
        let spanVidasJugador1 = document.getElementById('vidas-jugador1')
        let spanVidasJugador2 = document.getElementById('vidas-jugador2')

        if (vidasJugador1 > 0 && vidasJugador2 > 0) {
            // let spanVidasJugador1 = document.getElementById('vidas-jugador1')
            // let spanVidasJugador2 = document.getElementById('vidas-jugador2')
            //Cuando el jugador gana
            if((ataqueElegidoJugador1 == "AGUA" && ataqueElegidoJugador2 == "FUEGO")
                || (ataqueElegidoJugador1 == "TIERRA" && ataqueElegidoJugador2 == "AGUA")
                || (ataqueElegidoJugador1 == "FUEGO" && ataqueElegidoJugador2 == "TIERRA")) {

                vidasJugador2 = vidasJugador2 - 1
                spanVidasJugador2.innerHTML = vidasJugador2.toFixed(1)
                if (vidasJugador2 < 0) {
                    spanVidasJugador2.innerHTML = vidasJugador2 - vidasJugador2
                }
                console.log("JUADOR1 GANÓ",vidasJugador1, vidasJugador2)

            //Cuando el jugador empata
            } else if(ataqueJugador1 == ataqueJugador2) {

                vidasJugador1 = vidasJugador1 - 0.5
                spanVidasJugador1.innerHTML = vidasJugador1.toFixed(1)
                vidasJugador2 = vidasJugador2 - 0.5
                spanVidasJugador2.innerHTML = vidasJugador2.toFixed(1)

                if (vidasJugador1 < 0 || vidasJugador2 < 0) {
                    spanVidasJugador1.innerHTML = vidasJugador1 - vidasJugador1
                    spanVidasJugador2.innerHTML = vidasJugador2 - vidasJugador2
                }
                
                console.log("EMPATARON", vidasJugador1, vidasJugador2)
            
            //Cuando el jugador pierde
            } else {
                
                vidasJugador1 = vidasJugador1 - 1
                spanVidasJugador1.innerHTML = vidasJugador1.toFixed(1)

                if (vidasJugador1 < 0) {
                    spanVidasJugador1.innerHTML = vidasJugador1 - vidasJugador1
                }

                console.log("JUGADOR1 PERDIÓ", vidasJugador1, vidasJugador2)
            }
        } else if (vidasJugador1 < 0 || vidasJugador2 < 0) {
            spanVidasJugador1.innerHTML = vidasJugador1 - vidasJugador1
            spanVidasJugador2.innerHTML = vidasJugador2 - vidasJugador2

        }
    }

Yo lo resolví un poco diferente, pero funciona igual. Acá les comparto mi aporte (sólo puse las funciones implicadas):

let resultado //creo una variable global vacía

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

    if (ataqueAleatorio == 1) {
        ataqueEnemigo = 'FUEGO'
    }
    else if (ataqueAleatorio == 2) {
        ataqueEnemigo = 'AGUA'
    }
    else {
        ataqueEnemigo = 'TIERRA'
    }
    combate()
    //agrego acá la función combate para que modifique la variable resultado
    crearMensaje()
}

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

    if (ataqueAleatorio == 1) {
        ataqueEnemigo = 'FUEGO'
    }
    else if (ataqueAleatorio == 2) {
        ataqueEnemigo = 'AGUA'
    }
    else {
        ataqueEnemigo = 'TIERRA'
    }
    combate()
    //agrego acá la función combate para que modifique la variable resultado
    crearMensaje()
}

function crearMensaje() {
//condicional para obligar a usuario a elegir primero un mokepon
    if(mascotaSeleccionada) {
        let seccionMensaje = document.getElementById('mensajes')

        let parrafo = document.createElement("p")
        parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + ' - ' + resultado

        seccionMensaje.appendChild(parrafo)
        } else {
            alert('Selecciona primero un Mokepon')
        }
}

function combate() {
    if(ataqueJugador == ataqueEnemigo){
        resultado = 'EMPATE'
    } else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA' || ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' || ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA'){
        resultado = 'GANASTE! 🎉'
    }
    else{
        resultado = 'PERDISTE 😔'
    }
}

logré hacerlo antes de que Juan David Castro lo hiciera… Mi lógica funcionó 😊😊🙋‍♂️

y aqui dejo mi pequeño aporte ```js //variable global let ataqueJugador let randomAttack // Esperamos la carga de la página window.addEventListener("load", startGame) function startGame(){ // llamamos a los elementos del html let buttonSelectPetGammer = document.getElementById("button-select"); let buttonAttackPlayerFire = document.getElementById("button-fire"); let buttonAttackPlayerWater = document.getElementById("button-water"); let buttonAttackPlayerPlant = document.getElementById("button-plant"); let sectionMessage = document.getElementById("message") let newMessage = document.createElement("p") // Deshabilitamos la sección de ataque: let selectAtack = document.getElementById("select-atack").style.display = "none"; // eventos de escucha de los botones buttonSelectPetGammer.addEventListener("click", selectPetGammer) buttonAttackPlayerFire.addEventListener("click", fireAttack); buttonAttackPlayerWater.addEventListener("click", waterAttack); buttonAttackPlayerPlant.addEventListener("click", plantAttack); // Define la mascota enemiga según el número asignado function randomPetEnemy(numeroPet){ let resultado = ""; if(numeroPet ==1){ resultado = " Hipodoge " }else if(numeroPet ==2){ resultado = " Capipepo " }else if(numeroPet ==3){ resultado = " Ratigueya " }else{ alert("hay un problema con el numero aleatorio del enemigo") } return resultado } // Crea un número aleatorio en un rango determinado function aleatorio(min, max){ return Math.floor(Math.random()*(max-min+1)+min) } // Función para mostrar la elección del jugador y la mascota enemiga generada aleatoriamente function selectPetGammer(){ let petEnemy = aleatorio(1,3) let selectAtack = document.getElementById("select-atack"); let inputHipodoge = document.getElementById("hipodoge"); let inputCapipepo = document.getElementById("capipepo"); let inputRatigueya = document.getElementById("ratigueya"); let spanSelectPet = document.getElementById("selected-pet") let spanEnemyPet = document.getElementById("enemy-pet") // Verificamos la elección del jugador, la mascota aleatoria del enemigo y habilitamos la sección de ataque con las opciones elegidas por el jugador: if(inputHipodoge.checked == true){ selectAtack.style.display="block" spanSelectPet.innerHTML = " Hipodoge " spanEnemyPet.innerHTML = randomPetEnemy(petEnemy) }else if(inputCapipepo.checked == true){ selectAtack.style.display="block" spanSelectPet.innerHTML = " Capipepo " spanEnemyPet.innerHTML = randomPetEnemy(petEnemy) }else if(inputRatigueya.checked == true){ selectAtack.style.display="block" spanSelectPet.innerHTML = " Ratigueya " spanEnemyPet.innerHTML = randomPetEnemy(petEnemy) }else{ alert("debes seleccionar a alguien") } } // funcion de ataque de fuego function fireAttack(){ ataqueJugador = "Fire" enemyRandomAttack() crearMensaje() } // funcion de ataque de agua function waterAttack(){ ataqueJugador = "Water" enemyRandomAttack() crearMensaje() } // funcion de ataque de planta function plantAttack(){ ataqueJugador = "Plant" enemyRandomAttack() crearMensaje() } function enemyRandomAttack(){ ; let enemyAttack = aleatorio(1,3) if(enemyAttack ==1){ randomAttack = "Fire" }else if(enemyAttack ==2){ randomAttack = "Water" }else if(enemyAttack ==3){ randomAttack = "Plant" }else{ alert("hay un problema con el numero aleatorio del ataque enemigo") } return randomAttack } function crearMensaje(){ newMessage.innerHTML ="El jugador ataca con " + ataqueJugador + " El enemigo ataca con " + randomAttack+" " + combat(); sectionMessage.appendChild(newMessage) } function combat(){ let result = "" if(ataqueJugador==randomAttack){ result = "It's a Draw" }else if(ataqueJugador == "Fire" && randomAttack == "Plant"){ result = "You Are The Winner" }else if(ataqueJugador == "Water" && randomAttack == "Fire"){ result = "You Are The Winner" }else if(ataqueJugador == "Plant" && randomAttack == "Water"){ result = "You Are The Winner" }else{ result = "You Lost" } return result } } ```
pues, asi va quedando mi BATALLA DE AVATARES, debo decir que, es muy entretenido cambiar el código que dice el profe para implementar el de uno, esto mas divertido el reto. así se ve en el navegador.👇 ![](https://static.platzi.com/media/user_upload/duelo%20-3a6dbb7a-65a4-47bd-9e66-6d061708b7d0.jpg)

Ahora con la logica que llevamos solo debemos mostrar por medio de un mensaje al usuario si ganó, empató o perdió

Para ello se implementará un código similar al del juego de piedra papel o tijera para poder definir el estado del jugador

function combate(){
    let estado;
    if (ataqueJugador == ataqueEnemigo) {
        estado = "EMPATE";
    }else if (ataqueJugador == "FUEGO"  && ataqueEnemigo == "TIERRA") {
        estado = "GANASTE";
    }else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" ){
        estado = "GANASTE";
    }else if(ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        estado = "GANASTE";
    }else{
        estado = "PERDISTE";
    }
    crearMensaje(estado);
}

Con esto ya estamos del otro lado

Mi solución fue crear una variable global “resultadoCombate”, usé la misma logica para el combate y al final en el mensaje concatené la variable “resultadoCombate”

function combate(){
    if (ataqueJugador=="FUEGO" && ataqueEnemigo=="TIERRA" || ataqueJugador=="TIERRA" && ataqueEnemigo=="AGUA" || ataqueJugador=="AGUA" && ataqueEnemigo=="FUEGO"){
        resultadoCombate = "Ganaste!! 🎉"

    } else if(ataqueJugador==ataqueEnemigo){
        resultadoCombate = "Empate"

    } else {
        resultadoCombate= "Perdiste!!"
    }
}

Les comparto mi código

function combate(){
    if ( ataqueJugador == ataqueEnemigo ){
        crearMensaje("𝐄𝐌𝐏𝐀𝐓𝐄");
    }   
    else if( (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') ||
    ( ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') ||
    ( ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA')){
        crearMensaje("✧ 𝐆𝐀𝐍𝐀𝐒𝐓𝐄 ✧");
    }
    else{
        crearMensaje(" ☠ 𝐏𝐄𝐑𝐃𝐈𝐒𝐓𝐄 ☠ ");
        }
}

function crearMensaje(resultado){
    let section_mensaje = document.getElementById('mensajes');
    let parrafo = document.createElement('p');
    parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " ⇢" + resultado;
    section_mensaje.appendChild(parrafo);
}

el fuego le gana a la planta pero no a la tierra, la tierra le gana al fuego. buen video profe !

Que emocion ver que todo funciona.

Yo no creé ninguna función nueva. yo solo hice lo siguiente:

<code> 
function crearMensaje() {
	let seccionMensajes = document.getElementById('Mensajes')

    let parrafo = document.createElement('p')

    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo

    if(ataqueJugador == ataqueEnemigo) {
        parrafo.innerHTML += ' - EMPATE 🫥'
    } else if((ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") || (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") || (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA")) {
        parrafo.innerHTML += ' - GANASTE 🎉'
    } else {
        parrafo.innerHTML += ' - PERDISTE 😞'
    }

    seccionMensajes.appendChild(parrafo)
}

Solo con unas pocas condiciones y aritmética de strings básica ubicadas antes del appendChild se junta todo. y en caso de que fuese difícil de entender con simples comentarios se aclara el contexto =)

En mi caso lo resolvi de la siguiente manera, aplicando lo aprendido hasta aqui

  1. He creado una variable global llamada resultado
  2. Creé una función llamada resultadoJuego() y alli meti la logica de programación, utilizando las variables globales, aqui debo devolver el valor de variable resultado con return al final

    3.Finalmente lo concatene al mensaje llamando a mi función resultadoJuego()

asi solucione del ataque

Amigos! Después de dos horas escribiendo y borrando puede hacer que me funcionara el juego 😄

![](url )
![](url )

si en la funcion combate creo una variable resultado y la retorno, puedo llamar a la funcion combate en la funcion crearMensaje concatenandola al final asi= parrafo.innerHTML='tu mascota ataco con '+ataqueJugador+' , la mascota del enemigo ataco con '+ataqueEnemigo+combate() Mi pc se descompuso no lo puedo probar pero dejo aqui mi aporte.
lo que yo realice fue crear dos funciones más, con el nombre de crearMensajeEmpate() y crearMensajePerder() cambiando solo el último valor dependiendo del caso y llamando esas funciones en cada else if correspondiente copiar y pegar y listo 👍

mi codigo varió un poco, porque puse una variable global llamada “resultado”, así poder usarla cuando la necesite

let ataqueJugador
let ataqueEnemigo
let resultado

function iniciarJuego (){
    let botonMascotaJuagador = document.getElementById('boton-mascota')
    let botonFuego = document.getElementById('boton-fuego')
    let botonAgua = document.getElementById('boton-agua')
    let botonTierra = document.getElementById('boton-tierra')
    


    botonMascotaJuagador.addEventListener('click', seleccionarMascotaJugador)
    botonFuego.addEventListener('click', ataqueFuego)
    botonAgua.addEventListener('click', ataqueAgua)
    botonTierra.addEventListener('click', ataqueTierra)
    
}

function seleccionarMascotaJugador(){

    let inputhipodoge = document.getElementById('hipodoge')
    let inputcapipepo = document.getElementById('capipepo')
    let inputratigueya = document.getElementById('ratigueya')
    let inputlangostelvis = document.getElementById('langostelvis')
    let inputtucapalma = document.getElementById('tucapalma')
    let inputpydos = document.getElementById('pydos')
    let spanMascotaJugador = document.getElementById('mascota-jugador')


    if (inputhipodoge.checked) {
        spanMascotaJugador.innerHTML = 'Hipodoge'
        //alert("has seleccionado Hipodoge")

    }   else if (inputcapipepo.checked) {
        spanMascotaJugador.innerHTML = 'Capipepo'
        //alert("has seleccionado Capipepo")

    }   else if (inputratigueya.checked) {
        spanMascotaJugador.innerHTML = 'Ratigueya'
        //alert("has seleccionado Ratigueya")

    }   else if (inputlangostelvis.checked) {
        spanMascotaJugador.innerHTML = 'Langostelvis'
        //alert("has seleccionado Langostelvis")

    }   else if (inputtucapalma.checked) {
        spanMascotaJugador.innerHTML = 'Tucapalma'
        //alert("has seleccionado Tucapalma")

    }   else if (inputpydos.checked) {
        spanMascotaJugador.innerHTML = 'Pyros'
        //alert("has seleccionado Pyros")

    }   else {
        alert ("debes seleccionar un mokepon")
    } 
    seleccionarMascotaEnemiga()

} 
function seleccionarMascotaEnemiga(){
   let mascotaAleatoria = aleatorio(1,6)
   let spanMascotaEnemiga = document.getElementById('mascota-enemiga')

    if (mascotaAleatoria == 1) {
        spanMascotaEnemiga.innerHTML = 'Hipodoge'
    }   else if (mascotaAleatoria == 2) {

        spanMascotaEnemiga.innerHTML = 'Capipepo'
    }   else if (mascotaAleatoria == 3) {

        spanMascotaEnemiga.innerHTML = 'Ratigueya'
    }   else if (mascotaAleatoria == 4) {

        spanMascotaEnemiga.innerHTML = 'Langostelvis'
    }   else if (mascotaAleatoria == 5) {

        spanMascotaEnemiga.innerHTML = 'Tucapalma'
    }   else {

        spanMascotaEnemiga.innerHTML = 'Pyros'
    }
}

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 ()
    crearMensaje ()
    

}

function crearMensaje () {
    
    let seccionMensajes = document.getElementById ('mensajes')
    let parrafo = document.createElement ('p')
    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' , la mascota enemiga atacó con ' + ataqueEnemigo + ", " + resultado

    seccionMensajes.appendChild (parrafo)
    
}

function combate () {
    if ( ataqueJugador == ataqueEnemigo) {
    resultado = 'EMPATE'
    } else if (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') {
        resultado = 'GANASTE'

    }else if (ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
        resultado = 'GANASTE'

    }else if (ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
        resultado = 'GANASTE'
    } else{
        resultado = 'PERDISTE'
    }
}

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


Use una variable global llamada v_resultado donde guardaba el resultado de la batalla y de hay concatenaba el texto en el parrafo creado

Logré hacerlo creando una nueva variable global (resultado), y cree una función (batalla) similar al piedra, papel, tijera, donde resultado era EMPATE, GANASTE o PERDISTE, luego llame a la nueva función antes antes de la función crearMensaje.

let ataqueJugador
let ataqueEnemigo
let resultado

function iniciarJuego () {
    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 botonTierra = document.getElementById('boton-tierra')
    botonTierra.addEventListener('click', ataqueTierra)
}

function seleccionarMascotaJugador () {
    
    let hipogue = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('capipepo').checked
    let ratigueya = document.getElementById('ratigueya').checked
    let spamJugador = document.getElementById('mascota-jugador')

    if (hipogue == true) {
        spamJugador.innerHTML = 'Hipodogue'
    } else if (capipepo == true) {
        spamJugador.innerHTML = 'Capipepo'
    } else if (ratigueya == true) {
        spamJugador.innerHTML = 'Ratigueya'
    } else  {
        alert ("Seleciona a una mascota") 
    }  
    
    seleccionarMascotaEnemigo ()
}

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

function seleccionarMascotaEnemigo () {
    let mascotaAleatorio = aleatorio (1, 3)
    let spamEnemigo = document.getElementById('mascota-enemigo')

    if ( mascotaAleatorio == 1){
        spamEnemigo.innerHTML = 'Hipodogue'
    } else if (mascotaAleatorio == 2){
        spamEnemigo.innerHTML = 'Capipepo'
    } else {
        spamEnemigo.innerHTML = 'Ratigueya'
    }

}

function ataqueFuego () {
    ataqueJugador = "FUEGO"
    ataqueAleatorioEnemigo ()
}

function ataqueAgua () {
    ataqueJugador = "AGUA"
    ataqueAleatorioEnemigo ()
}

function ataqueTierra () {
    ataqueJugador = "TIERRA"
    ataqueAleatorioEnemigo ()
}

function ataqueAleatorioEnemigo (){
    let numAleatorio = aleatorio(1, 3)
    if ( numAleatorio == 1){
        ataqueEnemigo = "FUEGO"
    } else if ( numAleatorio == 2){
        ataqueEnemigo = "AGUA"
    } else if ( numAleatorio == 3){
        ataqueEnemigo = "TIERRA"
    }

    batalla ()

    crearMensaje ()
}


function batalla (){   
    if (ataqueJugador == ataqueEnemigo){
        resultado = "EMPATE"
    } else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
        resultado = "GANASTE"
    } else if (ataqueJugador == "AGURA" && ataqueEnemigo == "FUEGO"){
        resultado = "GANASTE"
    } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        resultado = "GANASTE"
    } else {
        resultado = "PERDISTE"
    }
}

function crearMensaje () {
    let seccionMensajes= document.getElementById('mensajes')

    let parrafo = document.createElement('p')
    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ',  la mascota del enemigo atacó con ' + ataqueEnemigo + " " + resultado

    seccionMensajes.appendChild(parrafo)
}

window.addEventListener('load',iniciarJuego)

Hola gente…
Lo que hice fue, crear una variable global y en la función combate asignarle a la variable el valor de “empate”, “ganaste” o “perdiste” y después solo concatenarla en la función crear mensaje.

El resultado del combate lo resolví creado secciones y dejándole el display apagado y según la validación, mostré la sección de mensaje que dice que gane, perdí o empate

Yo en vez de pasarle como argumento el resultado del combate a la funcion crearMensajes, cree una variable global donde almacene el resultado ![](https://static.platzi.com/media/user_upload/carbon%20%281%29-c1551609-b3e7-4608-a6cc-c08b1438cc61.jpg)
primero agrege una nueva variable let ganador: ![](https://static.platzi.com/media/user_upload/image-8a142b3f-2c0d-4c3c-b92e-03f0b14c4019.jpg) luego guarde los resultados en esa variable let ganador y lo agrege en la funcion crear mensaje : ![](https://static.platzi.com/media/user_upload/image-3515b32b-1656-4f0c-a3c6-95d34442b042.jpg)
Código largo al principio pero luego vas aprendiendo a simplificarlo con otros métodos más eficientes, lo importante es entender la lógica y ser capaz de resolver el problema.![](https://static.platzi.com/media/user_upload/Resultado-Batalla-Mokepones-f95d2f33-8c6f-4b98-8b9c-87d2e36a731b.jpg)
ganeee

Yo declare una nueva variable global llamada “resultado” que utilice en la función “combate()” para asignarle los siguientes valores:
" - EMPATE."
" - GANASTE. “
” - PERDISTE."
Dependiendo de el resultado de las comparaciones. Dentro de la función “combate” mande llamar la función “crearMensaje(resultado)” pasando le como parámetro la variable “resultado”.

function crearMensaje(resultado){
    let sctMensajes = document.getElementById("mensajes");
    let parrafo = document.createElement("p");

    parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " " + resultado;
    sctMensajes.appendChild(parrafo);
}

function combate(){

    if(ataqueJugador == ataqueEnemigo){
        resultado = " - EMPATE."
    } else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
        resultado = " - GANASTE. 🏆"
    } else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
        resultado = " - GANASTE. 🏆"
    } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        resultado = " - GANASTE. 🏆"
    } else {
        resultado = " - PERDISTE. 😕"
    }

    crearMensaje(resultado);
}

**Logré el mismo resultado con una variación. **
En vez de usar resultado como un parámetro, lo dejé como una variable para if, y dejé hasta el final la función de crear mensaje, ya que cualquier opción que elijan se convertirá en un mensaje! Alguien más lo hizo así o saben las complicaciones que puede tener a futuro hacerlo de esta manera?

function combate() {
    if(ataqueJugador == ataqueEnemigo) {
        resultadoCombate = "EMPATE"
    } else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") {
        resultadoCombate = "VICTORIA"
    } else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") {
        resultadoCombate = "VICTORIA"
    } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
        resultadoCombate = "VICTORIA"
    } else {
        resultadoCombate = "DERROTA"
    }
    crearMensaje()
}


Hice unos textos para hacerles saber a los jugadores cuales son los PROS y CONTRAS de los poderes

function combate() {
    let resultadoAtaque

    if ( ataqueEnemigo == ataqueJugador ) {
        alert( "¡EMPATE! 🤼" )
        resultadoAtaque = 'EMPATE'
    }
    else if ((ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') || ( ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' ) || ( ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA' )){
        alert( "¡GANASTE! 🥳"  )
        resultadoAtaque = 'GANASTE'
    }
    else {
        alert( "PERDISTE... 😢" )
        resultadoAtaque = 'PERDISTE'
    }
    crearMensaje(resultadoAtaque)
}

function crearMensaje(resultadoAtaque) {
    let sectionMensajes = document.getElementById('mensajes')

    let parrafo = document.createElement('p')
    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' la mascota del enemigo atacó con ' + ataqueEnemigo + ' - ' + resultadoAtaque

    sectionMensajes.appendChild(parrafo)
}

Una alternativa mas básica supongo… no entendí lo de la variable resultado dentro de los paréntesis de la función :S

let ataqueJugador 
let ataqueEnemigo
let resultadoCombate

function iniciarJuego(){
    //boton Seleccionar Mascota
    let botonMascotaJugador = document.getElementById('boton-mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)

    //Botones de Ataque
    let botonFuego = document.getElementById('boton-fuego')
    botonFuego.addEventListener('click', ataqueFuego)

    let botonAgua = document.getElementById('boton-agua')
    botonAgua.addEventListener('click', ataqueAgua)

    let botonTierra = document.getElementById('boton-tierra')
    botonTierra.addEventListener('click', ataqueTierra)

}

function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById('hipodoge')
    let inputCapipepo = document.getElementById('capipepo')
    let inputRatigueya = document.getElementById('ratigueya')
    let spanMascotaJugador = document.getElementById('mascota-jugador')

    if (inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = 'Hipodoge' 
    } else if (inputCapipepo.checked){
        spanMascotaJugador.innerHTML = 'Capipepo'
    } else if (inputRatigueya.checked){
        spanMascotaJugador.innerHTML = 'Ratigueya'
    } else {
        alert("Selecciona una de las mascotas disponibles")
    }

    seleccionarMascotaEnemigo()
    
}

function seleccionarMascotaEnemigo(){
    let mascotaEnemigo = aleatorio(1,3)
    let spanMascotaJugador = document.getElementById('mascota-enemigo')

    if (mascotaEnemigo == 1) {
        spanMascotaJugador.innerHTML = "Hipodoge"
    } else if (mascotaEnemigo == 2) {
        spanMascotaJugador.innerHTML = "Capipepo"
    } else {
        spanMascotaJugador.innerHTML = "Ratigueya"
    }
}

function crearMensaje() {
    let sectionMensajes = document.getElementById('mensajes')

    let parrafo = document.createElement('p')
    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + '. ' + resultadoCombate

    sectionMensajes.appendChild(parrafo)
}

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

function ataqueFuego(){
    ataqueJugador='FUEGO'
    ataqueAleatorioEnemigo()
}

function ataqueAgua(){
    ataqueJugador='AGUA'
    ataqueAleatorioEnemigo()
}

function ataqueTierra(){
    ataqueJugador='TIERRA'
    ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo(){
    ataqueEnemigo = aleatorio(1,3)
// 1 es Fuego // 2 es Agua // 3 es Tierra
    if (ataqueEnemigo == 1){
        ataqueEnemigo = 'FUEGO'
    } else if (ataqueEnemigo == 2){
        ataqueEnemigo = 'AGUA'
    } else {
        ataqueEnemigo = 'TIERRA'
    }
    combate()
}

function combate(){
    if (ataqueJugador == ataqueEnemigo){
        resultadoCombate = 'EMPATE!'
    } else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA' 
        || ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' 
        || ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
        resultadoCombate = 'GANASTE!'
    } else {
        resultadoCombate = 'PERDISTE!'
    }
    crearMensaje()
}


window.addEventListener('load', iniciarJuego)```

Mi logica para resolverlo fue un poco diferente, yo primero cree una variable general llamada “resultadoCombate”;

let resultadoCombate 

luego creé una función llamada “combate” en la que puse todos los condicionales

function combate () {
    if (ataqueJugador == ataqueEnemigo) {
        resultadoCombate = '¡Empate!😑'
    } else if (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') {
        resultadoCombate = '¡GANASTE!🥳'
    } else if (ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
        resultadoCombate = '¡GANASTE!🥳'
    }  else if (ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
        resultadoCombate = '¡GANASTE!🥳'
    }   else {
        resultadoCombate = '¡PERDISTE!😩'
    }

luego modifique el parrafo creado en la función “crearMensaje”, en la parte final del parrafo para que en el innerHTML se mostrará la variable “ResultadoCombate”

parrafo.innerHTML = 'Tu mascota uso '+ ataqueJugador + ', tu oponente uso ' + ataqueEnemigo + '- ' + resultadoCombate

y por ultimo llame a la función “combate” justo antes de llamar a la función “crearMensaje” que esta dentro de la función “ataqueAleatorioEnemigo”

function ataqueAleatorioEnemigo () {
    let ataqueAleatorio = aleatorio (1,3)
    if (ataqueAleatorio == 1) {
        ataqueEnemigo = "FUEGO"
    } else if (ataqueAleatorio == 2) {
        ataqueEnemigo = "AGUA"
    }  else {
        ataqueEnemigo = "TIERRA"
    }
    combate ()
    crearMensaje ()
}

Este código es de ejemplo ya que mi juego cuenta con otras reglas, ataque y personajes, espero que les sirva para expandir ideas

para solucionar el problema de mostrar en el mensaje el resultado de la batalla declare una variable global llamada result en la cual guarde el resultado del combate y luego concatene con el mensaje a mostrar

no se si ya alguien comento de este comando, pero para cambiar la misma palabra al tiempo, puedes sombrearla y con control + D te permite seleccionar todas las palabras que necesites.

Comparto mi solucion:

let combateResultado = '';

function combate() {
    if(ataqueJugador == ataqueEnemigo) {
        combateResultado = 'Empataste!';
    } else if (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA' || ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' || ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
        combateResultado = 'Ganaste!';
    } else {
        combateResultado = 'Perdiste!';
    }
}

estas equibocado en algo ya que en pokemon el tipo tierra es debil al agua y eficas contra el fuego y ademas en la vida real susede lo mismo, se puede apagar el fuego con la tierra y la tierra se desase cuando hay una cantidad considerable de agua.
corige eso mi bro

yo en vez de appendChild, innerHTML y createElement, he usado insertAdjacentHTML. Este método inserta y crea, a la vez, un elemento HTML. Además de que he podido añadir etiquetas: <br> y <strong>

//html: <section><p id="mensajes"></p></section>
function crearMensaje(resultado) {
    let elMensaje = document.getElementById("mensajes")
    
    elMensaje.insertAdjacentHTML('afterbegin', "Tu monttil atacó con " + ataqueJugador + ", el monttil de tu enemigo atacó con " + ataqueEnemigo + '<br/><strong>'  + resultado, ' </strong>')
}

yo solo quiero expresar mi humilde opinion. La TIERRA no le gana al AGUA 😦

yo lo resolví así, con una variable global y funciona bien!

Yo en vez de crear un sistema de 3 vidas como el de la clase de piedra, papel y tijera, cree un sistema de puntos de vida que las mascotas van perdiendo hasta llegar a 0 y cada ataque representa una cantidad de daño(mas parecido al sistema de peleas de pokemon)

lo hice aplicando los conocimientos que han mostrado en las clases, estoooy 100% seguro que abra una manera de ejecutar las mismas acciones con un codigo mas limpio y compacto pero de momento desconozco cual pueda ser esa solucion, pero me siento muy contento por que desde que empezo la clase no quise simplemente copiar y pegar, quise ir tomando esos conocimientos que muestran en la clase y tratar de utilizarlos para plasmar una idea que me surgiera en la mente y siento que eso es el principio de ser progamador.

así hice mi código

let resultado 
function  resultadoCombate(){
     
    if (ataqueJugador == ataqueEnemigo){
        resultado = "EMPATE"
    }else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "AGUA" || ataqueJugador == "AGUA" && ataqueEnemigo == "TIERRA" || ataqueJugador == "TIERRA" && ataqueEnemigo == "FUEGO" ){
        resultado = "🎉GANASTE"
    }else {
        resultado = "😢PERDISTE"
    } 
    return resultado
}

Lo que hice fue en donde se envía el mensaje poner las condicionales y si se gano perdió o empato es una misma variable que es mostrada en mensaje, se llama win

Lo resolví de esta manera:

let resultadoCombate

function ataqueAleatorioEnemigo(){
    let ataqueAleatorio = aleatorio(1, 3) 
    
    if (ataqueAleatorio == 1){
        ataqueEnemigo = "FUEGO"
    } else if(ataqueAleatorio == 2){
        ataqueEnemigo = "AGUA"
    } else { 
        ataqueEnemigo = "TIERRA"
    }

    batalla()
    crearMensaje()
}
function batalla(){
    if(ataqueJugador == ataqueEnemigo){
        resultadoCombate = "EMPATE"
    } else if(ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA" || ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" || ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        resultadoCombate = "GANASTE"
    } else { 
        resultadoCombate = "PERDISTE"
    }
}




function crearMensaje(){
    let sectionMensajes = document.getElementById("mensajes")// esto lo creé luego que lo que está abajo, para usarlo con appendchild y mostrar el mensaje el el párrafo
    let parrafo = document.createElement("p")//con este elemento podemos cambiar un parrafo en html
    parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " - " + resultadoCombate

    sectionMensajes.appendChild(parrafo)

}

me parece mejor colocar en global el (resultado de batalla) para ver el tema de las vidas.

function combate() {
        
    if(ataqueEnemigo == ataqueJugador){
        resultadoBatalla = "EMPATE"
    } else if(ataqueJugador == "Fuego" && ataqueEnemigo == "Agua"){
        resultadoBatalla = "GANASTE"
        
    } else if(ataqueJugador == "Agua" && ataqueEnemigo == "Fuego"){
        resultadoBatalla = "GANASTE"
    
    } else if(ataqueJugador == "Tierra" && ataqueEnemigo == "Agua"){
        resultadoBatalla = "GANASTE"
        
    } else {
        resultadoBatalla = "PERDISTE"
    }
    crearMensaje()
}


Este brother se rifa bien duro ¡felicidades! 🙌🏻

Yo cree otra funcion dentro de la funcion combate (game) para que mostrara un resultado aleatorio en caso de que el elmento que elegi se enfrente a otro elemento al cual no tengo determinado si gana o no.

function game () {
    
    function randomResult () {
        let randomResolution = random (1,2)
        if (randomResolution == 1) {
            return 'You win!'
        } else {
            return 'You lose!'
        }
    }
    if (pcMove == playerMove) {
        popUp('Draw')
    } else if (playerMove == 'WIND' && pcMove == 'WATER') {
        popUp('You win!')
    } else if (playerMove == 'WATER' && pcMove == 'FIRE') {
        popUp('You win!')
    } else if (playerMove == 'EARTH' && pcMove == 'WIND') {
        popUp('You win!')
    } else if (playerMove == 'FIRE' && pcMove == 'EARTH') {
        popUp('You win!')
    } else {
        popUp(randomResult())
    }

}

yo declare una variable global let resultadoCombate; y asigne el valor para cada caso y el mensaje se lo añadi por medio de la variable

Primero cree una variable global y la llame:

let resultadoAtaque

Luego cambie cada alert por esta funcion.

function combate(){
  if(ataqueEnemigo == ataqueJugador) {
    
} else if(ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
    resultadoAtaque = "GANASTE"
    crearMensaje()
    
} else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
  resultadoAtaque = "GANASTE"
  crearMensaje()
    
} else if(ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
  resultadoAtaque = "GANASTE"
  crearMensaje()
}
  else {
    resultadoAtaque = "PERDISTE"
    crearMensaje()
}

Y la concatene en la funcion crear mensaje,

function crearMensaje(){
  let sectionMensajes = document.getElementById("mensajes")
  let parrafo = document.createElement("p")
  parrafo.innerHTML = "Tu mascota ataco con " + ataqueJugador + ", la mascota del enemigo ataco con " + ataqueEnemigo + " >>>> " + resultadoAtaque

  sectionMensajes.appendChild(parrafo)
}
 

En mi intento de resolver solo (No me funcionó xD), lo hice así:

function combate(){
        if(ataqueEnemigo == ataqueJugador){
            crearMensaje('EMPATE')
            } else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA'){
            crearMensaje('GANASTE')
            } else if(ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO'){
            crearMensaje('GANASTE')
            } else if(ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA'){
            crearMensaje('GANASTE')
            } else {
            crearMensaje('PERDISTE')
                }
}


function crearMensaje(){
    let sectionMensajes = document.getElementById('mensajes')
    let parrafo = document.createElement('p')
    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' la mascota del enemigo atacó con '  + ataqueEnemigo +' = ' + combate
    sectionMensajes.appendChild(parrafo)```

un comando importante para cambiar todo de una sola vez en vez de hacerlo uno por uno es Ctrl + D y darle a la D las veces que necesitas cambiar y listo, borras y escribes y es mas practico.

Mi solución fue crear una variable global llamada resultadoCombate y esta variable cambiaba en la función combate() según la lógica, luego mandaba a llamar a función crearMensaje y le concatenaba la variable resultadoCombate

let roundResult
function combat() {

    if (playerAttack == rivalAttack) {
        roundResult = "EMPATE"
        createMessage()
    } else if (playerAttack == fire && rivalAttack == earth || playerAttack == water && rivalAttack == fire || playerAttack == earth && rivalAttack == water) {
        roundResult = "GANASTE"
        createMessage()
    } else {
        roundResult = "PERDISTE"
        createMessage()   
    }
Mi solución...

}

function createMessage() {
    let sectionMessages = document.getElementById("mensajes")

    let attacksParagraph = document.createElement("p")
    attacksParagraph.innerHTML = "Tú mascota atacó con " + playerAttack + " La mascota rival atacó con " + rivalAttack + " ..." + roundResult

    sectionMessages.appendChild(attacksParagraph)
}

Si pero note que no para, no tiene un stop y ainque no es un loop el combate que es de 3 vidas no se detiene en 3 perdidas,

lo que hice fue crear una variable global y luego concatenarla en la función crearMensaje y me funcionó!
La verdad que me puso muy contento poder hacerlo ya que aún no vi la solución del profe.
Me emocionó mucho porque es la primera vez que pude solucionarlo solo.

Así va mi código
.
.
.

let ataqueJugador;
let ataquePc;

function iniciarJuego() {

let botonMascotaJugador = document.getElementById('boton-mascotas')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)

let botonAtaqueFuego = document.getElementById('boton-fuego')
botonAtaqueFuego.addEventListener('click', ataqueFuego)

let botonAtaqueAgua = document.getElementById('boton-agua');
botonAtaqueAgua.addEventListener('click', ataqueAgua)

let botonAtaqueTierra = document.getElementById('boton-tierra');
botonAtaqueTierra.addEventListener('click', ataqueTierra)

}

function seleccionarMascotaJugador() {

let mascotaHipo = document.getElementById('hipodoge')
let mascotaCapi = document.getElementById('capipepo')
let mascotaRati = document.getElementById('ratigueya')
let spanMascotaJugador = document.getElementById('spanNombreMascota')
let aux1 = 0;

if (mascotaHipo.checked) {
    //alert("Seleccionaste la Mascota Hipodoge 🐗")
    spanMascotaJugador.innerHTML = 'Hipodoge'
    aux1 = 1;

} else if (mascotaCapi.checked) {
    //alert("Seleccionaste la Mascota Capipepo 🐦")
    spanMascotaJugador.innerHTML = 'Capipepo'
    aux1 = 2;
} else if (mascotaRati.checked) {
    //alert("Seleccionaste la Mascota Ratigueya 🐹")
    spanMascotaJugador.innerHTML = 'Ratigueya'
    aux1 = 3
} else {
    alert("Debes seleccionar una mascota 🐗, 🐦 ó 🐹")
}
seleccionarMascotaPc(aux1);
//alert("Seleccionaste la Mascota 👋")

}

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

function seleccionarMascotaPc(aux) {
let seleccion = 0;
do {
seleccion = random(1, 3);
} while (seleccion == aux)

let spanMascotaPc = document.getElementById('spanMascotaPc')
if (seleccion == 1) {
    aux = 1;
    spanMascotaPc.innerHTML = 'Hipodoge'

} else if (seleccion == 2) {
    aux = 2;
    spanMascotaPc.innerHTML = 'Capipepo'
} else if (seleccion == 3) {
    aux = 3;
    spanMascotaPc.innerHTML = 'Ratigueya'
}

return seleccion;

}

function seleccionarAtaquePc(aux) {
let seleccion = 0;
ataquePc = “”;

seleccion = random(1, 3);

if (seleccion == 1) {
    aux = 1;
    //alert("El Pc Seleccionó Fuego")
    ataquePc = "Fuego"

} else if (seleccion == 2) {
    aux = 2;
    //alert("El Pc Seleccionó Agua")
    ataquePc = "Agua"
} else {
    aux = 3;
    //alert("El Pc Seleccionó Tierra")
    ataquePc = "Tierra"
}

mensajeResultado();

}

function mensajeResultado() {

let texto1 = resultado(ataqueJugador, ataquePc);

let parrafo = document.createElement('p');
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' y el PC atacó con ' + ataquePc + '. ' + texto1;

let seccionMensajes = document.getElementById('mensajes');
seccionMensajes.appendChild(parrafo);

}

function ataqueFuego() {
let aux = 0;

//alert("Atacas con Fuego");
ataqueJugador = "Fuego";
aux = 1;
seleccionarAtaquePc(aux);

}

function ataqueAgua() {
let aux = 0;
//alert(“Atacas con Agua”);
ataqueJugador = “Agua”;
aux = 2;
seleccionarAtaquePc(aux);

}

function ataqueTierra() {
let aux = 0;
//alert(“Atacas con Tierra”);
ataqueJugador = “Tierra”;
aux = 1;
seleccionarAtaquePc(aux);

}

function resultado(opcionUsuario, opcionPc) {
let pc = opcionPc;
let opcion = opcionUsuario;
let ganador = “”;

if (pc == opcion) {
    ganador = 'Empataron 🙌🏼';
} else if ((opcion == 'Fuego') && (pc == 'Tierra')) {
    ganador = '🎉Ganaste 💪👏💥';
} else if ((opcion == 'Tierra') && ((pc == 'Agua'))) {
    ganador = '🎉Ganaste 💪👏💥';
} else if ((opcion == 'Agua') && ((pc == 'Fuego'))) {
    ganador = '🎉Ganaste 💪👏💥';
} else {
    ganador = 'Perdiste 😕👌🏼';
}

return ganador;

}

window.addEventListener(‘load’, iniciarJuego)

Acá les dejo mi aporte. Tiene algunas cositas en Ingles pero se entiende.

function combat() {

    if ((playerAttack == 'Fire' && enemysAttack == 'Earth') || (playerAttack == 'Water' && enemysAttack == 'Fire') || (playerAttack == 'Earth' && enemysAttack == 'Water')) {
        result = '¡¡¡Ganaste!!! 💥🎉'
        wons++
    } else if (playerAttack == enemysAttack) {
        result = '¡Empate! 🙈'
    } else {
        result = 'Perdiste 🙀'
        lose++
    }
    
}

function createMessage() {
    let sectionMessages = document.getElementById('messages')
        
    let paragraph = document.createElement('p')
    paragraph.innerHTML = `Tu Pokemon atacó con ${playerAttack}, el Pokemon de tu enemigo ataco con ${enemysAttack} - ${result}`
    
    sectionMessages.appendChild(paragraph)
}

Yo lo hice distinto al profe Juan. Creé una variable global para resultado y le cambié el valor en la función combate

function combate() {
    if (ataqueEnemigo == ataqueJugador) {
        resultado = 'Empate 🤜🤛'
        crearMensaje()

    } else if (ataqueJugador == 'Fuego' && ataqueEnemigo == 'Tierra') {
        resultado = 'GANASTE 🎉'
        crearMensaje()

    } else if (ataqueJugador == 'Agua' && ataqueEnemigo == 'Fuego') {
        resultado = 'GANASTE 🎉'
        crearMensaje()

    } else if (ataqueJugador == 'Tierra' && ataqueEnemigo == 'Agua') {
        resultado = 'GANASTE 🎉'
        crearMensaje()

    } else {
        resultado = 'Perdiste 😥'
        crearMensaje()
    }
}

creo que afecta si las variables no las pones con. mayusculas o minusculas, porque o pierdo siempre o empato…

CÓDIGO CORREGIDO.

  1. Poner atención a las “” o ‘’
  2. Poner atención a invocar a las variables o funciones correctas, te puedes confundir con tanta syntaxis

interesante clase, para los que ya sabian programar, les propongo resolver o adenlantandose a la clase,haciendo el codigo antes de que el profe lo haga

Una alternativa, a concatenar todas las cadenas + cada una de las variables, seria esta:

parrafo.innerHTML = `Tu mascota ataco con ${ataqueJugador} la mascota del enemigo ataco con ${ataqueEnemigo}...${resultado}`

yo hice la respuesta con este codigo

let ataqueJugador
let ataqueEnemigo
let resultado

function iniciarJuego() {
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 botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)

}

function seleccionarMascotaJugador() {
let inputHipodoge = document.getElementById(‘hipodoge’)
let inputCapipepo = document.getElementById(‘capipepo’)
let inputRatigueya = document.getElementById(‘ratigueya’)
let spanMascotaJugador = document.getElementById(‘mascota-jugador’)

if (inputHipodoge.checked) {
    spanMascotaJugador.innerHTML = 'Hipodoge'
} else if (inputCapipepo.checked) {
    spanMascotaJugador.innerHTML = 'Capipepo'
} else if (inputRatigueya.checked) {
    spanMascotaJugador.innerHTML = 'Ratigueya'
} else {
    alert('Selecciona una mascota')
}

seleccionarMascotaEnemigo()

}
function combate () { if(ataqueEnemigo == ataqueJugador) {alert(“acabo en empate”)
resultado = " empate"}
else if(ataqueJugador == ‘TIERRA’ && ataqueEnemigo == ‘AGUA’) {alert(“ganaste”)
resultado = " ganaste"}
else if(ataqueJugador == ‘FUEGO’ && ataqueEnemigo == ‘TIERRA’) {alert(“ganaste”)
resultado = " ganaste"
}
else if(ataqueJugador ==‘AGUA’ && ataqueEnemigo == ‘FUEGO’) {alert(“ganaste”)
resultado = " ganaste"
}else
{alert(" perdiste")
resultado = " PERDISTE"}
crearMensaje()}

function seleccionarMascotaEnemigo() {
let mascotaAleatoria = aleatorio(1,3)
let spanMascotaEnemigo = document.getElementById(‘mascota-enemigo’)

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

}

function ataqueFuego() {
ataqueJugador = 'FUEGO’
alert(ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueAgua() {
ataqueJugador = 'AGUA’
alert(ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueTierra() {
ataqueJugador = 'TIERRA’
alert(ataqueJugador)
ataqueAleatorioEnemigo()
}

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

if (ataqueAleatorio == 1) {
    ataqueEnemigo = 'FUEGO'
} else if (ataqueAleatorio == 2) {
    ataqueEnemigo = 'AGUA'
} else {
    ataqueEnemigo = 'TIERRA'
}

combate()

}

function crearMensaje() {

let sectionMensajes = document.getElementById('mensajes')

let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota ataco con ' + ataqueJugador + ', las mascota del enemigo atacó con ' + ataqueEnemigo + resultado
sectionMensajes.appendChild(parrafo)

}

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

window.addEventListener(‘load’, iniciarJuego)

Mi codigo, un poco diferente

<code> 
var ataqueJugador = 0;
var ataqueEnemigo = 0;
const rulesGame = {
   1: {
          3: true,
          2: false,
          1: false
      },     
   2: {
          1: true,
          3: false,
          2: false
      },
   3: {
          2: true,
          1: false,
          3: false
      }
}
let victorys = 0;
let defeat = 0;
var optionsGame = ["POLLO CABRON", "FUEGO","AGUA","TIERRA"];
iniciarJuego = () => 
{
   let buttonMascotas = document.getElementById("seleccionarMascota");
   buttonMascotas.addEventListener("click",seleccionMascotaJugador);
   let nodelist = document.querySelectorAll("#seleccionar-ataque button");
   let ataques = [].slice.call(nodelist);
   ataques[0].addEventListener("click", ataqueFuego);
   ataques[1].addEventListener("click", ataqueAgua);
   ataques[2].addEventListener("click", ataqueTierra);
}
seleccionMascotaJugador = (enemigo) => 
{
   // querySelectorAll genera un nodelist con todos los elementos similares 
   let nodelist = document.querySelectorAll("#seleccionar-mascota input");
   console.log(nodelist);
   var inputMascotas = [].slice.call(nodelist);
   console.log(inputMascotas)
   // Convertimos el nodelist en un array(nombresMascotas) 
   var nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
   let spanMascotaJugador = document.getElementById("mascota-jugador");
   //forEach es el metodo de recorrer un arreglo.
   inputMascotas.forEach((valor, indice) => 
   {
      if(valor.checked) 
      {  
         spanMascotaJugador.innerHTML= ` ${nombresMascotas[indice]}`;
         enemigo == true;
       
            seleccionarMascotaEnemigo(aleatorio(0,3));
         
      }
   })
}

seleccionarMascotaEnemigo = (pc) =>
{
   var nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
   let spanMascotaEnemigo = document.getElementById("mascota-enemigo");
   nombresMascotas.forEach((valor, indice) => 
   {
      if(indice == pc)
      {  
         spanMascotaEnemigo.innerHTML= ` ${nombresMascotas[indice]}`;
      }
   })
}

ataqueFuego = () =>
{
   ataqueJugador = 1
   ataqueEnemigo = aleatorio(1, 3);
   crearMensaje();
}
ataqueAgua = () =>
{
   ataqueJugador = 2
   ataqueEnemigo = aleatorio(1, 3);
   crearMensaje();
}
ataqueTierra = () =>
{
   ataqueJugador = 3
   ataqueEnemigo = aleatorio(1, 3);
   crearMensaje();
}
crearMensaje = () =>
{
   var sectionMensaje = document.getElementById("mensajes");
   var parrafo = document.createElement("p");
   console.log(ataqueJugador, ataqueEnemigo)
   if(rulesGame[ataqueJugador][ataqueEnemigo])
   {
      parrafo.innerHTML = "Tu mascota atacó con " + optionsGame[ataqueJugador] + ", las mascota del enemigo atacó con " +optionsGame[ataqueEnemigo] + " GANASTE";
      sectionMensaje.appendChild(parrafo);
      return victorys++
   }
   else if(ataqueJugador==ataqueEnemigo)
   {
      parrafo.innerHTML = "Tu mascota atacó con " + optionsGame[ataqueJugador] + ", las mascota del enemigo atacó con " +optionsGame[ataqueEnemigo] + " EMPATE";
      sectionMensaje.appendChild(parrafo);
   }  
   else
   {
      parrafo.innerHTML = "Tu mascota atacó con " + optionsGame[ataqueJugador] + ", las mascota del enemigo atacó con " +optionsGame[ataqueEnemigo] + " PERDISTE";
      sectionMensaje.appendChild(parrafo);
      return defeat++
   }
   estadisticas();
}

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

estadisticas =() =>
{
   while(victorys == 3 || defeat == 3)   
   {
      alert("GANASTE " + victorys +" PERDISTE " + defeat);
      victorys = 0;
      defeat = 0;
   }
}

window.addEventListener("load", iniciarJuego)

me siento un poco perdida con algunas cosas pero intentare teener paciencia

function combate (lo que esta dentro de estos paréntesis es un parámetro)

los parámetros sirven mucho para directamente incluir toda la información del resultado en forma de una variable y así hacerlo dinámico.

Lo resolví declarando variable general = resultado, y luego en vez de alerta poniendo esa variable resultado = perdiste o ganaste o empate en el combate!

En el mensaje al final coloqué + resultado… y funciono!

Yo cree una variable Global resultadoJuego donde almacenes el valor del combate para luego imprimirlo con la funcion mostrarMensaje.

Leyendo los comentarios, veo que fue la soluciòn que se nos ocurrio a la mayoria 😄

Gracias Juan DC

Me da gusto el aprender javascript, pero sobre todo, me da mas gusto mejorar mi logica al analizar mejor mi codigo y poder emplearlo en diferentes aspectos en mi vida.

Yo pense usar la variable resultado como global, para llenar la variable cuando haya un combate con el resultado y asi utilizar la variable en la concatenación al final, dio el mismo resultado

Para mi todo es nuevo… pero continua hacia la meta… Que buen profe

El mensaje oculto de esta clase seria, si puedes re utilizar una lógica que hayas desarrollado previamente, do it.

hay que aprender a utilizar bibliotecas.

Por fin logré que me arrojaran los resultados de los combates jeje ![](

let ataqueJugador
let ataqueEnemigo

function iniciarJuego() {
    let botonMascotaJugador = document.getElementById('boton-mascotas')
    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 botonTierra = document.getElementById('boton-tierra')
    botonTierra.addEventListener('click', ataqueTierra)
}

function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById('hipodoge')
    let inputCapipepo = document.getElementById('capipepo')
    let inputRatigueya = document.getElementById('ratigueya')
    let spanMascotaJugador = document.getElementById('mascota-jugador')

    if (inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = 'Hipodoge'
    } else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = 'Capipepo'
    } else if (inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = 'Ratigueya'
    } else {
        alert('Selecciona una mascota 😺')
    }

    seleccionarMascotaEnemigo()
}

function seleccionarMascotaEnemigo() {
    let mascotaAleatoria = aleatorio(1,3)
    let spanMascotaEnemigo = document.getElementById('mascota-enemigo')

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

function ataqueFuego() { 
    ataqueJugador = 'FUEGO'
    ataqueAleatorioEnemigo()
    //alert('Ataque Fuego')
}

function ataqueAgua() { 
    ataqueJugador = 'AGUA'
    ataqueAleatorioEnemigo()
    //alert('Ataque Agua')
}

function ataqueTierra() { 
    ataqueJugador = 'TIERRA'
    ataqueAleatorioEnemigo()
    //alert('Ataque Tierra')
}

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

    if (ataqueAliatorio == 1) {
        ataqueEnemigo = 'FUEGO'
    } else if (ataqueAliatorio == 2) {
        ataqueEnemigo = 'AGUA'
    } else {
        ataqueEnemigo = 'TIERRA'
    }

    combate()
}

function combate(){
    if(ataqueEnemigo==ataqueJugador){
        crearMensaje("EMPATE")
    } else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA'){
        crearMensaje("GANASTE")
        
    } else if(ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
        crearMensaje("GANASTE")
        
    } else if(ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
        crearMensaje("GANASTE")
        
    } else {
        crearMensaje("PERDISTE")
    }
}

function crearMensaje(resultado){
    let sectionMensajes = document.getElementById('mensajes')

    let parrafo = document.createElement('p')
    parrafo.innerHTML = 'Tu mascota atacó con '+ ataqueJugador +', las mascota del enemigo atacó con ' + ataqueEnemigo + '- '+ resultado +' 🎉🎉'

    sectionMensajes.appendChild(parrafo)
}

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

window.addEventListener('load', iniciarJuego)

Esta clase estuvo muy buena.

PENSE EN UNA VARIABLE GLOBAL :V

en el combate con un .or. || puedes juntar los tres GANASTE en uno solo y compactar mas la función