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

Visual Studio Code

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

Aportes 12

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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.

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

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

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

}

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.

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.

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

}

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]

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

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

Yo en la secci贸n d贸nde mostramos el mokepon del jugador y del enemigo agregue las vidas de los mokepones en sus respectivas variables vidasJugador y vidasMokepones, a partir de eso, as铆 fue como desarroll茅 el reto:

Ahora, me muestra las vidas de los mokepones al inicio del combate y al final del mismo, me muestra las vidas que les quedaron, el resultado final del combate y me inhabilita los botones de ataque.

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