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

Secci贸n de elegir mascota

17/84
Recursos

Aportes 56

Preguntas 11

Ordenar por:

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

Algunos ejemplo etiqueta Input Html

2022 = Mokepon 馃挌
2016 = Pakiman 馃挌馃挌馃挌

Significado de 鈥渆鈥:
El formato Cient铆fico muestra un n煤mero en notaci贸n exponencial, reemplazando parte del n煤mero por E+n,en el que E (exponente) multiplica el n煤mero anterior por 10 a la potencia n. Por ejemplo, un formato cient铆fico de 2 decimales muestra 12345678901 como 1,23E+10, que es 1,23 veces 10 a la d茅cima potencia.

Buscando en tutoriales, encontr茅 como insertar imagenes para que se vea mejor (dejo el codigo base debajo):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MOKEPON</title>
</head>
<body>

    <script>

        var img = document.createElement("img");
        img.src
    
        var div = document.getElementById("x");
        div.appendChild(img);
        //block.setAttribute("style", "text-align:center");
    
        </script>

    <h1> Mokepon! 馃尡馃敟馃挧 </h1>
    
    <section id="seleccionar-mokepon"></section>
        <h2>Elige a tu Mokemon:</h2>

        <p>
            <label for="ajolote">
                <input type="radio" name="mokepon" id="ajolote"/>
                <img src="img/ajolote_600x372.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="ajolote"/>
            Ajolote
            </label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        

            <label for="topo">
                <input type="radio" name="mokepon" id="topo"/>
                <img src="img/topo_600x449.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="topo"/>
                Topo
            </label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            
            <label for="hormigadefuego">
                <input type="radio" name="mokepon" id="hormigadefuego"/>
                <img src="img/hormigafuego_600x336.jpg" alt="HTML5 Logo" title="fuego_mokepon01" width="124" height="100" id="hormigadefuego"/>
                Hormiga de fuego
            </label>

        <p>
            <label for="komodo">
                <input type="radio" name="mokepon" id="komodo"/>
                <img src="img/komodo_1238x878.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="komodo"/>
                Dragon de Komodo
            </label>
            &nbsp;
            
            <label for="tortuga">
                <input type="radio" name="mokepon" id="tortuga"/>
                <img src="img/tortuga_1239x697.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="tortuga"/>
                Tortuga
            </label>
            &nbsp;&nbsp;

            <label for="caballodemar">
                <input type="radio" name="mokepon" id="caballodemar"/>
                <img src="img/Caballitodemar_1557x888.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="caballodemar"/>
            Caballo de mar
            </label>
            &nbsp;
        </p> 


        <p>
            <button>Confirmar</button>
        </p>
    
    <section id="seleccionar-ataque">   
        <h2>Elige tu ataque:</h2>

        <p>Tienes <span>3</span> vidas</p>
        <p>El contrincante tiene <span>3</span> vidas</p>

        <p>
            <button>Tierra 馃尡</button>
            <button>Fuego 馃敟</button>
            <button>Agua 馃挧</button>
        </p>

    </section>

    <section id="mensajes"></section>
        <p>MENSAJE ATAQUE</p>

    <section id="reiniciar-terminar"></section>
        <button>Volver a jugar</button>
        <button>Terminar</button>
    
</body>
</html>

Para saltar un p谩rrafo se puede utilizar <br> en donde quieras que sea el salto de linea.

Tambi茅n lo que yo hice fue colocar el input type radio arriba para que apareciera en el lado izquierdo del texto, siento que es mas ordenado.

Si algo les falla o no les queda bien les dejo un excelente recurso donde pueden validar su HTML.

validador de HTML

Hipoge -> Agua
Capipepo -> Tierra
Ratigueya -> Fuego
Langostelvis -> Agua y Fuego
Tucapalma -> Agua y Tierra
Pydos -> Tierra y Fuego

馃憦 鉂わ笍

yo le cambie el nombre de las mascotas

Me imagin茅 esta manera de seleccionar tu mascota y se me hizo mejor as铆 que me puse a investigar como se hac铆a, y as铆 es como qued贸.

 <section id="seleccionar-mascota">
            <h2>Elige tu mascota</h2>
    
            <select name="mascota">    
                <option id="hipodoge">Hipodoge</option>
                <option id="capipepo">Capipepo</option>
                <option id="ratigueya">Ratigueya</option>
            </select>    

            <button>Seleccionar</button>

        </section>

OTRA FORMA DE USAR LABEL

<label>Mascota
      <input type="radio" name="mascota">
</label>

Puedes ver que como input se encuentra dentro de label no es necesario usar for

Falt贸 el legendario PIKACHO, s贸lo los verdaderos Platzinautas recordar谩n.

  • Like por Hermenegildo si entiendes la referencia xd :3
    .

Viendo como va este proyecto estar铆a genial utilizar una API de pokemones, y poder filtrar y seleccionar el pokemon que queramos (No s茅 mucho de pokemones, pero estar铆a muy interesante)

La letra 鈥渆鈥 es una forma abreviada de notaci贸n cient铆fica, la cual expresa un exponente de 10, es decir que si se quiere expresar un numero de 25 billones se representar铆a as铆 2.5E

Le cambie los nombres a las mascotas 馃槄
Piplup -> Agua
Sandile -> Tierra
Litten -> Fuego
Volcanion -> Agua y Fuego
Swampter -> Tierra y Agua
Heatmor -> Fuego y Tierra

mi infancia Mokepon no podia dejarlo asi 馃榿

La e SIgnifica 鈥渆xponencial鈥 es decir, que ese n煤mero se multiplica por s铆 mismo cuantas veces indique a la derecha.

for 鈥溾

Nos ayuda a vincular un <label> con un <input>

Me imagino como habr谩 sido la reuni贸n donde tenian que elegir los nombres JAJAJAJAJA

La 鈥榚鈥 hace referencia al n煤mero de Euler

-<label> </label>

Nos ayuda a que podamos darle un indicador a los usuarios de que sepan que estan seleccionando.

Los nombres de los Mokepones est谩n algo dif铆ciles de pronunciar jaja

He visto en bootcamps que lo utlizan de la siguiente manera: <label>Mokipon<input type=鈥渞adio鈥/></label>.
Hay alguna diferencia?, estar铆a bien utilizar cualquiera de las dos formas?

Genial,nunca habia usado for en una etiqueta label, hasta ahora me doycuenta que es una forma de usarlas

Muy buen profesor Juan, me siento super integrado a la clase, como si fuera presencial, excelente.

El volumen bajo es de origen, no tienen que ajustar sus audifonos/bocinas

Gracias Juan David, me sirvi贸 mucho esta clase para entender mejor las etiquetas en html, estoy tratando de construir un proyecto desde cero por mi misma y me costaba much铆simo la maquetaci贸n, la creaci贸n de las secciones y mas aun los tipos de input. Todos los d铆as uno aprende algo nuevo, por eso Nunca pares de aprender.

El formato Cient铆fico muestra un n煤mero en notaci贸n exponencial, reemplazando parte del n煤mero por E+n,en el que E (exponente) multiplica el n煤mero anterior por 10 a la potencia n.

La tarea del profe.

La e representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300.

Es una forma de acortar los numeros a cierto exponente cuando son operaciones muy largas.

**++

La e hace referencia a los numeros irracionales
e = Leonhard Euler >

++**

La e significa un exponente y en la calculadora aparece por que el numero es muy grande y no puede ser expresado de otra manera.

En vsc para agregar texto en varias l铆neas al simultaneo seleccionen el texto y hagan Ctrl + d. Saludos.

Mi c贸digo, espero y les sirva

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥/>
<title> MOKEPON! </title>
</head>
<body>
<h1> MOKEPON! 馃敟馃挧馃尡</h1>

    <section id="Seleccionar-mascota">
        <h2> Elige una mascota carnal</h2>

        <label for="Pinguino">Pinguino</label>
        <input type="radio" name="mascota" id="Pinguino" />

        <label for="Zebra">Zebra</label>
        <input type="radio" name="mascota" id="Zebra" />

        <label for="Le贸n">Le贸n</label>
        <input type="radio" name="mascota" id="Le贸n" />
    
        <label for="Tigre">Tigre</label>
        <input type="radio" name="mascota" id="Tigre"/>

        <label for="Hipopotamo">Hipopotamo</label>
        <input type="radio" name="mascota" id="Hipopotamo"/>

        <label for="Chihuahua">Chihuahua</label>
        <input type="radio" name="mascota" id="Chihuahua"/>


        <button> Seleccionar </button>
    </section>

    <section id="Seleccionar-ataque">
        <h2>Elige un ataque carnal</h2>
        <p>Tu mascota tiene <span> 3 </span> vidas</p>
        <p>La  mascota del enemigo tiene <span> 3 </span>   vidas</p>

        <p>
            <button> Fuego 馃敟</button>
            <button> Agua 馃挧</button>
            <button> Tierra 馃尡 </button>
        </p>
    </section>

    <section id = "mensajes"> 
        <p> Tu mascota ataco con FUEGO, la mascota del enemigo ataco con TIERRA - GANASTE</p>
    </section>

    <section id ="reiniciar"> 
        <button> Reiniciar</button>
    </section>
</body>

</html>

e es uno de los n煤meros irracionales y los n煤meros trascendentes m谩s importantes.1鈥 Es aproximadamente 2,71828 2鈥媦 aparece en diversas ramas de las matem谩ticas, al ser la base de los logaritmos naturales y formar parte de las ecuaciones del inter茅s compuesto y otros muchos problemas.

La e es de logaritmo natural que tiene un valor determinado 馃槂

<h1>MOKEPON ! 馃敟馃挧馃尡</h1>

        <section id = "Seleccionar-mascota">
            <h2>Elige tu mascota</h2>
            
            <label for = "Hipodoge">Hipodoge</label>
            <input type = "radio" name = "mascota" id = "Hipodoge"/>

            <label for = "Capipepo">Capipepo</label>
            <input type = "radio" name = "mascota" id = "Capipepo"/>

            <label for = "Ratiqueya">Ratiqueya</label>
            <input type = "radio" name = "mascota" id = "Ratiqueya"/>

            <label for = "Langostelvis">Langostelvis</label>
            <input type = "radio" name = "mascota" id = "Langostelvis"/>

            <label for = "Tucapalma">Tucapalma</label>
            <input type = "radio" name = "mascota" id = "Tucapalma"/>

            <label for = "Pydos">Pydos</label>
            <input type = "radio" name = "mascota" id = "Pydos"/>

            <!--Hipodoge -> Agua
            Capipepo -> Tierra
            Ratiqueya -> Fuego
            Langostelvis -> Agua y Fuego
            Tucapalma -> Agua y Tierra
            Pydos -> Tierra y Fuego-->

            <button>Seleccionar</button>
        </section>
  • label representa un t铆tulo para un elemento de una interfaz de usuario.
  • El atributo for nos ayuda un label con un input.
    馃槑

la e es exponente, si no estoy mal

Quiero confesar que cuando se fue Freddy me entristeci bastante por que lo amo a Freddy, pero las clases de Juan realmente no solo me dejan satisfecho sino que me di cuenta que me gusta mas que Freddy (espero que no lo lea jaja). Gracias juan, el Paul Atreides latino te queremos! 鉂

Amo que Timoth茅e me explique todo detallado y siendo amigable, eso me da m谩s motivaci贸n para seguir este curso.

La es la potencia decimal, ej 10 = 1e1.

La e significa que el n煤mero expresado es exponencial.

El n煤mero 鈥渆鈥 es un n煤mero irracional trascendente, es decir, es un n煤mero que no puede ser expresado como una fracci贸n que no es ra铆z de ning煤n polinomio con coeficientes enteros (o racionales) y por tanto no pueden expresarse mediante radicales

esto fue lo que encontre, pero la verdad no tengo idea XD

La mayor铆a de las pantallas de las calculadoras pueden mostrar hasta 10 d铆gitos. Por lo tanto, para n煤meros mayores a 1,000,000,000, las calculadoras incorporan el s铆mbolo E, el cual proviene de notaciones cient铆ficas. Esto le permite a las calculadoras indicar valores muy largos.

La mayor铆a de las pantallas de las calculadoras pueden mostrar hasta 10 d铆gitos. Por lo tanto, para n煤meros mayores a 1,000,000,000, las calculadoras incorporan el s铆mbolo E, el cual proviene de notaciones cient铆ficas. Esto le permite a las calculadoras indicar valores muy largos.

E representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300.
Al usar E, la calculadora puede mostrar tanto n煤meros muy largos o muy peque帽os. Por ejemplo, 5.1 E -4 significa 5.1 x 10^ -4, lo cual equivale a 0.00051. Cuando hay muchos ceros, como para 0.0000000000000000001, lo cual la calculadora no puede mostrar, la E ayuda a acortarlo a una forma que se pueda leer.

me cae bien el nuevo profe uvu

C贸digo de la clase

<section id="selectPet">
        <h2>Elige a tu mascota:</h2

        <label for="hipodoge">Hipodoge</label>
        <input id="hipodoge" type="radio" name="mascota">

        <label for="capipepo">Capipepo</label>
        <input id="capipepo" type="radio" name="mascota">

        <label for="ratigueya">Ratigueya</label>
        <input id="ratigueya" type="radio" name="mascota">

        <!--
            Hipodoge -> Agua
            Capipepo -> Tierra
            Ratigueya -> Fuego
            Langostelvis -> Agua y Fuego
            Tucapalma -> Agua y Tierra
            Pydos -> Tierra y Fuego
        -->


        <button>Seleccionar</button>
    </section>

Si quieren copiar y pegar rapido solo deben oprimir Shift + alt +

la flecha de la direcci贸n a donde quieres pegar el c贸digo.

Magnifica energ铆a del profe Juan, felicitaciones.

La e es de exponencial.

e significa de exponecial o tambien puede ser el numero o cosntante e.
Jejejeje

Wow no tenia ni idea de el input de tipi radio ni checkbox馃

C贸digo hecho en clase:

<label for="hipodoge">Hipodoge</label>
<input type="radio" name="mascota" id="hipodoge" />

<label for="capipepo">Capipepo</label>
<input type="radio" name="mascota" id="capipepo" />
        
<label for="ratigueya">Ratigueya</label>
<input type="radio" name="mascota" id="ratigueya" />

隆隆Magnifico!! Solo es cuesti贸n de pr谩ctica.

tutorial: como ser demandado

Estoy viendo en los comentario que E significa algo de notacion cientifica, yo pense que era el numero de euler :v

E representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300.