Movimiento hacia todas las direcciones

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’t repeat yourself

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

“Rapipepo” 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:
…onmouseup=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 “Rapipepo” 😄😄😄

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=“mapa”></canvas>
<button onclick=“moverArriba()”>👆</button>
<button onclick=“moverIzquierda()”>👈</button>
<button onclick=“moverAbajo()”>👇</button>
<button onclick=“moverDerecha()”>👉</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()
            }
        })
    } )        
    
}


1. tenemos dos propiedades mas de los botones onmausedown = “funcion()” y onmauseup = “funcion()”
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 “deja la peluca” en 9:09.

Dijo: “no 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