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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
16H
49M
27S

Eventos de click din谩micos

56/84
Recursos

Luego de que el usuario de tu videojuego haya seleccionado un mokepon para jugar, la l贸gica interna de la aplicaci贸n requiere capturar los ataques del personaje y renderizarlos hacia el HTML para que el usuario pueda interactuar con los botones.

Renderizado de los ataques

Comienza creando un <div> en el HTML y seleccionando el mismo desde el Javascript donde renderizaremos cada bot贸n de ataque del mokepon seleccionado.

<div id="contenedorAtaques" class="tarjetas-ataques">
</div>
const contenedorAtaques = document.getElementById('contenedorAtaques');

Luego de haber capturado los ataques del mokep贸n seleccionado en la funci贸n extraerAtaques(), env铆a esta informaci贸n a una nueva funci贸n llamada mostrarAtaques() donde crearemos el c贸digo HTML.

function extraerAtaques(mascotaJugador) {
    // ...
    mostrarAtaques(ataques)
}
function mostrarAtaques(ataques) {
    ataques.forEach((ataque) => {
        ataquesMokepon = `
            <button id=${ataque.id} class="boton-de-ataque">
                ${ataque.nombre}
            </button>
        `;
        // Renderizamos cada ataque del personaje
        contenedorAtaques.innerHTML += ataquesMokepon;
    });
    
    // Seleccionar botones luego de crearlos
    botonFuego = document.getElementById('boton-fuego');
    botonAgua = document.getElementById('boton-agua');
    botonTierra = document.getElementById('boton-tierra');

    // Agregar evento a los botones
    botonFuego.addEventListener('click', ataqueFuego);
    botonAgua.addEventListener('click', ataqueAgua);
    botonTierra.addEventListener('click', ataqueTierra);
}

Al crear el c贸digo nuevo c贸digo HTML para cada bot贸n de los ataques del mokepon, tienes que tener en cuenta que debes seleccionar los mismos con document.getElementById() y posteriormente agregarle el evento al hacer clic con addEventListener().

Aseg煤rate tambi茅n de borrar el c贸digo que tu aplicaci贸n ya no necesite, dado que ahora estamos creando c贸digo HTML din谩micamente. A diferencia de crear el c贸digo de forma est谩tica, es importante evaluar el momento de captura de los elementos HTML y su posterior asignaci贸n de eventos.


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

Aportes 167

Preguntas 82

Ordenar por:

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

o inicia sesi贸n.

COMO SE LLAMABA LA VARIABLE!!

Asi es como va aumentando la dificultad del curso:
Freddy: dificultad nivel 1
Juan: dificultad nivel 3
Estefany: dificultad nivel 5
Diego: dificultad nivel 1847
pero no me rendir茅鈥

Cap铆tulo UNO del curso de programaci贸n b谩sica:

.
.
.
Capitulo CINCUENTA Y SEIS del curso de programaci贸n b谩sica:

Les soy sincero, entendi todo lo que hizo, incluso me salio al pie del ca帽on!, peroooooo鈥 si tengo q hacerlo por propia logica mia en alguna actividad totalmente diferente, dudo poder lograrlo!

y la verdad me ofusca de sobre manera saber q no voy a poder hacerlo solo!

el nivel de comprensi贸n est谩 aumentando exponencialmente para tratarse de un curso b谩sico D: no me rendir茅!!

Es verdad cuando dicen que la programaci贸n es frustrante, pas茅 tres horas buscando un error que simplemente era un espacio en blanco que no deb铆a estar.

aqu铆 estoy llorando, pero no me rend铆.

Les dejo esto para que no les pase lo mismo que a mi鈥
Al momento de comparar los botones con el texto del bot贸n no me coincid铆an, el problema era que tenia un espacio en blanco al inicio del texto de identificaci贸n de cada bot贸n鈥

la correcci贸n es s煤per f谩cil, pero me rompi贸 la cabeza encantararla jejeje

simplemente erra eliminar el espacio, para que al momento de comparar el click del bot贸n con la palabra Agua, Fuego o tierra Consideran en el if(e.target.textContent == 脕gua鈥)

en el: e.target.textContent cuando esta malo me sal铆a
" Agua" al corregirlo 鈥淎gua鈥 sin el espacio en blanco

Ya en este punto el curso se pone mas intenso y complejo, sin embargo, es muy satisfactorio notar que estamos aprendiendo y que le damos vida al juego de diferentes maneras.

Qu茅 se hace en esta clase:

  1. Se guardan en un array los 5 botones creados (recordemos que los bot贸nes ser谩n distintos de acuerdo al mokep贸n seleccionado)
    • A trav茅s de botones = document.querySelectorAll('.b-ataque')
  2. Se crea una funci贸n que va a iterar (recorrer) cada uno de los botones guardados en el array y les agregar谩 un escuhador de eventos
    • Para la iteraci贸n se usa el m茅todo forEach del array botones.forEach((boton) => { }
    • Para que el escuchador de eventos sea d铆namico se hace una validaci贸n dentro del mismo usando boton.addEventListener('click', (e) => { if (Condici贸n) {c贸digo} })
  3. Se inyecta en una array nuevo el orden de los ataques seleccionados
    • A trav茅s de ataqueJugador.push('ATAQUE_SELECCIONADO')

Por si al ustedes buscar la propiedad textContent en el console no les aparece, como fue mi caso, tambien pueden buscar la propiedad innerText, y reemplazarla, a mi no me aparec铆a textContent, y al querer usarla me daba error, entonces us茅 innerText y la funci贸n funciona :v jaja. ![]()

Por si los ocupas:

馃敟
馃挧
馃尡

A todos los que les de el error del ataque que se queda pegado en TIERRA. Esto se debe a haber dejado un espacio en blanco al momento de crear el bot贸n, despues de la variable nombre. Entre ${ataque.nombre}</button>, no debe ir ning煤n espacio. Entonces cuando hace el IF jam谩s va a coincidir FUEGO o AGUA, porque estas comparando 鈥橉煍モ con '馃敟 '. Siempre va ir a parar al 鈥渆lse鈥, es decir a la TIERRA. Hay lugares donde dejar espacios no tiene ninguna importancia, pero otros donde un simple espacio te puede romper todo el c贸digo. Saludos !

Estube apunto de perder los pelos jajajaaj, por alguna razon al momento de validar los ataques que se guardaban en el array, al darle al primer boton de agua (de hipodoge) en el console log me marcaba que elegi tierra jajaja, resulta que al momento de declarar los ataques de cada mokepon, por accidente puse 2 espacios entre caracteres jajaja, siempre tengan cuidado, los espacios tambien cuentan 馃憖馃憖
![]()

Excelente curso, a los que dicen que se pasaron un poco, pues tengo una opini贸n, es un curso de introducci贸n y est谩n tratando de crear un juego desde cero y lo mas sencillo, solo puedo decir que es sublime el trabajo que est谩n haciendo y cr茅anme que esta muy resumido, normalmente meter tantos temas conlleva mucho mas tiempo y eso le da mucho merito al curso.

y pues si, es dif铆cil de seguir para alguien que no tiene experiencia previa pero tambi茅n tengamos en cuenta que para alguien que viene de cero es una mina de oro conocer aunque sea de forma resumida tantos temas, es una introducci贸n larga pero funciona en ir a maquetado, estilizado, interactividad y creo que le implementan hasta backend, el curso esta mas que perfecto

solo les recuerdo que el aprender algo no es una carrera que el primero que llegue es el ganador, ES UNA MARAT脫N, donde todo el que termine la carrera es un ganador, si es dif铆cil, respiren, jueguen un rato y luego contin煤en, disfruten del curso, que es excelente y pues no vayan con prisa, vayan con calidad.

Mucha suerte a todos!!

A m铆 personalmente me desconcentra mucho, que cometa tantos errores de digitaci贸n, me distrae, deber铆an permitir a cada profesor llevar su teclado propio o usar su propio computador. No s茅 porque se enreda tanto al escribir y la explicaci贸n me toco repetir varios videos para entender 馃槮

Creo que hubiese sido interesante que, antes de ponerse a hacer todas las modificaciones en el c贸digo, hubiesen explicado a que se quer铆a llegar concretamente. Es decir, mostrar un bosquejo de como se quiere que sea el nuevo funcionamiento y aspecto del juego. Porque as铆 no entendemos por qu茅 se hacen las cosas hasta que vemos el resultado final, y es bastante confuso.

Cada vez que Diego agrega una nueva linea o concepto. Esta clase estuvo potente.

El profe Jorge utiliza mucho la palabra parse y significa:

鈥淧arsing鈥 significa analizar y convertir un programa en un formato interno que un entorno de ejecuci贸n pueda realmente ejecutar, por ejemplo el motor JavaScript dentro de los navegadores.

Fuente: https://developer.mozilla.org/es/docs/Glossary/Parse

Esta clase estuvo heavy! :鈥(

si asi es el b谩sico, como ser谩 el avanzado. no se rindan鈥

Siempre me imprimia TIERRA pero lo solucione dejando espacios a los lados de los emoji:


e.target.textContent === ' 馃敟 '
e.target.textContent === ' 馃挧 '

Ser铆a buen铆simo que explicaran qu茅 es lo que se espera de estas funciones, pues para dejarnos los mini retos debemos entender qu茅 es lo que se quiere hacer, personalmente tuve que adelantar la soluciones de los videos de los botones de ataque y bueno este iba igual y ya adelantado el video se entendi贸 m谩s claramente que es lo que se iba a hacer.

Termin茅 hasta aqu铆, deshabilitando los botones para que s贸lo sean cinco ataques y no m谩s, pero no s茅 si despu茅s se vayan a usar鈥

Al igual que a muchos, mi c贸digo no le铆a el evento (e), aun as铆 lo reemplazara por el 鈥淓vent鈥 que sugiri贸 Zoe.

Mi soluci贸n fue subir el llamado a la funci贸n secuenciaAtaque () al final de la funci贸n seleccionarMascotJugador() del seleccionarMascotaEnemigo() que propone la clase, con eso el c贸digo reconoci贸 todo lo programado en esta y clases pasadas.

Lo comparto por si le sirve a alguien
No se rindan y sigamos aprendiendo!

Siento que este curso, o al menos en este bloque con Diego es demasiado heavy para ser de los primeros cursos de la ruta. De hecho he tomado varios cursos y entiendo ciertas cosas pero teniendo conocimiento previo aun asi es dificil de entener, no me imagino a alguien que esta empezando 鈥渄e cero鈥 a ver este curso 鈥渄e programacion basica鈥

amazing el curso

El profesor escribe " === " y no " == " al momento de la validaci贸n porque 茅l est谩 usando el operador de igualdad estricta. Les comparto este link para que puedan leer m谩s sobre este y ver algunos ejemplos. 鉃★笍 https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Strict_equality

tomense un shot cada vez que diego escriba un + en lugar de un =

Repite el video cuantas veces sea necesario, demorate, comprende, utilizalo y vence.

Si no les funciona bien la parte de e.target.textContent prueben con e.target.innerText y con las comillas dobles " ", me estaba fallando esto y lo solucion茅 cambiando a innerText

el que explica aprende 2 veces

Al final solo vamos a tener 5 ataques para usar 1 por cada turno. Aqui las 3 vidas no estan siendo tomadas.

pasos de esta clase:
1-capturar y guardar cada boton de html generado en array botones.
2-por cada elemento del array botones crear el evento CLICK (el evento CLICK es un objeto con propiedades)
3-validar que 馃挧 o 馃敟 o 馃尡 est茅 dentro de textCont que a su vez est谩 dentro de target y dentro del evento/objeto CLICK, para asi ir llenando el array ataqueJugador con AGUA FUEGO O TIERRA respectivamente.
4-montrar en la consola del navegador lo que va teniendo el array ataqueJugador.
5-cambiar color de fondo del boton al ser usado.

驴A poco no? 馃ぃ

Quiz谩s Diego De Granda no sea el profesor m谩s gracioso como Freddy o carism谩tico como Juan, pero no me cabe duda que es de los mejores profesores de Platzi, clase que da clase que entiendes.

Aqu铆 te presento una lista sencilla de algunos grupos de m茅todos de JavaScript:
.

  • M茅todos de selecci贸n de elementos HTML: Permiten seleccionar elementos HTML del documento, como document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), document.querySelector(), document.querySelectorAll(), entre otros.
    .
  • M茅todos de manipulaci贸n de contenido: Permiten manipular el contenido de los elementos HTML seleccionados, como innerHTML, textContent, setAttribute(), getAttribute(), removeAttribute(), appendChild(), removeChild(), entre otros.
    .
  • M茅todos de manipulaci贸n de estilos: Permiten manipular los estilos CSS de los elementos HTML seleccionados, como style.setProperty(), style.getPropertyValue(), classList.add(), classList.remove(), classList.toggle(), entre otros.
    .
  • M茅todos de eventos: Permiten agregar y remover eventos a los elementos HTML seleccionados, como addEventListener(), removeEventListener(), event.preventDefault(), event.stopPropagation(), entre otros.
    .
  • M茅todos de arrays: Permiten manipular arrays y sus elementos, como push(), pop(), shift(), unshift(), splice(), slice(), map(), filter(), reduce(), entre otros.
    .
  • M茅todos de objetos: Permiten manipular objetos y sus propiedades, como Object.keys(), Object.values(), Object.entries(), Object.assign(), Object.freeze(), Object.seal(), Object.create(), entre otros.

En la l铆nea botones = document.querySelectorAll(鈥.BAtaque鈥) no se les olvide que antes de escribir BAtaque va un . (punto)

Me parece excelente el nivel que esta tomando este curso abierto de programacion, ya que al principio era todo divertido y de facil comprension, pero ahora el nivel ha aumentado a tal punto que ya no es un curso basico de programacion y que mucha gente vea este curso de manera gratis y explicada me parece excelente

Vi comentarios que se desaniman por cometer errores. Pero eso siempre va a pasar. Sin ir mas lejos f铆jense que al mism铆simo Diego de Granda le pasa (Solo que ellos cortan y editan el video) pero noten esos detalles. Les puedo asegurar que 茅l se paso un buen rato buscando cual fue el error! Siempre pasa, solo hay que tenerlo en cuenta y luchar contra eso!

Porfe seria mas facil de entender si mantuviera la indentaci贸n 馃槮 馃槮 馃槮 馃槮 sus clases estan hardcore!!

Mejor idea hubiera sido empezar un proyecto nuevo. cambiar todo lo que ya existia como si no sirviera confunde mucho mas. No me gusta para nada el metodo empleado al final de este curso

Se me present贸 un problema con contentText ya que al colocar el la funci贸n para ver el nombre de cada bot贸n, unicamente imprim铆a la consola 鈥淭IERRA鈥,

y encontre una soluci贸n. Usar outerText, ya que al momento de colocarlo en el c贸digo y ver la web, funcion贸 : 馃馃馃鈥嶐煉

este curso esta genial

Y esto es programaci贸n b谩sica 馃拃馃

Le a帽ad铆: boton.disabled = true para que adem谩s de cambiar de color el bot贸n ya no est茅 activo, me qued贸 as铆:

function secuenciaAtaque() {
botones.forEach((boton) => {
boton.addEventListener(鈥榗lick鈥,(e)=>{
if(e.target.textContent =鈥橉煍モ){
ataqueJugador.push(鈥楩UEGO鈥)
console.log(ataqueJugador)
boton.style.background = '#112F58鈥
boton.disabled = true
} else if(e.target.textContent
=鈥橉煉р){
ataqueJugador.push(鈥楢GUA鈥)
console.log(ataqueJugador)
boton.style.background = '#112F58鈥
boton.disabled = true
} else{
ataqueJugador.push(鈥楾IERRA鈥)
console.log(ataqueJugador)
boton.style.background = '#112F58鈥
boton.disabled = true
}

    })
})

}

SOLO MIREN MIS COMMIT SE PUSE DIFICIL PERO NO ME RINDO

creo que se nos est谩 haciendo muy dif铆cil de entender a todos por que cuando pasamos con este nuevo maestro se dejaron de explicar punto a punto y eso es lo que nos ayudaba con los otros maestros, solo estamos copiando lo que hace el maestro pero no lo estamos entendiendo.

Javascript en la vida real 馃懝馃懝馃懝馃懞馃懞馃懞

USTEDES PUEDEN CREER QUE YO NO ENTENDI ABSOLUTAMENTE NADA XD

Lo siento鈥 En la 煤ltima clase se destruy贸 mi c贸digo y por m谩s que vi el video de nuevo y pas茅 horas y horas buscando el error, perd铆 la cabeza y鈥

Cada vez m谩s el curso va subiendo de dificultad, repasar las clases, ver los videos par de veces me ha ayudado a entender mejor que es lo que vamos haciendo.

En vez de cambiar el background puse para que el bot贸n se deshabilite

Me encant贸 esta clase! Resulta super 煤til querySelectorAll.
Le dejo un enlace a una explicaci贸n sencilla de estos selectores.
document.querySelector y document.querySelectorAll

Que denso esta esto

Porfabor recuerden que son importantes los espacios, las comillas simples y dobles

Me ha costado horas sacar los errores, como que no detectaba el evento, que no pod铆a ir a una variable o selecci贸nala, mismo que aparezcan los ataques en pantalla, ya no daba MAS!!! Pero lo que hice para solucionar esto fue, descargarme la carpeta de la ultima clase que av铆a visto, y en el visual estudio code los compare, para que yo viera lo que hice y lo que estaba escrito en el c贸digo del Js del curso (tambi茅n compare el HTML), me di cuenta que hab铆a EN MI CODIGO espacios donde no IVAN, que hab铆a comillas dobles donde no deber铆a, as铆 que comenc茅 a remplazar elementos y no me la puedo creer FUNCIONO!!! Mi codigo es el de Sonic Infinite, el del curso es el de los mokepones.![](

Yo tuve un problema con el array de los ataques del jugador, debido a que siempre me indicaba que era Tierra en todos los casos.

Le pregunt茅 a ChatGPT como solucionarlo y me sugiri贸 un c贸digo en el cu谩l se compare el id del elemento e.target con los identificadores de los botones de ataque (鈥榖oton-fuego鈥, 鈥榖oton-agua鈥, 鈥榖oton-tierra鈥) en lugar de comparar con el contenido de texto.

As铆 qued贸 mi c贸digo:

function secuenciaAtaque() {
    botones.forEach((boton) => {
        boton.addEventListener('click', (e) => {
            if (e.target.id === 'boton-fuego') {
                ataqueJugador.push('FUEGO');
                console.log(ataqueJugador);
                boton.style.background = '#112f58';
            } else if (e.target.id === 'boton-agua') {
                ataqueJugador.push('AGUA');
                console.log(ataqueJugador);
                boton.style.background = '#112f58';
            } else if (e.target.id === 'boton-tierra') {
                ataqueJugador.push('TIERRA');
                console.log(ataqueJugador);
                boton.style.background = '#112f58';
            }
            ataqueAleatorioEnemigo();
        });
    });
}

Deber铆a haber una opci贸n de LIKE a las clases
馃憤馃徎 like a esta clase 馃く

Si alguien les pregunta. Estoy en mi casa. jejeje

No se si a uds les pasa, que al dar click una vez sobre el ataque, la rutina del addEventListener la hace 2 veces鈥 muy extra帽o

馃挭 EY ES POSIBLE QUE EL 鈥渆鈥 no les devuelva ning煤n valor, a mi me funcion贸 llamandolo en la funci贸n de 鈥渕ostrar ataques鈥 en lugar de la de la clase

Hasta este punto es donde extra帽o solo usar pseudoc贸digo. Pero no me rendir茅.

Okey en mi caso yo no coloque emojis sino sus nombres literal Ejem: 鈥淎gua鈥, al principio tuve el mismo problema que la mayor铆a de aqu铆 que cuando daba click a un boton y le daba a varios siempre salia era TIERRA, mi solucion, luego de tanto ver comentarios de mis compa帽eros y pensar, volvi a hacer un console.log(), pero esta vez meti nuevamente el (e) para ver si realmente me aparecia el nombre por textContent o por InnerText, al percatarme que fue por InnerText lo que hice fue modificar el cont por inner y listo problema resuelto!! Ejemplo:
Antes: else if (e.target.textContent === 鈥淎gua鈥)
Ahota: elsse if(e.target.InnerText === 鈥淎gua鈥)

Por este espacio que agregu茅 en el ciclo forEach de ataques me aparec铆a que todos eran tierra lo quit茅 y todo funcion贸.

Es una percepci贸n muy personal pero esto no me parece que sea programaci贸n b谩sica. En este momento trato de digerir lo que hemos visto hasta ahora pero la verdad aun me es dif铆cil internalizar algunos conceptos de los que explica. Por otro lado el tema de los errores, se entiende que va a ser el d铆a a d铆a pero preferir铆a que este tipo de cosas se pudieran tratar con una did谩ctica distinta. Los cambios hacen que de cierta manera confundan mas a lo que empezamos desde cero. Ojo que no dudo de lo experto que es el Profe Diego pero lo que esta tratando de ense帽ar yo lo fuera puesto en niveles mas avanzados.

nivel de dificultad a este punto es de 1000 pero no me rendir茅 seguir茅 tratando de romper el algoritmo.

Fue una de las clases que m谩s me llev贸 tiempo buscando mis propios errores en algunas funciones pasadas, pero me siento orgulloso de mi al haber encontrado los fallos. Ahora existe un peque帽o detalle el bot贸n cambia de color, pero puedo seguir seleccionado muchos mas ataques. Lo he solucionado agregando la l铆nea boton.disabled = true

<code> 
function secuenciaAtaque() {
    botones.forEach((boton) => {
        boton.addEventListener('click', (e) => {
            if (e.target.textContent === '馃敟') {
                ataqueJugador.push('FUEGO')
                console.log(ataqueJugador)
                boton.style.background = '#112f58'  
                boton.disabled = true 
            } else if (e.target.textContent === '馃挧') {
                ataqueJugador.push('AGUA')
                console.log(ataqueJugador)
                boton.style.background = '#112f58'
                boton.disabled = true
            } else {
                ataqueJugador.push('TIERRA')
                console.log(ataqueJugador)
                boton.style.background = '#112f58'
                boton.disabled = true
            }
        })
    })
    ataqueAleatorioEnemigo()
}

Para los que hayan puesto una imagen encima del boton en vez de un texto, y quieran que el PointerEvent no reconozca la imagen sino solamente el boton, existe una propiedad en css llamada 鈥減ointer-events鈥 donde al ponerle

pointer-events: none

Anular谩 todos los Eventos del Puntero en ese elemento y seleccionar谩 en este caso solamente el boton.

鈥淧opulating鈥 es un t茅rmino com煤n en programaci贸n que se refiere a llenar una estructura de datos con valores. Por ejemplo, si tienes un array vac铆o y deseas llenarlo con n煤meros, puedes 鈥減opulate鈥 el array con esos valores.

document.querySelectorAll()
.
Este un m茅todo de JavaScript que devuelve una lista de todos los elementos que coinciden con un selector CSS especificado. La sintaxis de este m茅todo es la siguiente:

document.querySelectorAll(selectores);

Donde 鈥渟electores鈥 es una cadena de texto que contiene uno o m谩s selectores CSS separados por comas. Por ejemplo, para seleccionar todos los elementos p y h1 del documento, podemos usar el siguiente c贸digo:

var elementos = document.querySelectorAll("p, h1");

.
El m茅todo document.querySelectorAll() devuelve una lista de nodos llamada NodeList, que es similar a un array y contiene todos los elementos que coinciden con el selector CSS especificado. Podemos acceder a cada elemento en la lista utilizando su 铆ndice, como se hace con un array.
.
Una vez que tenemos la lista de elementos, podemos hacer operaciones en ellos, como cambiar su estilo, a帽adir o eliminar contenido, o manipular sus atributos.
.
Es importante tener en cuenta que document.querySelectorAll() devuelve todos los elementos que coinciden con el selector especificado, incluso si hay varios elementos con el mismo identificador. Tambi茅n es importante tener en cuenta que la lista de elementos devueltos por document.querySelectorAll() se actualiza din谩micamente si se agregan o eliminan elementos que coinciden con el selector especificado.

tuve que cambiar textContent por innerText, ya que en el array me arrojaba solo 鈥淭IERRA鈥.
algo que pude haber hecho mal?

function secuenciaAtaque() {
botones.forEach((boton) => {
boton.addEventListener(鈥渃lick鈥, (e) => {
if (e.target.innerText === 鈥滒煍モ) {
ataqueJugador.push(鈥淔UEGO鈥)
console.log(ataqueJugador)
boton.style.background = 鈥#112f58鈥
} else if (e.target.innerText === 鈥滒煉р) {
ataqueJugador.push(鈥淎GUA鈥)
console.log(ataqueJugador)
boton.style.background = 鈥#112f58鈥
} else {
ataqueJugador.push(鈥淭IERRA鈥)
console.log(ataqueJugador)
boton.style.background = 鈥#112f58鈥
}
})
})
}

Me tomo 2 d铆as terminar este modulo, la verdad que es todo un reto, al final nunca pude acceder al console.log(e) me segu铆a marcando error, sin embargo logr茅 hacer que los botones entren dentro del array y que cambien de color al seleccionarlos.

Es increible la forma en que se puede usar una funcion para pintar los elementos del JS. Me quede impresionado, sabiendo que solo se usa en un peque帽o juego. La verdad en una verdadera pagina web u otro viedojuego debe tener un monton de codigo que debe marear la verdad.

Al cambiar el codigo de la logica de Stefany, se debe implementar esta nueva logica.
Como es un curso basico era mejor dejarlo con los 3 botones de ataque y no 5, para no complicar las cosas

Quiero aportar en esta clase algo que me paso al momento de crear la secuencia de ataques.
En mi proceso, estuve buscando el target Text content , y no me aparecia la informacion ahi, sino que si me aparecia en Target.innerText . Probe y se me resolvio el problema. Lo comparto y quien tenga una observacion productiva para mi codigo, bienvenido sea:

function secuAtaques() {
botones.forEach((boton) => {
boton.addEventListener(鈥榗lick鈥, (e) => {
if (e.target.innerText ===鈥橉煍モ) {
ataqueJugador.push(鈥楩UEGO鈥)
console.log(ataqueJugador)
boton.style.background ="#112f58"
} else if (e.target.innerText ===鈥橉煉р) {
ataqueJugador.push(鈥楢GUA鈥)
console.log(ataqueJugador)
boton.style.background ="#112f58"
} else {
ataqueJugador.push(鈥楾IERRA鈥)
console.log(ataqueJugador)
boton.style.background ="#112f58"
}
ataqueAleatorioEnemigo()
})
})
}

Si quieren en vez del style.background, pongan de una vez el

boton.disable = true

As铆 queda deshabilitado el bot贸n luego de hundirlo

Me duele un poco ver que borre tantas l铆neas de c贸digo.

Cuando yo inici茅 en la programaci贸n me ense帽aron a no borrarlas sino comentarlas porque en un futuro se podr铆a revisar mejor cu谩les fueron los posibles errores (por ej: la clase anterior d贸nde se lleva el bot贸n de Reiniciar en vez del de Tierra y tiene que volver a copiar y pegar todo en su lugar nuevamente)

Sol铆a borrar todo lo comentado una vez finalizada la aplicaci贸n para dejar el c贸digo m谩s prolijo.

bueno vamos bien, excelente curso 馃懝

Despu茅s de ponerle el background tambi茅n podr铆amos ponerle 鈥渄isabled = true鈥 para que cuando se le de click a un bot贸n, este quede desactivado y no se le pueda volver a dar click

Al principio dije 鈥渏oder, si yo prefiero jugar con vidas que el mejor de 5 partidas鈥 luego pens茅 鈥減ues con tal de aprender, puedo crear un nuevo branch en github para esta versi贸n鈥 y problema resuelto ! Jeje. Recomendaci贸n: creen otra rama para esta clase y as铆 conserven el c贸digo anterior si lo prefieren en esos aspectos.

Realmente me sorprende el clavado en profundidad que ha tomado este curso, en lo m谩s m铆nimo parece programaci贸n b谩sica, a mi me agrada, me lleva a un contexto desde donde puedo ampliar, engordar digo yo, los conocimientos. Sigo adelante con m谩s ganas que nunca.
No pares de aprender dicen por ah铆.

Me esta costando una locura!! 馃槄

A este punto es mas complejo de entender, pero hay que darle esfuerzo, este profe es mas t茅cnico que los anteriores. 馃槈

El curso se esta poniendo bastante complejo y a veces me cuesta razonar estas cosas tan dinamica 馃ゴ

Recomiendo que despu茅s de agregarle el 鈥.style鈥 a los botones, agreguen tambi茅n un 鈥.disabled = true鈥 para que dicho bot贸n no vuelva a guardar nuevamente la informaci贸n del ataque en el arreglo.
Para que quede de esta manera:
" if (e.target.outerText === 馃敟) {
ataqueJugador.push(FUEGO);
console.log(ataqueJugador);
boton.style.background= linear-gradient(to bottom right, rgba(66, 6, 6, 0.5), rgba(71, 71, 4, 0.5))
boton.disabled = true;
}"

Agrego, en mi caso no aparec铆a como 鈥渢extContent鈥 la propiedad del contenido del bot贸n, sino como 鈥渙uterText鈥, a lo que funciona de igual manera.

Ta fuerte!

hay que terminar

Para los que borran las variables y los eventros de ataqueJugador y aun les sigue dando error; es por que deben agregar un espacio vacio al condicional. ya q el textContent tiene un espacio vacio despues del emoticon:

function secuenciaAtaque(){
    botones.forEach(boton => {
        boton.addEventListener('click',(e)=> {
            console.log(e)
            if(e.target.textContent === '馃敟 '){
                ataqueJugador.push('FUEGO')
                console.log(ataqueJugador)
                boton.style.background= '#832b4b'
            }else if(e.target.textContent === '馃挧 '){
                ataqueJugador.push('AGUA')
                console.log(ataqueJugador)
                boton.style.background= '#832b4b'
            }else {
                ataqueJugador.push('TIERRA')
                console.log(ataqueJugador)
                boton.style.background= '#832b4b'
            }
        })
    });
}

Est谩n fuertes estas clases me volv铆 a repasar todo desde el principio, haci茅ndolo yo solo o adelant谩ndome al profesor, ya sea con el CSS, las funciones los ciclos pero al llegar con este profesor todo se me complica xD. Pero seguiremos hasta el final banda.

Si no les funciona el condicional de target lo que podr铆an hacer es coger donde dice el contenedor colocar el id y colar el nombre del bot贸n directamente . Ejemplo if(e.target.Id===鈥 boton-fuego鈥 colocando en bot贸n el signo adecuado . Que en este caso es el mismo donde est谩 el emoji .
Para los que los que le aparezca en la Lista vac铆a lo que pueden hacer coger la clase directamente y pegarla en el botones( en este caso ser铆a boton-de-ataque) y les va a mostrar la lista llena .

Adem谩s de cambiar la est茅tica del bot贸n para dar retroalimentaci贸n podemos desactivarlo, as铆 evitamos errores de alg煤n usuario travieso.

Solo a帽adan la siguiente lineal de c贸digo: boton.disabled = true //Desactiva el bot贸n

Antes de a帽adir el c贸digo los invito a que prueben presionar un bot贸n varias veces y ver谩n que el arreglo sigue incrementando.

ME RINDO NADA FUNCIONA

traten de hacer todo al pie de la letra y cuando termine el video prueben cambiar el nombre o la imagen y asi, para experimentar.

la verdad bastante complicado este ejercicio, por suerte lo venia haciendo en 1.25x y ahora lo puse mas lento por que me perd铆a jaja

馃┗馃┗馃┗馃┗馃┗xdd

Y a煤n falta, no nos rindamos

Cambio de l贸gica de victoria y puntos importantes:

  • querySelectorAll('.attack_button') se usa con 鈥.鈥 porque asi lo requiere el query
  • Tenemos un arrays de todos los botones, agregarles un evento de clic por cada ataque
  • cambio de l贸gica: ten铆amos vidas, pero realmente podemos jugar m谩s que esas vidas, porque puede si son 3 vidas, pero puede que sean empates y terminemos jugando 10 veces. Lo que queremos hacer es una secuencia de 5 ataques y que solo de 5 rondas de ataques y gane el que haya ganado m谩s veces. entonces cambiamos vidas por victorias.
  • Cada bot贸n tiene que tener su function de click, para hacer algo en particular.
  • cada function nos traer谩 un valor, puede ser, agua, fuego, tierra, dependiendo del click, y una vez seleccionado el bot贸n ya no se pueda volver a usar. y visualmente se ver谩 ya seleccionado, entonces ya no ser谩n 5 sino 4 y as铆 hasta que selecciones todos, y se vaya guardando en otro array, cual es la secuencia de ataques con la cual quieres jugar tu y el enemigo.

Hola a todxs!
Si cuando seleccionan un bot贸n no les sale 鈥楩UEGO鈥, 麓TIERRA麓o lo que tengan prueben esto:
En la funci贸n mostrarAtaques dejen toda la linea de c贸digo correspondiente a ataquesMokepon sin espacios, o sea, todo seguido.
Es la soluci贸n cuando vamos a verificar y nos sale un \n al lado del emoji.
Saludos

Por un espacio en: textContent === "馃敟 "

me ejecutaba tierra todo el tiempo 馃槖

Pero que satisfacci贸n encontrar el bug !!!

Es importante tambi茅n mencionar que si seguimos dando clic en los ataques se seguiran agregando a nuestro arreglo, para ello podemos hacer una validaci贸n que no agregue mas luego de tener los 5.

if(ataqueJugador.length == 5){
return;
}

Esto nos permitira validar que en el momento que le demos clic y ya tengamos los 5 ataques no permitra agregar mas.

Informaci贸n adicional: Sentencia return

A este nivel de clases y c贸digo escrito, es muy importante ir creando documentacion, y estar revisando el c贸digo, para familiarizarnos con la ubicaci贸n de las variables y nombres empleados. Saludos Coders

Solo por si a alguien le ocurre lo mismo que a mi, el 鈥渢extContent鈥 de los ataques puede tener un espacio que no era necesario entre: ${ataque.nombre} y </button>, por lo cual no lo reconoce en la comprobacion de los clicks. XD

<button id=${ataque.id} class="boton-de-ataque-fuego BAtaque">${ataque.nombre} </button>