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

Reiniciando el juego

30/84
Recursos

Aportes 29

Preguntas 11

Ordenar por:

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

El object location es parte de algo que algunas personas conocen como BOM (Browser Object Modal), que se diferencia del DOM.

Si bien esto no esta estandarizado (por ejemplo no lo encontrar谩s en la MDN) a mi parecer es una buena manera de entenderlo.

Al final preceden de window

Les dejo este excelente recurso que ahonda m谩s en este tema.

DOM & BOM Revisited

Apliqu茅 disabled para cuando el jugador seleccione una mascota, no le de opci贸n de seguir cambiando

Este objeto, el cual puede utilizarse sin el prefijo window, nos sirve tanto para obtener la url o parte de ella, de la web donde nos encontramos como para redireccionarnos hacia otra p谩gina. 馃槑馃槑

esto es lo que hice antes de ver la soluci贸n del profe

A si va quedando

Cre茅 una nueva funci贸n para que aparezca el bot贸n de reiniciar con el mensaje final (as铆 no tenerlo desde un principio).

Mi forma de resolver este reto fue al utilizar la propiedad disabled para desactivar los botones justo despues de que se conoce si se perdio o se gano, es decir dentro de la funci贸n revisaVidas

function revisarVidas() {
    if(vidasEnemigo == 0){
        crearMensajeFinal("FELICITACIONES GANASTE鉁");
        botonFuego.disabled = true;
        botonAgua.disabled = true;
        botonTierra.disabled = true;
    } else if(vidasJugador == 0) {
        crearMensajeFinal("UPS, LASTIMOSAMENTE PERDISTE馃槳");
        botonFuego.disabled = true;
        botonAgua.disabled = true;
        botonTierra.disabled = true;
    }
};```



![plat.jpg](https://static.platzi.com/media/user_upload/plat-d7496e19-6d13-4372-8db8-5f7664372040.jpg)

el profe hace preguntan que te replantean la vida,. duere como 1 hora pensando, como reiniciar el juego

Yo para que los botones de los ataques no funcionen una vez llegado a 鈥0鈥 hice esto:

function combate() {
    
    let spanVidasJugador = document.getElementById("vidas-jugador")
    let spanVidasEnemigo = document.getElementById("vidas-enemigo")

  if (vidasEnemigo > 0 && vidasJugador > 0) {
    
    if (ataqueEnemigo == ataqueJugador) {
      crearMensaje("馃EMPATE馃");
      ;
    } else if (
      (ataqueJugador == "FUEGO馃敟" && ataqueEnemigo == "PLANTA馃崈") ||
      (ataqueJugador == "AGUA馃挦" && ataqueEnemigo == "FUEGO馃敟") ||
      (ataqueJugador == "PLANTA馃崈" && ataqueEnemigo == "AGUA馃挦")
    ) {
      crearMensaje("馃弳GANASTE!!馃弳");
      vidasEnemigo--
      spanVidasEnemigo.innerHTML = vidasEnemigo
      ;
    } else {
      crearMensaje("馃槩 PERDISTE No te Desanimes 馃槩")
      vidasJugador--
      spanVidasJugador.innerHTML = vidasJugador;
      ;
    }
    revisarVidas()
  }

Y yo que estaba reiniciando todo manualmente para luego el profe mostrar que se hacia con una sola linea 馃槮 jsjsj

Adicionalmente, para controlar la activacion de los botones, se puede crear una funci贸n que reciba como parametro true o false. True para desactivarlos, false para activarlos.

/**
 * Cambia el estado de los botones de ataque, si est谩n habilitados los deshabilita y viceversa.
 */
function estaDesactivadoBotonesAtaque(estado) {
    botonFuego.disabled = estado;
    botonAgua.disabled = estado;
    botonTierra.disabled = estado;
}

Asi va quedando mi version, quiero poner dos opciones mas de personaje (cada personaje tiene diferentes estad铆sticas).
sume m谩s elementos y cada elemento tiene 5 ataques con diferente da帽o y curaci贸n(la curaci贸n s贸lo afecta el escudo).

estoy seguro que cuando le meta css quedar谩 m谩s bonito, adem谩s quiero hacer unas cards para cada personaje y para cada ataque :3

Asi va quedando:

Pens茅 que iba a hacer una nueva funci贸n donde volviera a poner los valores iniciales de las vidas, deschequeara la mascota seleccionada y borrara el historial de combate pero mandar a recargar la p谩gina se ve mucho m谩s pr谩ctico XD

para mi en la function revisar vidas

Me quedo asi, al pausar la clase fui a buscar documentacion y puesss, asi quedo 馃槃

function validacionVidas() {
  if (vidasIA == 0) {
    mensajeFinal("隆Ganaste el Combate!")
    apagarBotones()
  } else if (vidasPlayer == 0) {
    mensajeFinal("Perdiste...")
    apagarBotones()
  }
}

function apagarBotones() {
  let btnFire = document.getElementById("btn-fire")
  btnFire.disabled = true
  let btnWater = document.getElementById("btn-water")
  btnWater.disabled = true
  let btnEarth = document.getElementById("btn-earth")
  btnEarth.disabled = true
}

yo en vez de utilizar el location reload, reinicie todas las variables que utilize para validar que se haya acabado la partida, otra que utilize para mostrar en que turno estoy y otra para que no pueda elegir una mascota despues de haver una elegido una:

function reiniciar()
{
    contador_vida_mascota_jugador = 3;//resetea los contadores de las vidas
    contador_vida_mascota_enemigo = 3;
    turno = 1;//resetea el turno inicial
    seleccionar = 1;//variable para que no vuelva a seleccionar otro personaje salvo a reset
    fin = 0;//resetea el fin del juego para que tengas que presionar resetear
    alert("Reiniciando");
    let section_mensajes = document.getElementById("mensajes");
    section_mensajes.innerHTML = " ";
}

Esta es mi opci贸n para el boton de reinicio. Todavia no vi el m茅todo nuevo del profe. Me falta aun, borrar los mensajes de las batallas鈥

function reiniciarJuego (){
let spanVidasJugador = document.getElementById(鈥榲idas-jugador鈥)
let spanVidasEnemigo = document.getElementById(鈥榲idas-enemigo鈥)
vidasJugador = 3
vidasEnemigo = 3
spanVidasEnemigo.innerHTML = vidasEnemigo
spanVidasJugador.innerHTML = vidasJugador
}

Lo que yo hice fue que en la funci贸n reservas vidas al final de cada condici贸n inserte el location.reload() y as铆 cada vez que pierdo o gano se reinicia autom谩ticamente

function revisarvidas(){
    if  (VidasRival == 0){
        alert("FELICIDADES HAS GANADO!! 馃巼鉁煄夝煄婐煄")
        crearMensajefinal("FELICIDADES HAS GANADO!! 馃巼鉁煄夝煄婐煄")
        location.reload()
    } else if(VidasPropia == 0){
        alert("HAS PERDIDO 馃槬馃槬")
        crearMensajefinal("HAS PERDIDO 馃槬馃槬")
        location.reload()

    }
}

lo hice solo un poco diferente

function combate(){
    resultado = ''
    let spamvidasJugador = document.getElementById('vidas-jugador')
    let spamvidasEnemigo = document.getElementById('vidas-ememigo')
    if (ataqueJugador == ataqueEnemigo) {
        resultado = 'EMPATASTE'
    } else if ((ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA')) {
        resultado = 'GANASTE'
        spamvidasEnemigo.innerHTML = vidasEnemigo = vidasEnemigo -1
    } else if ((ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO')) {
        resultado = 'GANASTE'   
        spamvidasEnemigo.innerHTML = vidasEnemigo = vidasEnemigo -1       
    } else if ((ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA')) {
        resultado = 'GANASTE'   
        spamvidasEnemigo.innerHTML = vidasEnemigo = vidasEnemigo -1     
    } else {
        resultado = 'PERDISTE'
        spamvidasJugador.innerHTML = vidasJugador = vidasJugador -1
    }
    
    crearMensaje()
 }

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

    revisarVidas()
}
function revisarVidas() {
    if (vidasEnemigo == 0) {
      crearMensajeFinal('FELICITACIONES!!!!! Ganaste ')
    } else if (vidasJugador == 0) {
      crearMensajeFinal('LO SIENTO MUCHO!!!! Perdiste ')
    }
  }
function crearMensajeFinal(resultadoFinal) {
    let seccion = document.getElementById('mensajes')
    let parrafo = document.createElement('p')
    parrafo.innerHTML = resultadoFinal;
    seccion.appendChild(parrafo);
    document.getElementById('boton-fuego').disabled = true
    document.getElementById('boton-agua').disabled = true
    document.getElementById('boton-tierra').disabled = true
  }

Reutilic茅 lo que nos ense帽贸 para inhabilitar los botones tambi茅n al elegir la mascota, justo despu茅s de seleccionar a tu mascota ya no puedes cambiarla

lo agregu茅 en la funci贸n de seleccion de la mascota del enemigo

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'
    }
    let botonMascotaJugador = document.getElementById('boton-mascotas')
    botonMascotaJugador.disabled = true
}

como los botones ya fueron extraidos del document en las lineas de arriba, solo puse los nombres de los botones con su propiedad .disabled = true

<code> 
 botonMascota.disabled = true
    botonAgua.disabled = true
    botonFuego.disabled = true
    botonTierra.disabled = true
</code>

Yo lo que hice fue mover de lugar las variables de los botones a la funci贸n seleccionarMascotaEnemigo()

Yo cree una funci贸n llamada bloquearAtaques, donde use las variables de botones con su respectivo id, para ponerle con la condici贸n de si la vidas del enemigo o jugador sean 0 se bloqueara los botones de ataques, con su respectivo llamado hacia finalizar el combate.

location.reload()

Lo consegui utilizando esto:

<location.reload()> 

Esto si estaba difiicil 馃槮

que bueno nunca habia visto esto 馃槵

A forma de criterio constructivo, estaria bueno poder iniciar con los botones de ataque en disabled TRUE y que pasen a disabled FALSE cuando ya se elija las mascotas. Del caso contrario no estariamos obligando a el usuario a que elija la mascota y este va a poder atacar sin elegir.
A modo de sugerencia鈥
A menos que eso sea una tarea para nosotros 馃槓

yo hice esto asi, cada que chekeamos una mascota y le damos en el boton de 鈥渟eleccionar鈥 autom谩ticamente se deshabiliten los otros radio de checked.


        if(radioHipodoge.checked){
            spanMascotaJugador.innerHTML = "<b>Hipodoge</b>";
            radioCapipepo.disabled = true
            radioRatigueya.disabled = true
        }else if(radioCapipepo.checked){
            spanMascotaJugador.innerHTML = "<b>Capipepo</b>";
            radioHipodoge.disabled = true
            radioRatigueya.disabled = true
        }else if(radioRatigueya.checked){
            spanMascotaJugador.innerHTML = "<b>Ratigueya</b>";
            radioHipodoge.disabled = true
            radioCapipepo.disabled = true
        }else{
            alert("selecciona una mascota pliz :D");   
        }