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

Don't repeat yourself (DRY)

45/84
Recursos

Aportes 18

Preguntas 10

Ordenar por:

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

Para evitar tener que esperar ir al navegador y ver los errores en consola, podemos descargar la extensi贸n:


as铆 poder ver los errores de esta manera:

espero les sirva!

La linea 5 del c贸digo no es una variable. Cuidado ah铆.

Les dejo un buen articulo para complementar el principio DRY

7 acr贸nimos que cualquier developer deber铆a conocer

Resumen

Es buena pr谩ctica sacar las variables del tipo .getElementById de las funciones y colocarlas al inicio del js para ser usadas como variables globales. As铆 nos aseguramos de no estar repitiendo c贸digo. Es importante no definir m谩s de una vez la misma variable y las funciones deben tener nombres distintos para evitar problemas.

Tipos de variables:
let = su valor puede variar, es decir cambia a lo largo del c贸digo
const = su valor ser谩 el mismo de inicio a fin

Una de las frases que m谩s paz mental me da es esa de que podemos llegar a diferentes soluciones y si funciona, EST脕 BIEN HECHO.

despues de un rato buscando el atajo del teclado para seleccionar las let y cambiarlas por const鈥 eso se hace con CTRL+ALT+FLECHA HACIA ABAJO

le agregue en el HTML la propiedad name con el valor boton a los 3 botones, entonces con el metodo getElementsByName()
me trae los 3 botones juntos en un array el cual recorro con un forEach y de esa manera les agrega uno por uno la propiedad disabled

<code> 
```let botones = document.getElementsByName("boton");
  botones.forEach((boton) => {
    boton.disabled = true;
  });

Primera vez que para una constante no se dice 鈥淐omo por ejemplo el n煤mero pi鈥濃 Muchas, muchas, muchas y m谩s gracias por dar un ejemplo de que es un valor constate en el mundo real!!!馃槃

Les dejo esta extension, esta super porque te permite editar tus tags apertura y cierre de HTML al mismo tiempo.

Creo que es una practica muy avanzada para alguien que va empezando en la programacion, porque retirar los getElementByID de su locazlizacion original puede afectar al momento de querer leer el codigo siendo nuevo en la programacion, yo por mi parte las deje como comentario.

Variables:

Imag铆nate que te gusta el sushi de camar贸n 馃崣 馃崵y nomas compras ese.

const sushiDeCamaron

Como siempre compras ese sushi y no lo cambias, lo metes a esa variable const.

El asunto ser谩 cuando quieras pagar ese sushi de camar贸n y ver su precio. El precio no ser谩 el mismo este mes y dentro de 6 meses, el costo cambia.

As铆 que su precio ser谩 una variable let:

// lunes, 8 de agosto de 2022, precio de sushi de camar贸n:
 let sushiDeCamar贸n = 129

// lunes, 8 de marzo de 2023, precio de sushi de camar贸n:
 let sushiDeCamar贸n = 179

Comparto mi c贸digo js

let ataqueJugador
let ataqueEnemigo
let vidasJugador = 3
let vidasEnemigo = 3

const $ = id => document.getElementById(id)
const $createE = element => document.createElement(element)

const $botonMascotaJugador = $('boton-mascota')
const $inputHipodoge = $('hipodoge')
const $inputCapipepo = $('capipepo')
const $inputRatigueya = $('ratigueya')

$botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)

const $spanMascotaJugador = $('mascota-jugador')

const $spanMascotaEnemigo = $('mascota-enemigo')

const $sectionMensajes = $('resultado')
const $ataquesJugador = $('ataques-jugador')
const $ataquesEnemigo = $('ataques-enemigo')
const $nuevoAtaqueJugador = $createE('p')
const $nuevoAtaqueEnemigo = $createE('p')

const $spanVidasJugador = $('vidas-jugador')
const $spanVidasEnemigo = $('vidas-enemigo')

const $botonReiniciar = $('boton-reiniciar')

let $botonFuego = $("boton-fuego")
let $botonAgua = $("boton-agua")
let $botonTierra = $("boton-tierra")

$botonFuego.addEventListener('click', ataqueFuego)
$botonAgua.addEventListener('click', ataqueAgua)
$botonTierra.addEventListener('click', ataqueTierra)

$botonReiniciar.addEventListener('click', reiniciarJuego)

const $sectionSeleccionarAtaque = $('seleccionar-ataque')

const $sectionSeleccionarMascota = $('seleccionar-mascota')

const $sectionReiniciar = $('reiniciar')

$sectionSeleccionarAtaque.style.display = 'none'
$sectionReiniciar.style.display = 'none'

function seleccionarMascotaJugador() {
    $sectionSeleccionarMascota.style.display = 'none'
    $sectionSeleccionarAtaque.style.display = 'flex'

    if($inputHipodoge.checked) {
        $spanMascotaJugador.innerHTML = 'Hipodoge'
    }
    else if ($inputCapipepo.checked) {
        $spanMascotaJugador.innerHTML = 'Capipepo'
    }
    else if ($inputRatigueya.checked) {
        $spanMascotaJugador.innerHTML = 'Ratigueya'
    }
    else {
        alert('Selecciona un Moqopon')
    }
    seleccionarMascotaEnemigo()
}

function seleccionarMascotaEnemigo() {
    let mascotaAleatoria = aleatorio(1,3)

    if (mascotaAleatoria == 1) {
        $spanMascotaEnemigo.innerHTML = 'Hipodoge'
    } else if (mascotaAleatoria == 2) {
        $spanMascotaEnemigo.innerHTML = 'Capipepo'
    } else {
        $spanMascotaEnemigo.innerHTML = 'Ratigueya'
    }
}

function ataqueFuego() {
    ataqueJugador = 'FUEGO馃敟馃敟馃敟'
    ataqueAleatorioEnemigo()
}
function ataqueAgua() {
    ataqueJugador = 'AGUA馃挧馃挧馃挧'
    ataqueAleatorioEnemigo()
}
function ataqueTierra() {
    ataqueJugador = 'TIERRA馃尡馃尡馃尡'
    ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo() {
    let ataqueAleatorio = aleatorio(1,3)

    if(ataqueAleatorio == 1) {
        ataqueEnemigo = 'FUEGO馃敟馃敟馃敟'
    } else if (ataqueAleatorio == 2) {
        ataqueEnemigo = 'AGUA馃挧馃挧馃挧'
    } else {
        ataqueEnemigo = 'TIERRA馃尡馃尡馃尡'
    }
    combate()
}

function combate() {
    if (ataqueJugador == ataqueEnemigo) {
        crearMensaje('EMPATE')
    } else if (ataqueJugador == 'FUEGO馃敟馃敟馃敟' && ataqueEnemigo == 'TIERRA馃尡馃尡馃尡') {
        crearMensaje('GANASTE')
        vidasEnemigo--
        $spanVidasEnemigo.innerHTML = vidasEnemigo
    } else if (ataqueJugador == 'AGUA馃挧馃挧馃挧' && ataqueEnemigo == 'FUEGO馃敟馃敟馃敟') {
        crearMensaje('GANASTE')
        vidasEnemigo--
        $spanVidasEnemigo.innerHTML = vidasEnemigo
    } else if (ataqueJugador == 'TIERRA馃尡馃尡馃尡' && ataqueEnemigo == 'AGUA馃挧馃挧馃挧') {
        crearMensaje('GANASTE')
        vidasEnemigo--
        $spanVidasEnemigo.innerHTML = vidasEnemigo
    } else {
        crearMensaje('PERDISTE')
        vidasJugador--
        $spanVidasJugador.innerHTML = vidasJugador
    }
    revisarVidas()
}

function revisarVidas() {
    if (vidasEnemigo == 0) {
        crearMensajeFinal('Felicitaciones Ganaste :)')
    } else if (vidasJugador == 0) {
        crearMensajeFinal('Felicitaciones Perdiste :(')
    }
}

function crearMensaje(resultado) {
    $sectionMensajes.innerHTML = resultado
    $nuevoAtaqueJugador.innerHTML = ataqueJugador
    $nuevoAtaqueEnemigo.innerHTML = ataqueEnemigo

    $ataquesJugador.appendChild($nuevoAtaqueJugador)
    $ataquesEnemigo.appendChild($nuevoAtaqueEnemigo)
}

function crearMensajeFinal(resultadoFinal) {
    $sectionMensajes.innerHTML = resultadoFinal

    $botonFuego.disabled = true
    $botonAgua.disabled = true
    $botonTierra.disabled = true

    $sectionReiniciar.style.display = 'block'

    $botonFuego.style.background = '#fff'
    $botonAgua.style.background = '#fff'
    $botonTierra.style.background = '#fff'
}

function reiniciarJuego() {
    location.reload()
}

function aleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

no, a mi se me da帽o el juego, e hice los pasos del video.

Uno de las herramientas de Visual Estudio Code es que podemos darle un formato al c贸digo al dar un 鈥渃lick derecho鈥 a la pagina y luego 鈥淒ar formato al documento鈥 o mediante su atajo del teclado " Shift + Alt + F "
Si el formato no te gusta puedes quitarlo con " Ctrl + Z "

El formato por defecto le pone " ; " al final de las l铆neas de c贸digo

Yo lo que hice fue buscar todas las declaraciones de variables que se repitieron y las coloqu茅 como globales. Las que no se repetian si las dej茅 en el mismo lugar

B谩sicamente cortar de sus funciones todas las variables let que contienen document.getElementById y pegarlas arriba de todo el c贸digo, borrar las que se repiten (que no se porque su VSCode no se las marca con subrayado en rojo) y cambiarlas de let a const.

En pocas palabras, lo recomendable es crear nuestras variables como variables globales a menos que estas sean espec铆ficas para una funci贸n en particular.

que chevere no sabia nada eso .馃槂