Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

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

Iniciando el combate

58/84
Recursos

Tienes lista la l贸gica para preparar al mokepon del jugador y el mokepon del enemigo para el combate. Aun resta finalizar la l贸gica del propio combate para lograr determinar al ganador a partir de la cantidad de ataques ganados.

Cambiando la l贸gica del combate

Comienza declarando dos variables que utilizaremos para mostrar en el HTML el tipo de ataque del jugador y del enemigo (fuego, agua, tierra).

let indexAtaqueJugador;
let indexAtaqueEnemigo;

Luego de que la l贸gica de los ataques del jugador y del enemigo est茅 lista, ejecuta una nueva funci贸n iniciarPelea() que determinar谩 si el combate est谩 listo para iniciar o no.

function ataqueAleatorioEnemigo() {
    // ...
    iniciarPelea();
}

Implementaremos una nueva l贸gica para el combate donde es necesario que el jugador haya seleccionado el orden de sus cinco ataques para iniciar el combate. Para determinar esta l贸gica, utilizaremos el length del arreglo que guarda los ataques del jugador. Recuerda que, por cada ataque del jugador, se selecciona un ataque enemigo de forma aleatoria.

function iniciarPelea() {
    if (ataqueJugador.length === 5) {
        combate();
    }
}

Declara otra nueva funci贸n llamada indexAmbosOponente() que usaremos para renderizar en el HTML el orden de los ataques del mokepon del jugador y del enemigo.

function indexAmbosOponente(jugador, enemigo) {
    indexAtaqueJugador = ataqueJugador[jugador];
    indexAtaqueEnemigo = ataqueEnemigo[enemigo];
}

Esta variable es le铆da desde la funci贸n crearMensaje() que es la encargada de crear el HTML.

function crearMensaje(resultado) {
    // ...
    nuevoAtaqueDelJugador.innerHTML = indexAtaqueJugador;
    nuevoAtaqueDelEnemigo.innerHTML = indexAtaqueEnemigo;
}

Si la l贸gica para iniciar el combate se cumple, el mismo inicia y se realiza el c谩lculo para evaluar qui茅n es el ganador de cada ataque del combate o si hay empate.

function combate() {
    for (let index = 0; index < ataqueJugador.length; index++) {
        if(ataqueJugador[index] === ataqueEnemigo[index]) {
            indexAmbosOponente(index, index);
            crearMensaje("EMPATE");
        }
        // RETO: Determinar l贸gica del combate por cada ataque
    }
    revisarVidas();
}

Queda pendiente un reto para ti. Cada ataque del jugador puede ganar, empatar o perder. Implementa esta l贸gica en la funci贸n combate() y realiza el c谩lculo para determinar al ganador de la pelea al mejor de 5 ataques.

Haz un esfuerzo por resolver este reto. En la siguiente clase, encontrar谩s la soluci贸n al mismo.


Contribuci贸n creada por: Kevin Fiorentino (Platzi Contributor)

Aportes 131

Preguntas 38

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Al igual que muchas otras personas en las anteriores clases y comentarios, pienso que el grado de dificultad va avanzando pero seguimos el ritmo y repetimos algunas clases para analizar.

Hay algo que me deja pensando y es por que nunca establecieron un diagrama de flujo para el juego. Es fundamental para saber en que parte del procedimiento estas y como vas a trabajar.

Durante el transcurso del curso los profesores fueron cambiando el mismo funcionamiento del juego y no me parece mal pero hay personas que se est谩n involucrando con t茅rminos y algoritmos de la programaci贸n y es posible que no tengan acceso a otros cursos para aclarar dudas.

Solo quiero dar mi aporte para que lo tengan en cuenta, lo he le铆do a lo largo del curso y me dejo pensando. Yo sin embargo seguir茅 con la escuela de desarrollo para aclarar y seguir aprendiendo.

Saludos.

Asi va mi Mokepon

Las ultimas 3 clases

Me cuesta mucho concentrarme en aprender cuando el que me est谩 ense帽ando no lee lo que est谩 escribiendo y sigue como si nada, ya van varias veces y desconozco el motivo pero es muy frustrante.

Inserte audio del titoc de : No puedo Martha鈥 Ya descompuse mi c贸digo JAJAJA

Gente que ha llegado a este punto del curso, no desfallezcan, yo me he demorado unos d铆as en repasar mi c贸digo, compararlo con el del profesor, pero lo que m谩s me ha ayudado ha comprender y poder seguir el nivel es usar la consola en el navegador, imprimiendo las variables los arreglos eso me ha ayudado un mont贸n, no desesperen solo contin煤en que se puede.

No me gusta como va el juego, eso de generar 5 ataques y validarlos en una vez, es aburrido. Y tambi茅n en el fondo sigue siendo un piedra, papel o tijera porque los ataques son 3: fuego, agua y tierra.
Tambi茅n me parece m谩s divertido el sistema de vidas.

Lo que hice para las validaciones fue coger las condiciones ya establecidas y agregarles el 铆ndice.

A las cuales le s agregu茅 un contador para que el juego funcione con victorias.

Creo que hay un peque帽o error cuando se escribe la funci贸n indexAmbosOponentes, seg煤n mi l贸gica, deber铆a ser:

function indexAmbosOponentes(jugador, enemigo) {
  indexAtaqueJugador = ataqueJugador[jugador];
  indexAtaqueEnemigo = ataqueEnemigo[enemigo];
}

De lo contrario, el resultado de los mensajes ser谩 el mismo.
隆Espero sea 煤til, saludos! 馃槂

  • 驴Qu茅 se hace en esta clase?
    Se comparan las secuencias de ataques (los arreglos) del jugador y el enemigo
  • 驴C贸mo se hace?
    • Se hace la comparaci贸n (el combate) 煤nicamente una vez se han seleccionado los ataques
      if (ataqueJugador.length === 5) { combate() }
    • En la funci贸n del combate se crea un ciclo para que reccorra ambas secuencias
      for (let index = 0; index < ataqueJugador.length; index++) { }
    • Dentro del ciclo se hace una validaci贸n para determinar si el jugador GAN脫, PERDI脫 o EMPATO
if (ataqueJugador[index] === ataqueEnemigo[index]) {
	crearMensaje("EMPATE 馃槕")
} else if ((ataqueJugador[index] == 'FUEGO' && ataqueEnemigo[index] == 'TIERRA') || (ataqueJugador[index] == 'AGUA' && ataqueEnemigo[index] == 'FUEGO') || (ataqueJugador[index] == 'TIERRA' && ataqueEnemigo[index] == 'AGUA')) {
	crearMensaje("GANASTE 馃帀")
} else {
	crearMensaje("PERDISTE 馃槩")
}

Hola! Yo cambie un poco la logica para que cada vez que se le de click a un ataque el enemigo elija uno al azar y se comparen uno a uno y se vayan contando las victorias y las derrotas. de esa manera no habria que esperar a elegir los cinco ataques:

en la funcion combate le agregue un contador con los indices para no tener que hacer un ciclo y se compraren cada uno de los los ataques dependiendo de su indice y ademas agregue dos contadores mas para verificar las victorias y las derrotas:

function combate() {
    if (attackCounter[combatCounter] == enemyAttackCounter[combatCounter]) {
      result = "Empate";
    } else if (attackCounter[combatCounter] == "Fire" && enemyAttackCounter[combatCounter] == "Earth") {
      result = "Ganaste 馃帀";
      victoryCounter++;
    } else if (attackCounter[combatCounter] == "Water" && enemyAttackCounter[combatCounter] == "Fire") {
      result = "Ganaste 馃帀";
      victoryCounter++;
    } else if (attackCounter[combatCounter] == "Earth" && enemyAttackCounter[combatCounter] == "Water") {
      result = "Ganaste 馃帀";
      victoryCounter++;
    } else {
      result = "Perdiste 馃槩";
      lossCounter++;
    }
    createMessage();
    endGame();
    enemysLife.innerHTML = lossCounter;
    playersLife.innerHTML = victoryCounter;
    combatCounter++
  } 

Este curso va bien, he aprendido mucho y solidado conocimientos que ya tenia, pero no estaria mal darle un repaso a cada clase cuando termine el curso

Yo opte por mantenerme en la mecanica anterior:
siento que si se evalua un encuentro a la vez, se me hace mas 鈥渢radicional鈥 jajaja

Gente entiendo su frustaci贸n por el nivel de las clases pero me parece que deber铆an dejarla de lado y prestar atenci贸n a lo que la clase quiere que hagamos que es abrir la mente al an谩lisis de programaci贸n. Es obvio que no est谩n esperando que programemos el lanzamiento de un cohete o un GOTY en 3 d铆as. Es una demostraci贸n de lo que podemos llegar a hacer, que nos impulse a seguir aprendiendo, a investigar por nuestra cuenta y adentrarnos en el tema. Es dif铆cil manejar la frustacion pero peor es no aprender algo que te gusta porque la frustacion te controla.

Me rindo, sinceramente este bloque del curso no es claro. Es muy dif铆cil seguirlo y no se trata de frustraci贸n se trata de falta de claridad. El profesor en otros cursos es muy claro pero la din谩mica de cambiar todo cada clase sin que tengamos claras muchas cosas no ayuda mucho al aprendizaje.

En el minuto 13:12 el profesor se equivoco y puso ataqueEnemigo tanto al jugador como al enemigo, asi que si cuando les salgan los mensajes en pantallas son los mismos ya saben por que es 馃槃

El profe: Esto ya lo vimos antes鈥
YO:

Saludos, recomiendo a todos mis compa帽eros de curso que hagan un esfuerzo en mejorar su ortograf铆a, recuerden que un programador, adem谩s de saber programar, debe saber escribir. No podemos desarrollar una web que contengan palabras mal escritas o verbos mal conjugados.

Mis validaciones! je

Yo llevo varios cursos en Platzi y sigo con el entusiasmo, pero alguien que apenas conoce estos conceptos (el curso es b谩sico) la frustraci贸n lo debe llevar a renunciar. Entiendo tambi茅n que pueda ser una clase de manejo de la frustraci贸n (Ya Freddy lo ha dicho) pero se est谩n excediendo. En lugar de enamorar lo que generan es que se fastidien. Mal ah铆鈥

para cumplir el reto, solo debemos cambiar en los聽ifs originales las variables siguientes:
-ataqueEnemigo por ataqueEnemigo[index]
-ataqueJugador por ataqueJugador[index]
ademas agregar en todos los ifs la linea siguiente

  • indexAmbosOponente(index,index)
    eso servira para superar el reto.
    Un comentario , debemos corregir la linea 215 del profesor, tiene que decir:
    indexAtaqueJugador = ataqueJugador[jugador]

Tengo la sensaci贸n desde que el bloque de Programaci贸n B谩sica lo est谩 explicando el profesor Diego, el nivel a subido excesivamente para alguien que est谩 empezando en programaci贸n como es mi caso aunque estoy m谩s especializado en marketing digital algo b谩sico conozco de c贸digo.

A modo de feedback la curva de aprendizaje es demasiado brusca y tambi茅n es como agotadora 40 clases con el ejemplo de los mokepones, desde las 煤ltimas clases ya uno no sabe claramente el porque se hace esto o lo otro, el cerebro como que desconecta.

Voy a seguir adelante porque me he marcado aprender programaci贸n con 37 a帽os pero de verdad que estas clases se est谩n haciendo pesadas.

No me gusto la idea de seleccionar todo y luego que salgan el resultado, lo que hice fue que mostrara los resultados de cada ataque, cambie vidas por batallas ganadas y cuando en el array de ataques esten todos lo botones seleccionados le muestre el resultado final y el boton de reinicio. Mi codigo tambien toma los ataques teniendo en cuenta la mascota del enemigo.

function ataquealeatorioenemigo () {
        let ataquealeatorio = Math.floor(Math.random() * (ataquemokeponenemigo.length) )

        if (ataquealeatorio == 0) {
                simboloataque = ataquemokeponenemigo[0].nombre
        } else if (ataquealeatorio == 1) {
                simboloataque = ataquemokeponenemigo[1].nombre
        }else if (ataquealeatorio == 2) {
                simboloataque = ataquemokeponenemigo[2].nombre
        } else if (ataquealeatorio == 3) {
                simboloataque = ataquemokeponenemigo[3].nombre
        } else if (ataquealeatorio == 4) {
                simboloataque = ataquemokeponenemigo[4].nombre
        } else if (ataquealeatorio == 5) {
                simboloataque = ataquemokeponenemigo[5].nombre
        }
        else {alert("hay un error")
        }

        if (simboloataque === "馃敟") {
                ataqueenemigo.push ("FUEGO")
        } else if (simboloataque === "馃挧") {
                ataqueenemigo.push ("AGUA")
        }else if (simboloataque === "馃椈") {
                ataqueenemigo.push ("TIERRA")
        }else if (simboloataque === "馃寑") {
                ataqueenemigo.push ("AIRE")
        }else {alert("hay un error")
        }        

        console.log (ataqueenemigo)
        juego()
}
function juego () {
        if (ataquejugador == ataqueenemigo){
                resultado = "EMPATE 馃う鈥嶁檧锔"
        } else if (ataquejugador == 'AGUA' && ataqueenemigo == "FUEGO"){
                resultado = "GANASTE 鉂"
                ganadasjugador ++
                spanvidasenemigo.innerHTML = ganadasjugador
        } else if (ataquejugador == 'AIRE' && ataqueenemigo == "FUEGO"){
                resultado = "GANASTE 鉂" 
                ganadasjugador ++
                spanvidasenemigo.innerHTML = ganadasjugador
        } else if (ataquejugador == 'FUEGO' && ataqueenemigo == "TIERRA"){
                resultado = "GANASTE 鉂"
                ganadasjugador ++
                spanvidasenemigo.innerHTML = ganadasjugador
        } else if (ataquejugador == 'TIERRA' && ataqueenemigo == "AGUA"){
                resultado = "GANASTE 鉂" 
                ganadasjugador ++
                spanvidasenemigo.innerHTML = ganadasjugador
        } else if (ataquejugador == 'AGUA' && ataqueenemigo == "AIRE"){
                resultado = "GANASTE 鉂"
                ganadasjugador ++
                spanvidasenemigo.innerHTML = ganadasjugador
        } else if (ataquejugador == 'TIERRA' && ataqueenemigo == "AIRE"){
                resultado = "GANASTE 鉂"       
                ganadasjugador
                spanvidasenemigo.innerHTML = ganadasjugador}
        else {
                resultado = "PERDISTE 馃挃"
                ganadasenemigo ++
                spanvidasjugador.innerHTML = ganadasenemigo 
        }
       mensajes ()
       resultadototal ()
       }

function mensajes (){        
        let nuevoataqueenemigo = document.createElement ("p")
        let nuevoataquejugador = document.createElement ("p")

        mresultado.innerHTML = resultado
        nuevoataquejugador.innerHTML= ataquejugador [ataquejugador.length -1]
        nuevoataqueenemigo.innerHTML= ataqueenemigo [ataqueenemigo.length -1]

        mataquejugador.appendChild(nuevoataquejugador)
        
        mataquesenemigo.appendChild(nuevoataqueenemigo)
        
}
function resultadototal (){
        if (ataquejugador.length == 6) {
                mensajefinal ()
        } else {}
}
function mensajefinal () {
        seccionreiniciar.style.display = "block"  
        
        if (ganadasjugador < ganadasenemigo) {
                resultadofinal = ("GANADOR")
        } else if (ganadasjugador > ganadasenemigo) {
                resultadofinal = ("GAME OVER")
        } else {}
        setionmensajes.innerHTML = resultadofinal                  
}
function reiniciar () {
        seccionataque.style.display = "none"
        seccionreiniciar.style.display = "none"
        location.reload ()
}
window.addEventListener("load", iniciarJuego)

yo agregue el operador OR (ll) para las validaciones y as铆 evitar replicar muchos ELSE IF y usar solo un ELSE IF para todas las victorias posibles.

function combate() {

  for (let index = 0; index < ataqueJugador.length; index++) {
      if (ataqueJugador[index] === ataqueEnemigo[index]){
         indexAmbosOponentes(index, index)
         crearMensaje("EMPATE");
      }else if(ataqueJugador[index] === "AGUA" && ataqueEnemigo[index] === "FUEGO" || ataqueJugador[index] === "FUEGO" && ataqueEnemigo[index] === "TIERRA" || ataqueJugador[index] === "TIERRA" && ataqueEnemigo[index] === "AGUA"){
        indexAmbosOponentes(index, index)
        crearMensaje("GANASTE")
        victoriasJugador++
        spanVidasJugador.innerHTML = victoriasJugador
      }else {
        indexAmbosOponentes(index, index)
        crearMensaje("PERDISTE")
        victoriasEnemigo++
        spanVidasEnemigo.innerHTML = victoriasEnemigo
      }
  }
 
  revisarVictorias();
}

Listo, espero te sirva


Recomiendo leer este aporte en una nueva pesta帽a para una lectura mas amena.

Me demor茅 unas horas, pero creo que vali贸 la pena.

Hemos cambiado el modelo de combate, ya no es por vidas, sino por rondas de cinco ataques (el que obtenga mas victorias gana.

  • Esta en la mi antigua funci贸n combate():
function combate() {
    
    if (ataqueEnemigo == ataqueJugador) {
        crearMensaje("EMPATE 馃檪")
    } else if (
        (ataqueJugador == "Fuego馃寢" && ataqueEnemigo == "Tierra馃椈") ||
        (ataqueJugador == "Agua馃挧" && ataqueEnemigo == "Fuego馃寢") ||
        (ataqueJugador == "Tierra馃椈" && ataqueEnemigo == "Agua馃挧")
    ) {
        crearMensaje("GANASTE 馃槑")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo
    } else {
        crearMensaje("PERDISTE 馃槴")
        vidasJugador--
        spanVidasJugador.innerHTML = vidasJugador
    }

    revisarVidas()
}

  • Esta es la nueva funci贸n combate()

function combate() {
    // fuego le gana a tierra, agua le gana a fuego, tierra le gana a agua
    let resultado
    for (let i = 0; i < ataqueJugador.length; i++) {
        if (ataqueJugador[i] === ataqueEnemigo[i]) {
            indexAtaques(i, i)
            resultado = "EMPATE 馃檪"
        } else if (
            (ataqueJugador[i] == "FUEGO" && ataqueEnemigo[i] == "TIERRA") ||
            (ataqueJugador[i] == "AGUA" && ataqueEnemigo[i] == "FUEGO") ||
            (ataqueJugador[i] == "TIERRA" && ataqueEnemigo[i] == "AGUA")
        ) { 
            indexAtaques(i, i)
            resultado = "GANASTE 馃槑"
        } else {
            indexAtaques(i, i)
            resultado = "PERDISTE 馃槴"
        }
        console.log(ataqueJugador[i], ataqueEnemigo[i])
    }
    crearMensaje(resultado)
    iniciarValidacion()
}

Es similar a la funcion anterior en cuanto a la logica de victorias.
He creado una variable 鈥渓et resultado鈥 que guardara el valor de cada combate individual en vez de llamar a la funcion crearMensaje() al final de cada bucle, (volveremos a esta funcion mas tarde).
Seguimos usando la funcion de IndexAtaques() que explico el profesor.

  • Antigua funci贸n crearMensaje()
function crearMensaje(resultadoCombate){
    sectionResultadoCombate.innerHTML = resultadoCombate
    
    
    function crearMensajeAtaqueJugador() {
        let parrafo = document.createElement("li")
        parrafo.innerHTML = "Atac贸 con " + ataqueJugador

        statusJugador.appendChild(parrafo)
    }
    function crearMensajeAtaqueEnemigo() {
        let parrafo = document.createElement("li")
        parrafo.innerHTML = "Atac贸 con " + ataqueEnemigo

        statusEnemigo.appendChild(parrafo)
    }
    crearMensajeAtaqueJugador()
    crearMensajeAtaqueEnemigo()
}

  • Nueva funci贸n crearMensaje()

function crearMensaje(resultadoCombate){
    sectionResultadoCombate.innerHTML = resultadoCombate
    crearMensajeAtaqueJugador()
    crearMensajeAtaqueEnemigo()
    function crearMensajeAtaqueJugador() {
        let parrafo = document.createElement("li")
        if (resultadoCombate === "GANASTE 馃槑") {
            parrafo.style.color = "#186A3B"
            victoriasJugador++
            spanVictoriasJugador.innerHTML = victoriasJugador
        }if (resultadoCombate === "PERDISTE 馃槴") {
            parrafo.style.color = "#EB1D36"
        }
        parrafo.innerHTML = "Atac贸 con " + indexAtaqueJugador
        console.log(parrafo.innerHTML)
        statusJugador.appendChild(parrafo)
    }
    function crearMensajeAtaqueEnemigo() {
        let parrafo = document.createElement("li")
        if (resultadoCombate === "PERDISTE 馃槴") {
            parrafo.style.color = "#186A3B"
            victoriasEnemigo++
            spanVictoriasEnemigo.innerHTML = victoriasEnemigo
        }if (resultadoCombate === "GANASTE 馃槑") {
            parrafo.style.color = "#EB1D36"
        }
        parrafo.innerHTML = "Atac贸 con " + indexAtaqueEnemigo
        statusEnemigo.appendChild(parrafo)
    }
}
 

Quizas se vea mas grande de lo que es (tal vez sea por los if; estos son detalles mio, permiten designar un color dependiento el resultado del combate; rojo para derrotas y verdede para victorios, esto para jugador y enemigo).
Decidi cambiar de lugar estas lineas de c贸digo de combate() a una de las subfunciones de crearMensaje() dependiento si son del jugador o enemigo, son las siguinetes lineas

victoriasJugador++          	
spanVictoriasJugador.innerHTML = victoriasJugador

victoriasEnemigo++
spanVictoriasEnemigo.innerHTML = victoriasEnemigo

鈥igue, esto lo hice asi porque me di cuenta de que si dejo que fluya como lo hace siempre la funcion combate() con las lineas anteriormente mencionadas, en vez de esperar a una validacion que nos muestre al final cual fue el resultado de los cinco ataques como lo dijo el profe (cosa que no me gusto, despues te explico la secuencia) me junta los resultados anteriores mostrando 15 ataques en vez de 5 (1 + 2 + 3 + 4 + 5 = 15, esto cada vez que se seleciona un ataque y se suma al array), espor eso que decidi ponerlas aqui.

  • Veamos la secuencia impuesta por el profesor para la funci贸n combate()
function ataqueAleatorioEnemigo(){
.
.
.
	iniciarPelea()
}
function iniciarPelea(){
	if(ataqueJugador.length===5){
	combate()
	}
}

  • Esta es mi secuencia:

function ataqueAleatorioEnemigo(){
.
.
.
    combate()
}
function iniciarValidacion(){
    if (ataqueJugador.length === 5) {
        revisarVictorias()
    }
}

De esta manera los combates se imprimen en momento real, en ves de esperar la validaci贸n (lo hice de esta manera para que se sienta mas real, nosotros al programas esto sabemos que el ataque del enemigo es completamente aleatorio, pero el usuario final no lo sabe, se sentiria como si el enemigo ya supiera nuestros ataques de antemano y podria tomar ventaja.
.
Recuerda que la funcion iniciar validacion es llamada al final de combate(), por lo que se enterara cuando el array tenga los elementos suficientes (en este caso 5) y llamara a la funcion revisarVictorias()

  • Mi antigua funci贸n
function revisarVidas(){

    if(vidasEnemigo == 0){
        crearMensajeFinal("GANASTE LA BATALLA鉁")
    }else if(vidasJugador == 0){
        crearMensajeFinal("PERDISTE LA BATALLA馃槥")
    }

}
//Recordemos que antes aun era por vidas
  • Mi nueva funci贸n


function revisarVictorias(){

    if(victoriasJugador > victoriasEnemigo){
        crearMensajeFinal("GANASTE LA BATALLA鉁")
    }else if(victoriasJugador < victoriasEnemigo){
        crearMensajeFinal("PERDISTE LA BATALLA馃槥")
    }else {
        crearMensajeFinal("HA SIDO UN EMPATE鈿")
    }

}
// La nueva modalidad impera por la victorias

Y as铆 es como se ve:


Aqui mi repositorio: Mokepon
Tambien puedes probarlo: 隆Juega ahora!

Te agradezco mucho por leer hasta el final馃挌馃挌馃挌

muy mal profesor

Mi soluci贸n al reto:

function combate () {
    for (let index = 0; index < attackPlayer.length; index++) {
        if (attackPlayer[index] === attackEnemy[index]) {
            indexAmbosAtaques (index, index)
            createMessage('Empate')
        } else if (attackPlayer[index] == 'PIEDRA' && (attackEnemy[index] == 'TIJERA' || attackEnemy[index] == 'LAGARTO') || attackPlayer[index] == 'PAPEL' && (attackEnemy[index] == 'PIEDRA' || attackEnemy[index] == 'SPOCK') || attackPlayer[index] == 'TIJERA' && (attackEnemy[index] == 'PAPEL' || attackEnemy[index] == 'LAGARTO') || attackPlayer[index] == 'LAGARTO' && (attackEnemy[index] == 'PAPEL' || attackEnemy[index] == 'SPOCK') || attackPlayer[index] == 'SPOCK' && (attackEnemy[index] == 'PIEDRA' || attackEnemy[index] == 'TIJERA')) {
            indexAmbosAtaques (index, index)
            createMessage('Ganaste')
        } else {
            indexAmbosAtaques (index, index)
            createMessage('Perdiste')
        }
    }

    phCounter()

}

A los dioses el codigo les ofrezco mi disculpa, no me rindo jamas, pero siendo que est谩 nivel avanzado para m铆, y seguire persistiendo

Para quienes ya vayan por aqu铆 y vean esto, mi consejo: no se desanimen si no entienden mucho, sigan con el curso, no se rindan, tomen notas de lo que no entienden y traten de al menos tener el programa funcionando. Terminen el curso y luego tomen uno de los cursos b谩sicos de alg煤n lenguaje en concreto, como Python, JavaScript, C#, etc., donde se ve m谩s a detalle temas b谩sicos y van subiendo la dificultad con cursos de programaci贸n orientada a objetos, estructuras de datos, control de flujo, manejo de errores y as铆. Manden correo a [email protected] pidiendo ayuda de que camino y cursos tomar para ir de poco en poco con esto. Entiendo su frustraci贸n si no entienden mucho, yo tampoco le entiendo tanto, se que dif铆cil, es frustrante y es f谩cil tirar la toalla, pero hagan su esfuerzo, aunque les tome tiempo, tengan fe en ustedes mismos y contin煤en. Es un camino complicado para algunos de nosotros, pero h谩ganlo para ustedes y por ustedes, ya sea tanto por crecer profesionalmente, o como mero reto personal o pasatiempo. Les deseo lo mejor a todos.

un curso super necesario para entender todas las herramientas que se usan aqui y donde explican su concepto es el de PENSAMIENTO LOGICO, ahi explican que es un ciclo For, If/Else, While, Do While, que son los arrays, ETC ETC ETC鈥 lo estoy haciendo a la par de este curso y me ha ayudado a entender muchas cosas!!!

Hola, mi soluci贸n fue extraer los ataques v谩lidos, a partir de la mascota enemiga, hice en el proceso varias funciones, y acupe varios m茅todos del array.
Finalmente, despu茅s de muchas horas de leer, de probar ensayo y error, y solucionar bug, logre que funcionara.
Si algo me ayud贸 mucho, fue ocupar

console.log()

Mi l贸gica es que, por cada ataque seleccionado por parte del jugador, se escoja uno de los ataques disponibles por parte del enemigo, termina cuando no queda elementos en el array.
Obtengo un array con los ataques del enemigo, la cual es la forma en la que los elementos fueron saliendo del array ataques enemigos. Dicho array fue el utilizado en la l贸gica de los combates.

Dejo mi codigo鈥 por si quieren revisar y preguntarme de lo que escribi鈥

https://drive.google.com/file/d/1Sq2Qm1-1TL8l13t-6GsGzDJVpofqhbQU/view?usp=sharing

Bueno, se me hizo f谩cil terminar las validaciones en la funci贸n combate(), Pero al terminarlas hice algunas pruebas y note que algunos ataques que se imprim铆an no coincid铆an con los botones que hab铆a presionado.
Estuve un rato depurando, cambie la funcionalidad de vidas a victorias. Declare 3 variables globales (victorias, perdidas, empates) que use para cambiar el funcionamiento de revisar vidas().
Tambi茅n quite el par谩metro 鈥resultado鈥 que tenia la funci贸n crearMensaje(), sent铆 que ya no tenia una funcionalidad clara ya que ese mensaje solo se iba a mostrar al finalizar los 5 ataques.

Algo as铆 fue como me quedo, lo importante es que funciona y que ya empiezo a ver errores con mas facilidad que antes al igual que he podido resolverlos por mi cuenta.

Me esta encantando este curso, algunas clases son complicadas, pero basta con repetir y ser paciente.
Ya estoy viendo resultados y eso me tiene muy entusiasmado!

let victorias = 0
let perdidas = 0
let empates = 0

function combate() {
    for (let index = 0; index < ataqueJugador.length; index++) {
        if(ataqueJugador[index] === ataqueEnemigo[index]){
            indexAmbosOponentes(index, index)
            crearMensaje()
            empates ++
            console.log("EMPATE")
        }else if (ataqueJugador[index] === "FUEGO" && ataqueEnemigo[index] === "TIERRA") {
            indexAmbosOponentes(index, index)
            crearMensaje()
            victorias ++
            console.log("GANASTE")
        }else if (ataqueJugador[index] === "AGUA" && ataqueEnemigo[index] === "FUEGO") {
            indexAmbosOponentes(index, index)
            crearMensaje()
            victorias ++
            console.log("GANASTE")
        }else if (ataqueJugador[index] === "TIERRA" && ataqueEnemigo[index] === "AGUA") {
            indexAmbosOponentes(index, index)
            crearMensaje()
            victorias ++
            console.log("GANASTE")
        } else {
            indexAmbosOponentes(index, index)
            crearMensaje()
            perdidas ++
            console.log("PERDISTE")
        }
        revisarVidas() // Ya no son vidas
        console.log(victorias, perdidas, empates)
        console.log()
    }
}

function crearMensaje() {
    let nuevoAtaqueDelJugador = document.createElement("p")
    let nuevoAtaqueDelEnemigo = document.createElement("p")

    nuevoAtaqueDelJugador.innerHTML = indexAtaqueJugador
    nuevoAtaqueDelEnemigo.innerHTML = indexAtaqueEnemigo

    ataqueDelJugador.appendChild(nuevoAtaqueDelJugador)
    ataqueDelEnemigo.appendChild(nuevoAtaqueDelEnemigo)
}

function revisarVidas() {
    if (victorias > perdidas) {
        crearMensajeFinal ("FELICITACIONES! Ganaste :)")
    }else if (perdidas > victorias) {
        crearMensajeFinal ("Lo siento, perdiste :c")
    } else if (empates > 2) {
        crearMensajeFinal ("Empate! Nadie Gana.")
    } else {
        crearMensajeFinal ("Empate! Nadie Gana.")
    }
}

Ahi quedo, use un contador para victorias y derrotas, hice que
el mensaje final se mandara a llamar una vez que escogiera los 5 ataques y en este ultimo es cuando me imprime el resultado de la batalla, cuantas victorias obtuvo cada contrincante y que ataques usaron en cada ronda, que buen curso lptm

psdt: Alguien sabe como desactivar los botones de ataque una vez que ya lo haya seleccionado?

<code> 
//.... 
function iniciarPelea(){
    if(ataqueJugador.length === 5){
        let styleAtaquesJugador= document.getElementById('ataques-jugador')
        styleAtaquesJugador.style.cssText = "border:4px solid rgb(196 15 231);background-color: rgb(241 195 195); border-style: dotted;";
        let styleAtaquesEnemigo= document.getElementById('ataques-enemigo')
        styleAtaquesEnemigo.style.cssText = "border:4px solid rgb(196 15 231);background-color: rgb(241 195 195); border-style: dotted;";
        resultadoCombate()
        mensajeFinal()
    }
}

function indexAmbosOponentes(jugador,enemigo){
    indexAtaqueJugador = ataqueJugador[jugador]
    indexAtaqueEnemigo = ataqueEnemigo[enemigo]
}

function resultadoCombate(){

    for(let index=0;index < ataqueJugador.length; index++){
        if(ataqueJugador[index] === ataqueEnemigo[index]){
            indexAmbosOponentes(index,index)
                crearMensaje()                 
        }  else if (ataqueJugador[index] =="FUEGO" && ataqueEnemigo[index]=="TIERRA"||ataqueJugador[index] == "AGUA" && ataqueEnemigo[index]=="FUEGO"||ataqueJugador[index] == "TIERRA" && ataqueEnemigo[index]=="AGUA") {
                  indexAmbosOponentes(index,index)
                    crearMensaje() 
                  victorias++
                }   
                else{
                    indexAmbosOponentes(index,index)
                    crearMensaje() 
                    derrotas++
                }
    }
}

function crearMensaje(){
    
    let nuevoAtaqueDelJugador = document.createElement('p')
    let nuevoAtaqueDelEnemigo = document.createElement('p')
    

    
    nuevoAtaqueDelJugador.innerHTML = indexAtaqueJugador
    nuevoAtaqueDelEnemigo.innerHTML = indexAtaqueEnemigo

    sectionAtaqueJugador.appendChild(nuevoAtaqueDelJugador)
    sectionAtaqueEnemigo.appendChild(nuevoAtaqueDelEnemigo)
}

function mensajeFinal(){
        if(victorias==derrotas)
        sectionResultado.innerHTML = "EMPATE"
        else if(victorias > derrotas)
        sectionResultado.innerHTML = "GANASTE"
        else{
        sectionResultado.innerHTML = "PERDISTE"
        }

    spanVidasJugador.innerHTML = victorias + " Victorias"
    spanVidasEnemigo.innerHTML = derrotas + " Victorias"
    sectionReiniciar.style.display = 'block'
    botonFuego.disabled = true
    botonAgua.disabled = true
    botonTierra.disabled = true

}

Este es un cambio en la funci贸n combate que inicie en el nivel anterior del curso, es reducir las condiciones usando conectores, de momento ha funcionado, aqui se las dejo:

Est谩 muy interesante el nivel del curso a esta altura, pero en cuanto a gameplay, me parece que est谩 desbalanceado, es mucho menos divertido jugar sabiendo que dependiendo de las mascotas elegidas hay muy pocas chances de ganar. O al rev茅s, que tengamos una mascota que pr谩cticamente la tiene ganada por la cantidad de ataques que decidimos a帽adir.

No les pasa que duran hasta 2 horas en una clase de 20min Jejejeje ! Vamos por buen camino !

esto ya lo hemos visto en clases pasadas鈥
sii???

La l贸gica inicial del lenguaje con el que Freddy y Juan David comenzaron el curso me hab铆a parecido sencilla y f谩cil de comprender, luego, cuando entr贸 la profe Estefany sent铆 que el nivel de complejidad hab铆a aumentado, y eso no est谩 mal ya que la idea es entender el c贸mo y el porqu茅 en programaci贸n.
Sin embargo, con el profe Diego me doy cuenta que pr谩cticamente el c贸digo con el que inicialmente empezamos desapareci贸 o fu茅 cambiado casi que por completo.
Aclaro que no estoy criticando, al contrario, estoy disfrutando de aprender la variedad de maneras con las que se puede programar. Y aunque estoy adaptandome a las nuevas y m煤ltiples formas de desarrollar c贸digo, creo que el proceso de ense帽anza de profesor a profesor hubiera podido ser mejor escalonado. Hubo un cambio muy alto en el nivel de dificultad entre m贸dulos. Y espero no estar dando una idea equivocada con mi comentario, espero que esto pueda ser tomado en cuenta. Ya que de verdad agradezco a Platzi por los conocimientos que brindan y me siento alegre de haber tomado la decisi贸n de aprender con ustedes.
S贸lo quiero decir 鈥淕RACIAS鈥.

Gracias por la clase. De verdad que hay muchas cosas que ya en este punto parecen imposibles de aprender. Pero seguir茅 hasta el final.

Soy esta

Vengo a dar mi aporte luego de estar 5 dias estancado porque si seleccionaba agua decia que era tierra y todos daban tierra.
Conclusion, mi vsc me agrego el 鈥渢extcontent鈥 con las C minuscula y era con mayuscula "textContent"
Solucionado, hora de seguir.

en secuencia de ataque hay un error grave ya que por defecto su eleccion es else tierra ha pesar de que de click fuego o agua

Me cans茅 de tantos if-else-if, as铆 que me hice una tabla de verdad, al menos como la imagin茅 y como pude, le env铆as los ataques y te devuelve el resultado:

Que terrible la clase ha roto mi codigo y he visto en tantas oportunidades y no doy de aquellos nuevos errores que mal tanta confusion del profesor

En este momento el nivel de programaci贸n es elevado, para mejorar los vac铆os que se puedan tener es bueno mirar otros complementos que platzi brinda. Por que este curso da por encima lo que en otros profundiza.

se me exploto la cabeza

Aqu铆 utilic茅 las validaciones con las que ven铆amos trabajando en las primeras clases. Con la diferencia de que cuento las victorias en lugar de restar vidas y no manejo una validaci贸n que verifique el empate sino una que compruebe la desigualdad de los ataques despu茅s de los casos en los que gane el jugador, ya que si los valores son diferentes y no gana el jugador entonces s贸lo puede ganar el oponente y no me importa el empate.


Y as铆 fue como hice la validaci贸n por victorias en lugar de vidas


Aqu铆 abajo dejo otra forma que se me ocurri贸 para mostrar los ataques escogidos por cada oponente utilizando tambi茅n lo que ten铆amos de clases pasadas. Tanto los ataques del jugador y del enemigo est谩n guardados en sus respectivas variables(arreglos) para luego recorrer cada uno con un .forEach() para agregar cada ataque a 鈥渘uevoAtaqueDel鈥︹ (el .toUpperCase() es para que se vea en may煤scula) y luego insertarlo en el HTML a la secci贸n 鈥渁taquesDel鈥︹ con .appendChild()

Y as铆 va quedando鈥

Yo estar茅 encantado de recibir su feedback y tambi茅n quiero mandarles un mensaje de motivaci贸n a aquellos que se les est谩 rompiendo todo鈥 No se preocupen, yo tambi茅n he roto hasta los platos de mi casa pero as铆 es esto, saber manejar la frustraci贸n y al final no importa si no lo hacen igual que el profesor, ahora que estamos iniciando lo importante es que funcione porque si funciona significa que est谩 buena la l贸gica, lo dem谩s ya son buenas pr谩cticas y esas se aprenden cometiendo errores. 隆隆NO SE RINDAN!!, un abrazo y nunca paremos de aprender!!.

En la Linea 213 y 214 se est谩 usando los mismos Arrays (arreglos), no se da帽ar谩 el c贸digo, pero si la l贸gica del juego.

No entiendo de donde se sac贸 el index del enemigo en el loop for el profe, dice:

if (ataquejugador[index] == ataqueEnemigo[Index])

No se supone que la variable index solo existe dentro de loop fot?

No basta con colocar:
if(ataquejugador[index] == ataqueEnemigo).

Sabemos que para asimilar el conocimiento adquirido en las clases hay que practicar, pero tambi茅n podemos aprender bastante tom谩ndonos una pausa y leyendo nuestro c贸digo una y otra vez. En lo personal pienso que a veces este curso avanza a pasos agigantados y est谩 bien seguir ese paso, pero por otro lado tambi茅n debemos tomarnos un buen rato para leer, comprender y tratar de optimizar el c贸digo por nuestra cuenta.

Pesimo profesor zzz

Hubo error de typo en la funci贸n indexAmbosOponentes ya que se agreg贸 a la variable del enemigo en la variable de jugador

me perdi hace como 5 clases atras!!! pero aun sigo el codigo! HELP Dioses del internet!

No le cambie el nombre a las variables solo la l贸gica, en ves de restar vidas, sumamos victorias y se comparan las victorias al final del for para determinar al ganador

lo de ver las clases mas de una vez es muy bueno, es la segunda vez que veo estas dos ultimas clases y me di cuenta que me perdi varias cosas

No se estresen! Si no entienden, enfoquense en la primera reproducci贸n a entender la l贸gica general (qu茅 pretende, cu谩l es el objetivo) sin fijarse en el paso a paso. Despu茅s de tener claro el objetivo no vean el video sino que hagan un paso a paso mental de qu茅 har铆an y escr铆banlo y en la segunda reproducci贸n del video, poco a poco van pasando por ese paso a paso y lo van comparando con lo que dice el profe. 脕nimo! Recuerden que si fuera un trabajo f谩cil no estar铆amos moldeando el futuro de los humanos!!!

tengo la sensacion de que escribio mal este parte del codigo?

鈥渇unction indexAmbosOponente(jugador,enemigo){indexAtaqueJugador=ataqueEnemigo[jugador]
indexAtaqueEnemigo=ataqueEnemigo[enemigo]}鈥

se repite ataqueEnemigo y le pide jugador a una y enemigo a otra, no tendria que ser ataqueJugador?

As铆 me qued贸, sencillo pero aprendiendo mucho. Gracias

Yo solucion茅 el problema del minuto 3:33 a帽adiendo un contador y que sume cada vez que hago click en un bot贸n

hola, si esoy entendiendo lo que el esta haciendo pero me confunde con tanto poner y quitar, hago mi mejor esfuerzo de comprender algunas coas

De momento al querer abrir los archivos de clase en el apartado de recursos ya no se abren los documentos donde vienia el codigo para poder estar revisando que e slo que puedo estar fallando, le doy click y sale una linea que esta cargando, termina de cargar y no se abre

Plazti al final del dia me muestra que 鈥渆studie en el dia鈥 2 horas, despues de que fueron mas de 10 o 12 horas en promedio diario, termine de ver esta clase a las 12:46, agregare otro comentario al terminar

Si alguient iene el error 鈥渦ndefined鈥 en la seccion de los logs de ataque, por favor intenten reemplazar con este codigo:

function ataqueAleatorioEnemigo(){
    let ataqueAleatorio = aleatorio(0, ataquesMokeponEnemigo.length-1)

    if(ataqueAleatorio==0||ataqueAleatorio == 1){
        ataqueEnemigo.push("FUEGO")
    }
    if(ataqueAleatorio==2||ataqueAleatorio==4){
        ataqueEnemigo.push("AGUA")
    }
    else{
        ataqueEnemigo.push("TIERRA")
    }
    iniciarPelea()   
}

Me gustar铆a comentar, que realmente asi es como va la vida real, pasa que te equivocas, y tienes que volver en tus pasos, o revisar si al cambiar elementos debes corregir otros, sin embargo al final es algo que probablemente valga la pena n.n

este tipo de problemas con javascript es la razon por la que han creado lo que se llaman 鈥渇rameworks鈥 o basicamente recomposiciones de la forma en la que funciona un lenguaje para personalizar como este funciona, y en este caso, hacerlo m谩s amigable con el programador c:

Era preferible que tumbaran todo el juego y nos ense帽aran a como hacerlo mas optimo desde el principio, es algo enredado seguirle el ritmo ya que exiten varias variables que sirven y unas que ya no鈥

Lo realice as铆 y me corre bien, pero el crearMensaje no me funciona as铆 que lo voy a quitar

function combate() {

  for (let index = 0; index < ataqueJugador.length; index++) {
    if(ataqueJugador[index] === ataqueEnemigo[index]) {
      indexAmbosOponetes(index, index)
      crearMensaje("EMPATE 馃檮")
    } else if (ataqueJugador[index] === "FUEGO" && ataqueEnemigo[index] == "TIERRA") {
      indexAmbosOponetes(index, index)
      crearMensaje("GANASTE 馃榿")
      victoriasJugador++
      spanvidaJugador.innerHTML = victoriasJugador
    } else if (ataqueJugador[index] == "AGUA" && ataqueEnemigo[index] == "FUEGO") {
      indexAmbosOponetes(index, index)
      crearMensaje("GANASTE 馃榿")
      victoriasJugador++
      spanvidaJugador.innerHTML = victoriasJugador
    } else if (ataqueJugador[index] == "TIERRA" && ataqueEnemigo[index] == "AGUA") {
      indexAmbosOponetes(index, index)
      crearMensaje("GANASTE 馃榿")
      victoriasJugador++
      spanvidaJugador.innerHTML = victoriasJugador
    } else {
      indexAmbosOponetes(index, index)
      crearMensaje("PERDISTE 馃槩")
      victoriasEnemigo++
      spanvidaEnemigo.innerHTML = victoriasEnemigo
    }
  }
  revisarVictorias()
}

ayuda!!! cuando selecciono mi ataque no lo toma en cuenta oseaa no me sale lo que eleji solo sale como si no existiera mi bariable de ataqueJugador que supuestamente guarda mis ataques tampoco cambia de color mi botn al seleccionarlo

A estas alturas, he estado sintiendo que se hace cada vez m谩s dificil seguir el ritmo, respecto a entendimiento de como estamos estructurando el juego, que soluciones vamos dando para la implementaci贸n de nueva l贸gica, etc, a este punto solo he estado haciendo lo mismo que el profesor m谩s que sentirme motivado a buscar mis soluciones y otras formas de implementar c贸digo, cosa que ten铆a haciendo a lo largo del curso

Que cansado estoy de los Mokepones jaja, un poco frustrado, la verdad, como alguien dijo por ah铆 la curva de aprendizaje de repente y sin previo aviso paso de 30 a 80!!! Cuando paso eso?, la verdad como curso de programaci贸n b谩sica, aunque en verdad aunque sea b谩sico o lo que sea, como que el cambio fue demasiado brusco! Sin previo aviso, sin pre谩mbulo, tan solo de repente cambio de 30 a 80!, y creo que para el manejo del aprendizaje y la frustraci贸n no s茅 que tan 煤til es ense帽ar as铆 , pero buen seguimos d谩ndole y poni茅ndole entusiasmo solo pensando en que de poquito entre el conocimiento, preocupado de ser detallista y no romper el c贸digo, pero que dif铆cil es entender tanto concepto junto por clase sin mucha explicaci贸n de por medio, frustra mucho eso la verdad. 隆Quiz谩s no ser铆a mejor meter menos conceptos, pero explicar un poco m谩s?, bueno en fin mi humilde opini贸n, de todas formas doy muchas gracias a Platzi por qu茅 se que es gratis y bueno tratamos de sacar las cosas adelante a pesar de la frustraci贸n!! Vamos equipo!

mi soluci贸n:

function crearMensaje(){
        
            for (let i = 0; i < ataquesJugador.length; i++) {
                let resultadoParcial = batalla(ataquesJugador[i],ataquesEnemigo[i])
                resultado.push(resultadoParcial)
                let opcionAtaqueJugador = `<p> ${ataquesJugador[i]} </p>`
                sectionAtaquesJugador.innerHTML += opcionAtaqueJugador
                let opcionAtaqueEnemigo = `<p> ${ataquesEnemigo[i]} </p>`
                sectionAtaquesEnemigo.innerHTML += opcionAtaqueEnemigo
                victoriasJugador += resultadoParcial[0]
                victoriasEnemigo += resultadoParcial[1]

            }

Esto teniendo en cuenta que mi funci贸n de batalla devuelve un array
posici贸n 0: 1 si gan贸 el jugador o 0 si fue empate o gan贸 el enemigo
posici贸n 1: 1 si gan贸 el enemigo o 0 si fue empate o gan贸 el jugador
posici贸n 2: String con 鈥淕anaste鈥, 鈥淧erdiste鈥 o 鈥淓mpate鈥 seg煤n el caso

function batalla(jugador1, jugador2){
    if (jugador1 ==jugador2){
    return([0,0,'EMPATE 馃'])
} else if((jugador1 =="Fuego" && jugador2 =="Tierra")||
         (jugador1 =="Agua" && jugador2 =="Fuego")||
         (jugador1 =="Tierra" && jugador2 =="Agua")){

    return([1,0,'GANASTE 馃帀馃コ'])
        }else{
            
        return([0,1,'PERDISTE 馃樋馃挃'])
        }
}

function combate () {

for (let index = 0; index < ataqueJugador.length; index++) 
   if(ataqueJugador[index] == ataqueEnemigo[index]) {
        indexAmbosOponentes (index, index)
        crearMensaje("EMPATE")
        //desafio completado
   }else if (ataqueJugador[index] > ataqueEnemigo[index]){
    indexAmbosOponentes (index, index)
    crearMensaje("GANASTE")
    vidasEnemigos--
    spanVidasEnemigos.innerHTML = vidasEnemigos  
   }else {
    indexAmbosOponentes (index, index)
    crearMensaje("PERDISTE")
    vidasJugador--
    spanVidasJugador.innerHTML = vidasJugador 
}
revisarVidas()

}

Se que la probabilidad es baja que ayuden a responder 馃槄 pero 驴alguien sabe porque el array que guarda los ataques 鈥渉asta 5鈥 solo sigue alimentando con los dos botones que agregamos? 驴si se supone que son el mismo?
Si encuentro la respuesta espero acordarme a venir a dejarla 馃槄

Supongo que la l贸gica es m谩s para cuando va a ser multiplayer, y de paso contra el pc. Que locura enlazar tantas cosas en la cabeza y m谩s si toca esperar hasta el final para ver realmente que quiere generar 馃槄

Ya estoy desvi谩ndome, porque decid铆 continuar las clases sin antes corregir el error de que al presionar cualquier ataque, la consola s贸lo me imprime 鈥楾IERRA鈥, y hasta este punto veo obligatoriamente que debo corregir eso, porque as铆 nunca voy a perder, siempre ser谩 empate ya que el jugador y el enemigo s贸lo atacan con 鈥楾IERRA鈥, aunque est茅 d谩ndole al bot贸n de agua o fuego.

Hasta estas clases s贸lo voy avanzando por llevarle el ritmo al profe, pero no es que est茅 entendiendo lo que hago del todo, por eso no he podido corregirlo y no s茅 c贸mo me pueda ayudar alguien aqu铆.

Reto cumplido y arreglo de los bugs faltantes como

  • Elemento seleccionar, si no se elige un animal se reiniciara hasta que se escoja alguna opci贸n
  • Que se muestren todos los ataques, no solo el primero, con cada validaci贸n se entra en una nueva funci贸n que muestra el mensaje actual de fuego tierra etc
  • El reto de validar si el ataque dado gana o se pierde era igual que la anterior pero ahora se valida es con un array
  • Cree una logica para que cada animal tenga una vida diferente, entonces en el constructo le agrege el elemento vida, y cuando se seleccionara un animal este tendria la vida del mokepon elegido, se tubo que borrar la vida que estaba contenida en el html y este valor lo pondr铆a en la mitad del juego cuando ya tanto el jugador como el enemigo escogieran una mascota

Se acuerdan del 5 que era una cantidad de los elementos del array ja que creen esa monda tambi茅n se puede automatizar pillen
En resumen se crea un ciclo con la cantidad de elementos existentes en este caso son 3 pokemones, durante ese ciclo se verifica que la selecci贸n del jugador sea igual al elemento del array seleccionado cuando este valor es valido se verifica si su contenido llega al limite se ejecute la funci贸n

alguien mas se dio cuenta de que la mascota enemiga y sus ataques no coinciden pens茅 que solo era en mi c贸digo pero viendo la clase me di cuenta de que a el tambi茅n le pasa aunque escojan la misma mascota los ataques del enemigo no coinciden con la mascota

me paso factura el ponerle nombres diferentes a las variables pero me ayuda a estar mas atento a mi c贸digo y no solo copiar el de el

Emmm, lo intent茅, pero ahaora no me sale el boton de reiniciar xD

function combate(){  
    for (let index = 0; index < ataqueJugador.length; index++) {
        if(ataqueJugador[index] === ataqueEnemigo[index]){
            indexAmbosOponentes(index, index)
            crearMensaje("EMPATE")
        } else if(ataqueJugador[index] == 'FUEGO' && ataqueEnemigo[index] == 'TIERRA' || ataqueJugador[index] == 'TIERRA' && ataqueEnemigo[index] == 'AGUA' || ataqueJugador[index] == 'AGUA' && ataqueEnemigo[index] == 'FUEGO'){
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE")}
            else{crearMensaje("PERDISTE")}
    }
}

Siento que los ataques pudieron haberse creado con una clase en la cual le podriamos indicar los ataques a los que son debiles y asi hacer una validacion parecida a esta

 const weakUser = attacks.getbyName(ataqueJugador).weak;
    const winPC = weakUser.some((attack) => {
        return attack === ataqueEnemigo;
    });
    ++turno;
    if (!winPC && ataqueJugador !== ataqueEnemigo) {
        changeLife('pcPetLife');
        return 'ganaste';
    } else if (ataqueJugador === ataqueEnemigo) {
        return 'empate';
    } else {
        changeLife('yourPetLife');
        return 'perdiste';
    }

Lo del reto

me encanta las clases. all铆 dec铆a b谩sico, pero ahora se vuelve muy interesante 鈥
隆Cada d铆a es una nueva oportunidad para aprender algo nuevo y crecer como persona! No importa cu谩n dif铆cil pueda parecer un desaf铆o, siempre hay una manera de superarlo.

Genial鈥!

Asi es que lo hice yo 馃槂 despues de estar un poco enredado y tener un error en un boton, me siento feliz de poder hacer esto yo solo y que funciona

function combate(){

    for (let index = 0; index < ataqueJugador.length; index++) {
        if(ataqueJugador[index] == ataqueEnemigo[index]) {
            indexAmbosOponentes(index, index)
            crearMensaje("EMPATE馃ぁ")
        } else if (ataqueJugador[index] == "FUEGO馃敟" && ataqueEnemigo[index] == "TIERRA馃尡") {
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE馃")
            vidasEnemigo--
            spanVidasEnemigo.innerHTML = vidasEnemigo
        } else if (ataqueJugador[index] == "AGUA馃挧" && ataqueEnemigo[index] == "FUEGO馃敟") {
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE馃")
            vidasEnemigo--
            spanVidasEnemigo.innerHTML = vidasEnemigo
        } else if (ataqueJugador[index] == "TIERRA馃尡" && ataqueEnemigo[index] == "AGUA馃挧") {
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE馃")
            vidasEnemigo--
            spanVidasEnemigo.innerHTML = vidasEnemigo
        } else {
            indexAmbosOponentes(index, index)
            crearMensaje("PERDISTE馃")
            vidasJugador--
            spanVidasJugador.innerHTML = vidasJugador
        }
        
    }
    revisarVidas()
}

lo logre 馃槃 ya pase todo de vidas a victorias he ice que el combate funcionara, lo unico es que no logro aun que muestre todos los ataques solo muestra lo 煤ltimo seleccionado :'u

Desde mi punto de vista creo que hubiera sido mas f谩cil y entendible si se hubiera hecho todo este nuevo c贸digo en contraste con el anterior, en lugar de ir borrando y moviendo todo, es muy f谩cil perderse, en lo personal estoy entendiendo todo pero mi c贸digo ya no funciona desde hace 2 clases jajaja

Por alguna razon me daba error con la siguiente funcion :

function seleccionarMascotaEnemigo() {
    const mascotaAleatorio = aleatorio(0,mokepones.length -1)
    spanMascotaEnemigo.innerHTML = mokepones[mascotaAleatorio].nombre

    ataquesMokeponEnemigo = mokepones[mascotaAleatorio].ataques
    secuenciaAtaque()
}

No s茅 porque al poner el 鈥;鈥 en spanMascotaEnemigo.innerHTML = mokepones[mascotaAleatorio].nombre; se quitaba el error, alguien me lo puede explicar, no entiendo, yo hice tal cual la clase

Buenas noches
Comparto mi soluci贸n del reto as铆 me quedo

y el c贸digo lo valide con estas dos funciones

Al final el c贸digo se perdi贸 todo y se desorden贸 quedando en mi opini贸n muy poco 鈥渙ptimizado鈥

Esta fue mi soluci贸n del peque帽o reto:

Y este es el c贸digo:

[](

Estuve cacharreando un tiempo para hacer las siguientes mejoras:

  • Determinar la mascota del enemigo y seleccionar los ataques
  • Solo seleccionar los ataques de la mascota del enemigo
  • Iluminar el boton de ataque del enemigo del momento
  • Si ya se utilizo el boton del enemigo, seleccionar otro boton
  • Mostrar los resultados del combate
    Aqui unos apartados:
function selectAttackEnemy() {
    //  Debemos buscar en los botoles del enemigo uno con el ataque    
    let buttonSelectEnemy = document.getElementsByName("attacksenemy")
    let attackEnemyNumber

    let freeArray = false
    while (freeArray === false) {
        attackEnemyNumber = random(1, 5);

        // Para que lo ubique en el array correctamente        
        attackEnemyNumber = attackEnemyNumber - 1;

        if (buttonSelectEnemy[attackEnemyNumber].title != 'XXXX') {
            freeArray = true
        }
    }

    // Leo el array, para traer todos los ataques
    attackEnemy = ContainArrayAttacksEnemy[attackEnemyNumber];

    arrayAttackEnemy.push(attackEnemy.title)
    idAttackEnemyCombat.innerHTML = attackEnemy.title

    buttonSelectEnemy[attackEnemyNumber].style.background = '#8a2be2'
    buttonSelectEnemy[attackEnemyNumber].title = 'XXXX' //Para que ese boton no lo vuelva a colorear
}

```![](![pet.png](https://static.platzi.com/media/user_upload/pet-a87491c0-f97d-4d76-a0de-574b4e679175.jpg)

馃挃 C贸mo cuando mi c贸digo est谩 roto, al igual que mi coraz贸n 馃槶

Es mucha informaci贸n, quiz谩s deber铆an dividir el curso de programaci贸n b谩sica, en vez de tener 84 clases juntas

Presento mi soluci贸n 馃榿

Hice una peque帽a modificaci贸n en mi funci贸n iniciarPelea().
Utilic茅 dos variables en la validaci贸n, lo que hace el c贸digo un poco m谩s escalable, debido a que es una modificaci贸n menos que se har铆a indistintamente si la cantidad de ataques cambia a 10, 20, 50, etc.:

function inicioataque() {
    if (ataqueJug.length == ataquesMascota.length) {
        verificarataques()
    }
}

Algo que pueden hacer es llamar mejor a las variables, a mi parecer es mejor poner ataques y no ataque, ya que ponerlo en plural da a entender que son varios y por ende una lista, en este caso los ataques pero sirve para cualquier c贸digo que est茅n desarrollando

Es increible la forma en que se utiliza los codigos de ciclo 鈥渇or鈥 para establecer un listado de variables declaradas en un videojuego. Sigo impresionado. Si asi se optimiza o se trabaja un codigo en el trabajo, se nota que me faltaba esa parte cuando empece.

Creamos nueva funci贸n con nuevas variables para asignarle a sus variables el resultado de index que seria un numero y luego estas variables las hacemos globales y de tipo let para que que vaya modificando su contenido(numeros), para poder usarlas despu茅s.