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

Movimiento hacia todas las direcciones

63/84
Recursos

Aportes 71

Preguntas 40

Ordenar por:

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

o inicia sesi贸n.

Recuerden que canvas es una API del navegador y es muy poderosa y tiene una gran cantidad de funcionalidades 馃槃

En el tiempo 5:12 la profesora colapsa algunas funciones para ganar espacio en la pantalla y trabajar m谩s c贸modamente.
En vscode se pueden utilizar atajos de teclado que permiten esto mismo
Ctrl+Shift+P y despu茅s tecleamos >Fold All y por 煤ltimo tecleamos intro o enter.
Ac谩 pueden ver todas mis funciones colapsadas:

Con cada clase que pasa me siento m谩s como un ni帽o con un juguete nuevo 馃巿

Rapipepo

En el minuto 3:58 la profe se pone la 10 y explica como es para seleccionar r谩pido varias lineas que dicen lo mismo, se lo vi hacer a los otros profesores y nunca me entere como se hacia xD Gracias profe! 鉂わ笍
(Spoiler: es ctrl + d)

Tambi茅n se puede capturar la tecla, as铆 lo intent茅.

function capturaTecla() {
    document.addEventListener('keydown', e=> {
        if (e.key==='ArrowUp') {
            capipepo.y-=5
            pintarPersonaje()
        } else if (e.key==='ArrowDown') {
            capipepo.y+=5
            pintarPersonaje()
        } else if (e.key==='ArrowLeft') {
            capipepo.x-=5
            pintarPersonaje()
        } else if (e.key==='ArrowRight') {
            capipepo.x+=5
            pintarPersonaje()
        }
    })
}

Si a alguien le paso que onmousedown no le funciona como a mi siempre pueden usar los pointer Events (onpointerdown, onpointerup) que en resumen Chrome movi贸 su compatibilidad desde onmousedown to pointer events para ser mas compatibles con todos los tipos de inputs que hay (touch, pencil, mouse) etc.

Seg煤n he visto este cambio se efectu贸 desde Chrome Version 55.
https://www.w3.org/TR/pointerevents/

10:24, estamos asignando una velocidad a Rapipepo

![](

Jajajajaja me dio mucha risa cu谩ndo Capipepo fue para arriba y desapareci贸.
Excelentes clases profe Estefany

Yo utilizo flechas:

        <button onmouseup="detenerMovimiento()" onmousedown="moverArriba()">鈫</button>
        <button onmouseup="detenerMovimiento()" onmousedown="moverIzquierda()">鈫</button>
        <button onmouseup="detenerMovimiento()" onmousedown="moverAbajo()">鈫</button>
        <button onmouseup="detenerMovimiento()" onmousedown="moverDerecha()">鈫</button>

Yo descargu茅 las flechas en svg, hay muchas p谩ginas en las que podemos encontrar imagenes gratuitas.

Despu茅s les apliqu茅 un poco de CSS

Por fin un profe que explica los atajos que usa 鈽癸笍馃挌

AMAZING THIS CLASS.

Para los que quieran camabiar los nombres de las direcciones a donde va el Mokepon:
鈫 = Alt+24
鈫 = Alt+25
鈫 = Alt+26
鈫 = Alt+27.

Para que la imagen de la mascota elegida sea din谩mica, es decir, que no por defecto salga Capipepo sino la que se elija

Dios m铆o me como la cabeza buscando errores en el anterior c贸digo y en la siguiente clase lo borramos鈥!

Hola, mi mokepon no se mueve en ninguna direcci贸n, no s茅 si sea porque los eventos onmousedown y onmouseup no son compatibles con mi chrome, o no s茅 como solucionarlo ya que en console no me arroja nada, ning煤n error, nada鈥 A algui茅n mas le ha sucedido, gracias por cualquier ayuda

Me rompi贸 la cabeza un rato esta l铆nea de c贸digo. intervalo = setInterval(pintarPersonaje, 50), no lograba entender, en los movimientos, en qu茅 momento pint谩bamos al personaje.

function moverIzquierda() {
    // asignamos un valor pero no movemos nada
    capipepo.velocidadX = -5
}

Hasta que puse un console.log("Estamos pintando al personaje...") dentro de pintarPersonaje y vi dentro de la consola despu茅s de seleccionar la mascota. Todo el tiempo estamos pint谩ndola aunque no la estemos moviendo. Por eso cuando llamamos a las funciones de mover, al cambiar el valor de la velocidad, nos parece que lo movi茅ramos, pero en realidad solo asignamos un valor, y aun cuando no la movemos la mascota se esta redibujando una y otra vez en su misma posici贸n.

function pintarPersonaje() {
    console.log("Estamos pintando al personaje...")  // algo as铆
    capipepo.x = capipepo.x + capipepo.velocidadX
    capipepo.y = capipepo.y + capipepo.velocidadY
    lienzo.clearRect(0, 0, mapa.width, mapa.height)
    lienzo.drawImage(
        capipepo.mapaFoto,
        capipepo.x,
        capipepo.y,
        capipepo.ancho,
        capipepo.alto
    )
}

Muy chevere trabajar con los clicks. Todo un reto asignar din谩micamente los eventos a los botones desde JavaScript y detener el serInterval.

Un peque帽o spoiler de c贸mo hacerlo con teclas

var teclas = {
    UP : 38,
    DOWN : 40,
    LEFT : 37,
    RIGHT : 39
};

function moverDerecha(){
    Capipepo.velocidadX = 5;
}
function moverIzquierda(){
    Capipepo.velocidadX = -5;
}
function moverArriba(){
    Capipepo.velocidadY = -5;
}
function moverAbajo(){
    Capipepo.velocidadY = 5;
}

function moverTeclas(evento){
    switch (evento.keyCode) {
        case teclas.DOWN:
            moverAbajo()
            break;
        case teclas.UP:
            moverArriba()
            break;
        case teclas.LEFT:
            moverIzquierda()
            break;
        case teclas.RIGHT:
            moverDerecha()
            break;
        default:
            break;
    }
}

function detenerMovimiento(){
    Capipepo.velocidadX = 0;
    Capipepo.velocidadY = 0;
}

document.addEventListener("keydown", moverTeclas);
document.addEventListener("keyup", detenerMovimiento);

Lo que se me ocurri贸 fue crear una funci贸n para cada sentido de movimiento (Derecha, Izquierda, Arriba y Abajo). Por supuesto tambi茅n tuve que crear 4 botones.

EL JS

function pintarPersonaje() {
    lienzo.clearRect(0, 0, mapa.clientWidth, mapa.height )
    lienzo.drawImage(
        capipepo.mapaFoto,
        capipepo.x,
        capipepo.y,
        capipepo.ancho,
        capipepo.alto
    )
}

function moverCapipepoDerecha() {
    capipepo.x += 5
    pintarPersonaje()
}
function moverCapipepoIzquierda() {
    capipepo.x -= 5
    pintarPersonaje()
}

function moverCapipepoArriba() {
    capipepo.y -= 5
    pintarPersonaje()
}

function moverCapipepoAbajo() {
    capipepo.y += 5
    pintarPersonaje()
}

EL HTML:

 <section id="ver-mapa">
            <h1 id="titulo">Recorre el mapa con tu Mokep贸n</h1>
            <canvas id="mapa"></canvas>
            <button onclick="moverCapipepoDerecha()">Derecha</button>
            <button onclick="moverCapipepoIzquierda()">Izquierda</button>
            <button onclick="moverCapipepoArriba()">Arriba</button>
            <button onclick="moverCapipepoAbajo()">Abajo</button>
        </section>
<code> 

Ahora corres que flipas.


Conforme avanza el curso hay una cosa que me preocupa, y es que este curso es de Programaci贸n B谩sica, no puedo ni imaginar lo que le va a pasar a mi cerebro al llegar al curso avanzado!!! 馃槯馃槯馃槯

para mi siento que ella va muy rapido xd pero lo bueno esque uno puede bajarle la velocidad a la clase e ir a su propio ritmo

una forma de reducir codigo

codigo de la profe:
capipepo.x = capipepo.x + capipepo.velocidadx
capipepo.y = capipepo.y + capipepo.velocidady

la forma de reducir codigo:
capipepo.x += capipepo.velocidadx
capipepo.y += capipepo.velocidady

Pens茅 que no era necesario crear la funci贸n de onmouseup ya que por l贸gica cu谩ndo soltas el click deja de ejecutarse el evento onmousedown y se deber铆a detener el movimiento

Al a帽adir la llamada a la funcion pintarPersonaje en intervalo, la llamada posterior ya no ser铆a necesaria al resultar redundante.
Yo la coment茅 e igual funciona.

sectionVerMapa.style.display = 'flex' 
intervalo = setInterval(pintarPersonaje, 50)
//pintarPersonaje()

Yo realice lo siguiente en html:

Y esto en el JS:

buena profesora muy buen consejo el de cerrar las lineas para encontrar mas rapido todo

Podemos agregar un evento para las flechas del telcado con el fin de que se pueda mover el personaje.
Este c贸digo va luego de dibujar el personaje, dentro de la funci贸n pintarPersonaje();

//Evento para mover con las flechas
  document.addEventListener('keydown', function(e){
    if(e.key === 'ArrowUp'){
      moverArriba();
    }else if(e.key === 'ArrowRight'){
      moverDerecha();
    }else if(e.key === 'ArrowDown'){
      moverAbajo();
    }else if(e.key === 'ArrowLeft'){
      moverIzquierda();
    }else{
      detenerMovimiento();
    }
  })
  //Evento para detener movimiento
  document.addEventListener('keyup', detenerMovimiento); 

Aqui mismo lo detenemos al levantar alguna tecla

todav铆a tengo el mismo error y ya revis茅 el c贸digo.

en mi opinion no me gusta como ense帽a siento que va muy rapido, ademas que explica muy enredado鈥 busque este tema en chat gpt y te explica mucho mejor 鈥!!!

0:37
Copiar linea - Shift + Alt + 鈫 / 鈫

M谩s atajos de vscode ac谩: (https://gist.github.com/Heipry/0c585a989953f46d56792cb2d93c0a15)

Tambi茅n se puede escribir as铆, creo que aplica al dicho Don鈥檛 repeat yourself

//as铆:
  moke.x += moke.velocidadX
//en vez de:
  moke.x = moke.x  +  moke.velocidadX

鈥淩apipepo鈥 jajaja, me imagin茅 un capipepo veloz.

yo tambi茅n voy a utilizar fechas 馃槂

capipepo el mejor rappitendero gente

si su mokepon se sale volando no se olvide colocar los parentesis en HTML despues de:
鈥nmouseup=detenerMovimiento()鈥

AYUDAAA ! le di a la tecla derecha, mi mokepon se fue y no volvi贸 mas );

section id="ver-mapa">
        <h1 class="titulo">Recorre el mapa con tu Mokepon</h1>
        <canvas id="mapa"></canvas>
        <button id="mover-mascota-up" class="moverMascota" onclick="moverCapipepo('up')">Mover 馃敿</button>
        <button id="mover-mascota-do" class="moverMascota" onclick="moverCapipepo('do')">Mover 馃斀</button>
        <button id="mover-mascota-le" class="moverMascota" onclick="moverCapipepo('le')">Mover 鈼</button>
        <button id="mover-mascota-ri" class="moverMascota" onclick="moverCapipepo('ri')">Mover 鈻</button>
    </section>
function moverCapipepo(moverDireccion) {

    switch (moverDireccion) {
        case "up":
            capipepo.y -= 5
            break
        case "do":
            capipepo.y += 5
            break;
        case "le":
            capipepo.x -= 5
            break;
        case "ri":
            capipepo.x += 5
            break;
    }

    pintarPersonaje()
} 

Lo aprendido hasta ahora, es poder mover un elemento de forma continua.

Ahora el reto es hacerlo para los dem谩s Mokepones, pero desde el Objeto como tal.

function moverDerecha(){
capipepo.velocidadX = 5

}

function moverIzquierda(){
capipepo.velocidadX = -5
}

function moverArriba(){
capipepo.velocidadY = -5
}

function moverAbajo(){
capipepo.velocidadY = 5
}

function detenerMovimiento(){
capipepo.velocidadY = 0
capipepo.velocidadX = 0
}

Nota: min 4:05 , seleccionen <button en vez de solo button

Gracias por esta clase , me la pas genial 馃槂 !

Que genial que explique todo desde el click a al evoluci贸n que sigue con las teclas, excelente profe !

Le cambiamos el nombre al final de la clase a 鈥淩apipepo鈥 馃槃馃槃馃槃

Gracias por la clase. 芦Rapipepo禄 est谩 feliz por moverse dentro del mapa ja, ja, ja.

Lo que m谩s me gusta es que Estefany ya se va recio con los atajos para irnos despegando del cursor 馃ぉ

Se me ha roto el codifo y no s茅 porqu茅

excelente truco estefany , gracias

document.onkeydown = (e) => {
        const keypress = e.key;
        switch (keypress) {
            case 'ArrowDown':
                moveDown();
                break;
            case 'ArrowUp':
                moveUp();
                break;
            case 'ArrowLeft':
                moveLeft();
                break;
            case 'ArrowRight':
                moveRigth();
                break;
        }
    };

Cree la funcion para moverlo con las flechas

Marcar muchas l铆neas a la vez :

CTRL + D

<canvas id=鈥渕apa鈥></canvas>
<button onclick=鈥渕overArriba()鈥>馃憜</button>
<button onclick=鈥渕overIzquierda()鈥>馃憟</button>
<button onclick=鈥渕overAbajo()鈥>馃憞</button>
<button onclick=鈥渕overDerecha()鈥>馃憠</button>
</section>

vertical
function moverCapipepo() {
capipepo.y = capipepo.y + 5
pintarPersonaje()
}

Sin duda alguna me encant贸 esta clase, justo cuando empec茅 a mover los personajes sin poder detenerlos, en vez de frustrarme lo que me di贸 fu茅 un ataque severo de risa, porque me pareci贸 muy divertido. Posteriormente, resolv铆 lo que fallaba y todo result贸 mejor, gracias teacher

asi me quedo con una sola funcion de mover y cargando el event listener al archvo de js

<code> function moverPicachu(){
    botonesMov=document.querySelectorAll(".bMov"); // guardamos en variable todos los elementos de la clase bptpmes de movimiento
    botonesMov.forEach((boton) => {        
        boton.addEventListener("click", (e) => {                     
            if(e.target.textContent=="Arriba"){
                picachu.y-=5
                pintarMokepon()
            }
            if(e.target.textContent=="Abajo"){
                picachu.y+=5
                pintarMokepon()
            }
            if(e.target.textContent=="Izquierda"){
                picachu.x-=5
                pintarMokepon()
            }
            if(e.target.textContent=="Derecha"){
                picachu.x+=5
                pintarMokepon()
            }
        })
    } )        
    
}

![](file:///C:/Users/CRISS/Documents/CURSO%20PROGRAMACI%C3%93N%20PLATZI/MOKEP%C3%93N/index.html)

  1. tenemos dos propiedades mas de los botones onmausedown = 鈥渇uncion()鈥 y onmauseup = 鈥渇uncion()鈥
  2. ahora vamos agregarle a la clase mokepon velocidadX y velocidadY , justo como lo haciamos en unity
  3. y en canda funcion de movimiento lo que se va a hacer es actualizar la velocidad a 5 y la funcion pintarpersonaje() ya no se va a llamar tanto
  4. y dentro de pintarpersonaje() sumaremos la posicionXY con la velocidadXY
  5. Creamos una variable llamada intervalo para controlar el tiempo que vamos a llamar una funcion
  6. decimos que intervale = setInterval( funtion, time )
  7. creamos una funcion llamada DetenerMovimiento() y esta sera llamada con el OnmouseUp en todos los botones

La parte que m谩s me gust贸 de esta clase es cuando capipepo 鈥渄eja la peluca鈥 en 9:09.

Dijo: 鈥渘o entiendo nada, mejor me voy鈥 lol

Hola! a mi como siempre me gusta utilizar una sola funci贸n cuando son cosas muy parecidas, en este caso los movimientos que s贸lo cambia la direcci贸n, as铆 que utilic茅 1 sola funci贸n y le pas茅 2 par谩metros (variables), una de X y otra de Y, as铆 puedo usar la misma funci贸n para todo y s贸lo es pasarle el valor de X o Y鈥

function changePetVelocity(x,y){
    capipepo.xVelocity = x
    capipepo.yVelocity = y
    movePet()
}

Y los botones quedaban algo as铆鈥

<button onmousedown="changePetVelocity(0,-5)" onmouseup="changePetVelocity(0,0)">Up</button> 

Es increible la forma en que se puede interactuar con el codigo de JS el control de movimiento de un personaje. Asi que de eso viene la programacion de viejos juegos en un plano cartesiano. Interesante. Ahora, si tengo mas curiosidad de aprender mas de este.

Siempre atentos a cuado escribimos nuestro c贸digo, sobre todo al utilizar el auto completado, porque en ocasiones nos comemos palabras o letras y luego se nos parte el c贸digo.

Usamos el m茅todo onmousedown = " "para mover nuestro elemento cuando mantengamos presionado click. Tambi茅n usamos onmouseup = " "para detener el movimiento al soltar el clic .

Y se marchoo鈥 Jajajaj鈥
recuerden Ctrl d , Para seleccionar y modificar varias l铆neas que tengan t茅rminos iguales.

Me parece mas interesante hacerlo con las teclas

Ok voy iniciando la clase as铆 que no se qu茅 pasar谩, pero en mi caso decid铆 realizar una 煤nica funci贸n la cual recibe un par谩metro de direcci贸n y con base a este se mueve la mascota.

As铆 quedaron los botones:

 <button onclick="moverCapipepo('derecha')">Derecha</button>
      <button onclick="moverCapipepo('izquierda')">Izquierda</button>
      <button onclick="moverCapipepo('arriba')">Arriba</button>
      <button onclick="moverCapipepo('abajo')">Abajo</button>

Y as铆 qued贸 la funci贸n:

function moverCapipepo(direccion){
  if (direccion === 'derecha'){
    capipepo.x = capipepo.x + 5
    pintarPersonaje()
  } else if (direccion === 'izquierda'){
    capipepo.x = capipepo.x - 5
    pintarPersonaje()
  } else if (direccion === 'arriba'){
    capipepo.y = capipepo.y - 5
    pintarPersonaje()
  } else {
    capipepo.y = capipepo.y + 5
    pintarPersonaje()
  }
}

casi no mucho explican porque se pone cada s铆mbolo o signo cuesta un poco comprender

馃憤

les reomiendo agregar onmouseout lo que hace es detectar cuando el mouse sale de el boton

y onmouseenter cuando el mouse entra en el boton

<button 
	onmouseout="detenerMovimiento()"
</button>
    

Una manera facil de acomodar los botones el display "grid"
el navegador mozilla developer, me ayuda a ver de una forma diferente las seciones

Genial clase!! Muy buenos fundamentos!

Lo hab铆a echo igual con botones pero de otra forma, ahora estoy interesado en saber como moverlo con el teclado, pero ya me doy una ideas mas o menos