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
23H
9M
57S

Una sola fuente de la verdad

52/84
Recursos

A lo largo del c贸digo fuente de un proyecto, puede haber informaci贸n 鈥渉ardcodeada鈥 que cause dificultades en el futuro de la aplicaci贸n para que el proyecto siga creciendo.

Qu茅 es el c贸digo hardcore

El t茅rmino 鈥渉ardcore鈥, o cuando hablamos de 鈥渃贸digo hardcodeado鈥, significa escribir directamente en el c贸digo fuente informaci贸n propia para el funcionamiento de un proyecto.

Por ejemplo, si tenemos una contrase帽a para acceder a alg煤n servicio externo. No es una buena pr谩ctica harcodear la contrase帽a en una variable.

const password = '12345';

Ya que, adem谩s de ser inseguro, la misma puede cambiar con el tiempo.

Si tienes una determinada cantidad de informaci贸n, de mokepones en tu videojuego, procura pensar en la escalabilidad de tu proyecto. Siempre piensa en qu茅 pasar铆a si tuvieras miles de mokepones o si alguno de ellos cambia de nombre.

Hasta este punto del desarrollo del videojuego, es un buen ejercicio que repases todo el c贸digo que has escrito y que hagas un esfuerzo por buscar mejorarlo o por identificar informaci贸n hardcodeada que puede causar problemas con el tiempo.


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

Aportes 57

Preguntas 26

Ordenar por:

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

o inicia sesi贸n.

Este curso esta en otro nivel. Cada vez entiendo mas la progrmaci贸n y quiero dedicarle mas tiempo a estudiar.馃挌馃挌馃挌

Sinceramente Platzi, os hab茅is paseado con este curso 馃拑馃徑馃檹馃徏鉂わ笍

Te dejo un buen recurso donde puedes ahonda m谩s en el tema de Una sola fuente de verdad

single source of truth Lo 煤nico malo que no hay una versi贸n en espa帽ol

En resumen:
Todas las funciones que tengan informaci贸n 鈥渁 mano鈥 que nosotros ponemos, la vamos a retirar, para poner s贸lo la informaci贸n que existe en los objetos, es decir Usar una sola fuente de verdad.

Informaci贸n 鈥渁 mano鈥:

spanMascotaJugador.innerHTML = 'Capipepo'

haciendo uso de una Fuente de verdad:

spanMascotaJugador.innerHTML = inputHipodoge.id

Por cierto, es posible evitarse la validaci贸n con if si se declara la mascota del jugador m谩s o menos as铆:

let mJugador = eval(document.querySelector('input[name="mascota"]:checked').id)

Siempre que el input est茅 as铆:

<input type="radio" name="mascota" id="hipodoge">

Este curso es tan bueno (Y GRATIS) que no entiendo c贸mo mucha gente no aprende a programar馃く.

Una fuente de verdad es que Platzi es la mejor inversi贸n que har谩s.
Este valor se repetir谩 sin importar el d铆a, mes o a帽o en el que lo quieras ocupar


yo he creado una peque帽a funcion la cual dependiendo el caso sustituye el span por la imagen correspondiente

Una sola fuente de verdad se refiere a:

  • Tener en una sola variable la informaci贸n que se usar谩 repetidamente en el programa (en este caso el nombre del mokep贸n), y no agregar esa informaci贸n directamente en el c贸digo (harcodear)

Me encanta!!!, Amo platzi, amo a los profes, amo a Cheems y te amo a ti.

Uno va dejando un poco el miedo a un lado, cada vez el gusto por aprender programaci贸n es mayor. 馃槃

Pens茅 que lo har铆a con Hipodoge.nombre.

Siempre me han gustado estos temas de poder automatizar o parametrizar todo lo que uno crea. Esa fue una de las razones por las que me anim茅 a estudiar programaci贸n.

en vez de colocar el nombre de la mascota, coloque la imagen de la mascota.

function seleccionarMascotaJugador(){

if(inputMascota1.checked){
    mascotaJugador = inputMascota1.id
    muestraMascotaJuagador()
} else if(inputMascota2.checked){
    mascotaJugador = inputMascota2.id
    muestraMascotaJuagador()
} else if(inputMascota3.checked){
    mascotaJugador = inputMascota3.id
    muestraMascotaJuagador()
} else {
    alert('Debe Seleccionar una Mascota')
}
sectionSeleccionarAtaque.style.display = ''
sectionSeleccionarMascota.style.display = 'none'

seleccionarMascotaEnemigo()

}

function muestraMascotaJuagador(){
mokemones.forEach((mokemon) => {
if(mascotaJugador == mokemon.nombre){
document.getElementById(鈥渋magen-mostro-ataque-jugador鈥).innerHTML=<img class="imagen-mostro-ataque" src="${mokemon.imagen}" alt="${mokemon.nombre}" />;
}
})
}

function seleccionarMascotaEnemigo(){
mascotaEnemigo = aleatorio(1, 3)
mokemones.forEach((mokemon) => {
console.log(mascotaEnemigo + 鈥 鈥 + mokemon.apodo)
if(mascotaEnemigo == mokemon.apodo){
console.log(鈥榩aso鈥)
document.getElementById(鈥渋magen-mostro-ataque-enemigo鈥).innerHTML=<img class="imagen-mostro-ataque" src="${mokemon.imagen}" alt="${mokemon.nombre}" />;
}
})

}

mokeponooooooo

Tu sabes cuantos a帽os de flow t煤 tienes que acumular para llegar aqu铆,muchos 馃槣馃馃徎馃馃槒

Es interesante la verdad la forma en que estos valores son usados. Su logica es algo parecido a lo que uso Flutter, jamas imagiene que algunas reglas de logica sean las mismas. Quede impresionado.

En mi caso los input me aparecen como 鈥渘ull鈥, ya he revisado el c贸digo un mont贸n de veces y el del profesor pero no he logrado dar con el problema

const sectionSeleccionAtaque = document.getElementById("seleccionaAtaque") 
const spanMascotaJugador = document.getElementById("mascota-jugador")```


function seleccionarMascotaJugador() {
    
    sectionSeleccionarMascota.style.display = 'none'
    sectionSeleccionAtaque.style.display = 'flex'
    
    if (inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = inputHipodoge.id
    } else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = inputCapipepo.id
    } else if (inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = inputRatigueya.id
    } else {
        alert('Selecciona una mascota')
    }

    seleccionarMascotaEnemigo()
}

El m茅todo:

typeof (AquiElElementoQueSeQuiere
Consultar) nos sirve para saber que tipo de elemento es
ya sea: objet, class, array, etc.

A mi me quedo asi la funcion

function seleccionarMascotaJugador () {
    seccionMascota.style.display = 'none';
    seccionAtaques.style.display = 'flex';

    let selected = document.querySelector('input[name="mascota"]:checked');
    if (selected === null) {
        location.reload();
        alert('no seleccionaste nada');
    }
    mascotaJugador = selected.id;
    spanMascotaJugador.innerHTML = mascotaJugador;
    buttonMasconta.disabled = true;
    ramdonMascota();
    inputMascotaEnemigo.innerHTML = mascontaEnemiga;

    insertarImagenMokepon( mascotaJugador);
}

Siempre me quedo con las ganas de ponerle 鈥淟ike鈥 o 鈥淢e encanta鈥 a cada clase

Este curso est谩 excelente. se aprende bastante.

Si por alguna raz贸n, hiciste todo bien pero las im谩genes iniciales desaparecieron, revisa si dejaste alguna de las comillas cuando cambiaste el link del archivo de las fotos iniciales por ${mokepon.foto}. Me tom贸 varias horas ver que lo hab铆a dejado as铆 <img src="${mokepon.foto}.

Averiguar que tipo de elemento una variable

nesecito ayudaaaaaa

Una sola fuente de la verdad es la informaci贸n que tenemos ne nuestros objetos. Todas las function que tengan informaci贸n a mano (Hardcoded) deber铆amos retirarla.

  • typeof() que tipo de elemento es lo que se le coloca
  • Lo que veo es que al colocar la variable que recorre el array con forEach de la clase Mokepon, las variables pasan hacer objetos, y asi exraer informaci贸n de ellos.
  • entonces para llegar al m茅todo del objeto seria con el 鈥.鈥

Gracias por la clase. Corta pero eficaz.

En el anterior video comente que se me ocurrio una soluci贸n para el inputHipodoge = document.get鈥, con la funcion eval(), pero no tome en cuenta que al hacer los inputHipodoge.checked tambien podia resumir ese codigo, a un for anidado con if, no soy muhco de explicar, as铆 que espero entiendan el codigo.

function seleccionarMascotaJugador() {
    for (let i = 0; i < mokepones.length; i++) {
        if (eval(`input${mokepones[i].nombre}.checked`)) {
            spanMascotaJugador.innerHTML = mokepones[i].nombre
            sectionSeleccionarAtaque.style.display = 'flex'
            sectionSeleccionarMascota.style.display = 'none'

            seleccionarMascotaEnemigo()
            break;
        } else if (i == (mokepones.length - 1)){
            alert('Selecciona una mascota')
        }
    }
}

Ya que creamos estos elementos desde JS y los rellenamos con informacion de nuestros objetos, aprovecharemos esto por que cada uno de nuestros elementos es un objeto, por lo tanto podemos acceder a las propiedades de esto a traves de la notacion de punto.

Platzi es morado XD

UNDEFINED
si tienes problemas con el nombre del personaje que deberia mostrarse al utilizar este nuevo sistema llamando al nombre usando el id del objeto, revisa el nombre del la variable en la seccion donde se trabaja eso. En mi caso la variable global ( de las que se colocan al principio de todo el codigo en JavaScript), que me servia para los nombre de los MOKEPONES, tenian el mismo nombre que las que estaban dentro de la funcion de elegir al personaje, por tanto se sobreescribia el contenido y daba el error UNDEFINED.
ej:
variable global ----> inputsubzero
variable de la funcion seleccionar personaje 鈥> inputsubzero

Resultado: UNDEFINED

para corregirlo solo le agregue otra paralabra a la variable que uso en la seccion de elegir el personaje y se soluciono

si no lo entindes a la primera lectura, trata de ir comparando cada parte de lo que lees aqui con tu codigo, y te iras ilustrando. Pero tambien me puedes preguntar para mas detalles.

de aqui salgo atrabajr, el mejor curso junto a el otro de programcion

cada clase es algo nuevo, excelente

Harcode: codificaci贸n en la que los valores son escritos directamente en el c贸digo fuente del programa en lugar de
de ser definidos como variable o constante.

Mis apuntes de esta clase:

METODOS

typeof -> Que tipo de elemento es mi variable

FUENTE DE VERDAD
Utilizar la info de nuestros objetos: los input est谩n ligados a la info de html que pusimos con javascript

Reemplazar la variable que se esta validando a mano y la reemplazamos con la id de ese elemento para que sea din谩mico:

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

Hola a todas, vego a decirles que investigu茅 c贸mo poder reducir el c贸digo de seleccionarMascotaJugador

function selectPet() {
  var radios = document.getElementsByName("avatar");
  for (var radio of radios) {
    if (radio.checked) {
      spanPetPlayer.innerHTML = radio.id;
      puchamones.forEach((puchamon) => {
        if (puchamon.name == radio.id) {
          imgPet.src = puchamon.img;
        }
      });
      selectPetEnemy();
    }
  }
}

Guardo todos los inputs radio dentro de una variable llamada radios, buscandolos por el nombre
avatar: es el nombre que tienen los inputs radio
lo recorro todo con un forEach y busco el que est茅 seleccionado, cuando lo encuentro, mediante la propiedad del objeto que cree le asigno el id, que contiene el nombre de la mascota, lo mismo sucede con el resto del c贸digo, pero es para asignar la imagen correspondiente

Si esta no es de la mejores clases de todo el curso, no se que lo sea, que increible Diego como profesor

La info que va cambiando repentinamente o con el tiempo debe ser manejada a trav茅s de Javascript y estructurada con HTML (Con js puedes tambi茅n manejar y manipular el DOM, por lo tanto sirve tambi茅n). El beneficio es que el proyecto se vuelve escalable y eficaz en el largo plazo.

Sin embargo, habr谩 informaci贸n que es mejor escribirla directamente

Con eso no habria que hacer muchos cambios al agregar un nuevo personaje. La verdad esta genial 馃槂

Cada vez entiendo el flujo de los datos con facilidad!

Una fuente de verdad es tener una sola variable que me va a dar informaci贸n que se va a utilizar repetidamente en todo el programa, de tal manera que los cambios que se realicen se har谩n de forma din谩mica y no manual.

aqui mi versi贸n de colocar la imagen de la mascota del jugador

    let maxNumberArrayPets = mokepones.length;

    // loop al array

    if (maxNumberArrayPets > 0) {
        for (let inc = 0; inc < maxNumberArrayPets; inc++) {

            let pets_input = pets_array[inc];

            if (pets_array[inc].checked) {

                gvimagegamer.setAttribute("src", mokepones[inc].photo)

                gamerChoice = inc;
                petsInputTitle = pets_input.title;

                break;
            }
        }

    } 

馃搶 Lo de una sola fuente de verdad lo entiendo como ligar un valor hacia una 煤nica variable, parece ser que no es exactamente as铆, pero me ayuda a comprenderlo

es bastante dif铆cil para una persona que empieza como yo realizar estos cambios, es pr谩cticamente restructurar todo lo ya echo.

Dios m铆o鈥 Programar siendo disl茅xico es terrible

Diego diciendo鈥 Vamos al Navegador y ya todo funciona como esperamos鈥
Mi navegador

no mi ciela

-_-

Wuuooou cada vez me voy sintiendo con mas seguridad y potencial para que mis proyectos queden mejor

Este curso ofrece una perspectiva muy aplia de lo que es la programaci贸n y todo lo que puedes hacer con ella, es alucinante.

Aportar imagen al resultado:

else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = inputCapipepo.id
        imagenJugador.innerHTML = `<img src=${capipepo.foto} alt=${capipepo.nombre}>`
        inputCapipepo.checked = false

algunos datos se borran otros se agregan ah铆 cuando uno se pierde pero ay que prestar mucha atenci贸n

鈥淯na sola fuente de la verdad鈥 馃憖

Es normal sonre铆r cada vez que entiendes algo nuevo o solo soy yo?
Que maravilla que es la programaci贸n y lo mucho que puede facilitar las cosas (para el cliente, a nosotros nos desarma el cerebro)

<code> 

Este curso es geniall, me encanta esto de las clases!!

Anteriormente llamaba la mascota del jugador y del enemigo en la segunda pantalla para escoger el ataque, como el c贸digo cambi贸 por el tema de optimizaci贸n, no sabia como llamarlo, as铆 que decid铆 crear una funcion para obtener la imagen/foto del jugador y del enemigo.

Les muestro la implementaci贸n y el uso cuando la llamo para traer la informaci贸n correspondiente:

El nombre de este concepto 鈥淯na sola fuente de la verdad鈥 es muy 茅pico. 馃挭馃尶

la fuente de verdad es el ciclo for donde est谩n todos los elementos iterados que necesitamos para hacer las comparaciones.

Tambie se pudo realizar el mismo bloque de codigo que se utilizo para generar las tarjetas en la parte de preguntar que label esta checke:
Solo se ingresaria los imputs creados por medio del .forEach en un nuevo array, y utilizar el mismo metodo, para que cada vez que se ingrese un nuevo Mokepon, se genere un if(mokepon.checked) por cada mokepon dado de alta, me doy a entender? yo me entiendo jajaja 馃槀