Curso JavaScript: 85. DOM: Ejercicios | Eventos del Teclado (movimientos y colisiones) -

[@IAVIC]

Jon muchas gracias por subir este contenido tan completo en tiempos de pandemia, con tanta gente en desempleo y agobiada por la salud , la falta de libertad y el hundimiento económico , tú gente como tú sois un faro y un ejemplo. Un cordial saludo desde España.

[@jonmircha]

🤗💛

[@syrax-lk]

Que buen video por dios .Profe , decidí dejar mi trabajo porque ya era insostenible el tema económico. Vengo desde Marzo con su curso (con 4hs diarias para programar) y recién en Julio me volqué totalmente a JS .La idea es que con algunos pocos ahorros y ayuda de mi novia

[@jonmircha]

👋🏻😉 Mucho ánimo

[@Rogeltelo-tw8wj]

Hola como te ah ido, yo también deje mi trabajo para apostarle a la programación porque ya estaba harto, claro que nuestras situaciones no son las mismas. Apenas hace unos meses empezé y me está costando horrores, pero no lo voy a aflojar hasta conseguir mi primer trabajo de esto.

[@j.b.6788]

Clase magistral, icreíble. Eres el mejor, Jon. Tu cara debe aparecer en el diccionario cuando se busque la palabra docente 👏

[@jonmircha]

👋🏻😉

[@MATOCLANES]

Hola Jon Mircha, soy un nuub en tema de programación, pero desde que encontré tu canal a parte de entretenido he aprendido bastante y obviamente he visto todos tus vídeos de JavaScript hasta este. Y espero ver pronto los demás videos que tienes, muchas gracias por tu tiempo y dedicación Saludos desde Chile

[@jonmircha]

De nada, saludos desde México, comparte para llegar a más gente

[@soyjaider8996]

EL mejor curso, siempre me reto a hacer algo nuevo en cada uno de tus videos, y en este video, busque la manera de activar y desactivar el boton del menu hamburguesa con un shortcut, los reto a que lo hagan tambien.

[@jonmircha]

👋🏻😉

[@johnherrera5913]

Master Si hay algo que tengo que agradecer es el buen contenido, un curso de alto nivel muchisismas gracias y que sigan los exitos.

[@jonmircha]

😉🙌🏻

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy bueno el curso!!!

[@jonmircha]

😉👋🏻

[@flaca7342]

Hola, buen día! Soy muy novata con javascript, pero lo que hice fue agregar un manejador de eventos para el resize del window porque la pelotita me quedaba afuera cuando la ventana estaba al 100% y luego la achicaba. Así que implementé este manejador de eventos que trae la pelotita al centro. Seguro se puede hacer mejor. /** asociar el manejador al evento de la ventana */ window.addEventListener("resize", (e) => { ballOnWindowResize(e, ".ball"); }); /** manejador del evento */ export function ballOnWindowResize(e, ballSelector) { if (e.type === "resize") { const $bola = d.querySelector(ballSelector); x = 0; y = 0; $bola.style.transform = `translate(${x * 10}px, ${y * 10}px)`; } }

[@jonmircha]

👍🏻

[@carlosjavierorozco8418]

Me encanto este ejercicio de colisiones y mucho hype por el de countdown! mil gracias vale oro todo tu contenido!

[@jonmircha]

😉👋🏻

[@moosesg1049]

Sin duda es el curso mas completo que eh visto de JS gracias profe por tomarse el tiempo de explicar estos metodos con particas muy geniales como esta

[@jonmircha]

👋🏻😉

[@instintoimagen]

Este es el mejor #curso de #javascript

[@jonmircha]

🥰🙌🏻

[@GerentedeSistemas]

Excelente video, no soy un experto en desarrollo de juegos, pero recuerdo haber programado durante mi época de estudiantes juegos como Tic Tac, Puzzle, Snake, Pong y Pacman, en c++

[@braianrico4422]

Genial, es lo único que se puede decir respecto a todo tu contenido. Gracias a ti me encuentro más motivado cada día, anteriormente quería incursionar en este mundo por negocio, pero tu con tu manera de mostrar todo y tu pasión me has cambiado la manera de pensar y cada día visualizo los videos con la pasión que me faltaba. Mil gracias de verdad... 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

De nada 🙌🏻🙌🏻🙌🏻

[@Ni_idea_de_tecnologia]

Que gran ejercicio. yo he notado que a veces la pelota se sale un poco del cuadrado por lo que he introducido un else if para reducir el número de pixels por salto de la siguiente forma: case 37: if(limitsBall.left>limitsStage.left&&(limitsBall.left-limitsStage.left>30)){ x--; e.preventDefault(); } else if(limitsBall.left-limitsStage.left>=1){ x=x-0.2; e.preventDefault(); } break; Muichas gracias Sr. Mircha

[@rutita]

🍎 Gracias por la paciencia para enseñar, los que somos primerizos en el mundo de la programación lo valoramos mucho. Un abrazo 🍎 (Como niña con juguete nuevo haciendo shortcuts 😄)

[@jonmircha]

jejejeje haz uno para imprimir Manzanitas 🍎🤭

[@rutita]

@@jonmircha buena idea!! Lo voy a hacer !!😄🍎🍏

[@tongastonga22]

Muchas gracias Jon!!

[@jonmircha]

Con gusto👋🏻😉

[@zeta-index]

Que buen curso. Está genial. Mil gracias al profesor. Y para que no se desborde la bola del contenedor, lo que hice fue al final de cada if del switch sumar o restar dependiendo del caso el mismo valor por el cual se multiplicó los valores de X y Y. Jon no sé si ésto es eficiente o nó, pero funcionó. Aquí una parte del código. break; case 40: if(limitsBall.bottom

[@vinilsign]

funciona

[@Bisson156]

Hola Jon! Muchas gracias por darnos tanto contenido de calidad. Saludos!

[@jonmircha]

Con mucho gusto

[@AngelSalazar-uf5fk]

Jon me encanta ! yo lo hice ami manera y funciona muy bien, pero me encanta que siempre tengas cosas con que sorprender

[@AngelSalazar-uf5fk]

Pero yo lo hice cómo dicen en MDN con canvas, de igual manera es lo mismo

[@jonmircha]

Muchas gracias!!

[@juansebastian2721]

Gracias Jon, estoy aprendiendo mucho; creo apenas termine este empezare con el de Figma.

[@jonmircha]

😉👏🏻

[@kikemadrigalr]

Hola, saludos. Ok este vídeo me dejo claro que no estaba tan perdido a la hora de hacer mi ejercicio que lo subí ayer en el vídeo anterior, utilice getBoundingClientRect() pero tu forma usarlo para obtener los limites creo que facilita un poco las cosas. yo lo de ese objeto obtuve las medidas de ambos elementos, hice un calculo para evitar que se saliera la bola. No utilice la colisión. Pero un día mas en el que me enseñas algo nuevo. Ademas de que para evitar el tema de cancelar el scroll con las flechas, lo que hice fue, tener como un estado desactivado del esenario y la bola. Es decir que asigno el evento keydown solo cuando se activa el escenario clikeandolo.

[@jonmircha]

Bien :)

[@josefabianbeltranmeza6914]

Super Jon, muchas pero muchas gracias. Siempre se aprende algo nuevo con cada video de este y todos tus cursos.

[@jonmircha]

🧔✌

[@brianalexisalmada6522]

Otro video que se suma a la colección de los "Excelentes videos" :D Yo para solucionar lo del desborde (después de probar con Math.round() y otras cuentas locas) lo que hice fue en lugar de mover x/y * 10, lo hice por 9 jeje. De esa forma, la cuenta de pixeles da exacto para que se frene en el borde del Stage.

[@jonmircha]

😉👍🏻

[@MrRampengu]

es verdad con 9 se queda dentro del limite o:

[@vanhellsing3029]

Ö

[@EducacionCultura1992]

Gracias profe

[@jonmircha]

Con mucho gusto

[@camilogomez5243]

Me toco hacer este ejercicio por medio de un canvas , pero me encanto tu explicacion ..muchas gracias por estos ejercicios... aunque parecen sencillos siempre hay que buscar y se termina aprendiendo bastante!!.

[@jonmircha]

:)

[@juanestebanvelezloaiza6144]

Hola compañeros, les comparto mi solución: codepen.io/demonqilin/pen/MWrMzGQ En lugar, de que la pelota se detuviera, hice que cuando llegara al limite de la cara traspasara al otro lado. Agradeceria el feedback, y ahora sí a ver este video del todopoderoso Jon MirCha.

[@jonmircha]

😀👍🏻

[@emanuelr9815]

Una gran clase profe, no podría esperar menos de usted!!!

[@jonmircha]

Gracias por tu apoyo

[@victormaldonado6269]

Excelente ejercicio, muchas ¡gracias! Tuve que consultar MDN, W3schools y muchas fuentes, usé getComputedStyle() getPropertyValue, parseInt() para calcular la bendita dimensión de la caja y luego .style.setProperty para cambiar los valores de left y top, usé un div (con position: relative) en lugar de article (con position:flex), no sabía que evento usar, ni los nombres de las teclas. Duré mas de un día hasta que lo logré. Luego veo la solución y ya sabiendo de un par de funciones que usó que me resuelven la mitad del tema, se reduce una buena parte del código. Además en 5 minutos me resuelve todo un mar de dudas y claro surgen otras. Por ejemplo, como el EventListener es global y si si el uso de las teclas de flechas me sirve para hacer cosas en diferentes elementos de la página, pero quiero que actúe solo sobre el que yo indique ¿cómo evito que lo haga sobre los demás?

[@benjaminquattrocchi9841]

Victor tenes el codigo para verlo, y asi ayudarme? yo estoy intentando hacerlo como vos, pero quede trabado en una parte

[@A.RadelM.F.]

Hola, profesor. Actualmente, mientras estuve haciendo este ejercicio, en la documentación de MDN se especifica que el keyCode ya está depreciado y se desaconseja su uso. He visto que se usa el code o el key. En relación a la pelotita que sobresale, me parece que no es por los decimales, sino por los 10px de movimiento y los px's faltantes para que los límites se topen. Es decir, Si faltan 7 px para que los límites se encuentren, el if va a validar a true (para cualquiera de los 4 casos: up, left, down & right) y va a efectuar una traslación de 10px, entonces van a sobresalir 3px por fuera del borde.

[@fadelsalem4172]

Muchas gracias Jon. Estamos aprediendo mas y mas. "Tera" likes. He solucionado el problema de la salida del balón de arriba y abajo, ajustando los movimientos asi: if(limitsBall.top > limitsStage.top + 10) y-- if(limitsBall.bottom < limitsStage.bottom - 10) y++ Un saludo

[@jonmircha]

😉👍🏻

[@addevmoises]

No entendí mucho este ejercicio pero cuando vea las transformaciones en tu canal, retomaré este ejercicio.

[@jonmircha]

;) En este video puedes aprender animaciones, transiciones y transformaciones ;) kzbin.info/www/bejne/r5ucZHSNjZWDlc0

[@addevmoises]

@@jonmircha ooh muchas gracias lo veré para aprender las bases

[@zobeklol7852]

developer.mozilla.org/en-US/docs/Web/CSS/transform aca hay una explicación rapida de las transformaciones

[@NonsenseIsOver]

Sos fantástico profe!

[@hernangarcia77]

Magistral tu clase jon. Jodete phaser, el escenario de jon es responsivo ;)

[@jonmircha]

jajaja

[@timawid]

Lo de mover la pelota estuvo un poco difícil pero estoy seguro de que lo dominaré

[@jonmircha]

👋🏻😉

[@AlexComanKreitos13]

Hola Jon, que tal como estas? Muy interesante el video, lo he intentado en mi pc y es muy entretenido, he intentado crear una botonera para poder usar desde los mobiles la bolita, pero no consigo añadir los keyCodes a los botones, es decir que cuando le de click al botón haga la misma function de las flechas en el teclado. Me podrías echar un cable con algún tip? Muchísimas gracias de antemano, tienes muy buen contenido y es de muchísima ayuda!!

[@miguelantonioescuderoperal7485]

Maestro JonMircha gracias por este tema, nuevos metodos aprendidos :)

[@jonmircha]

Con mucho gusto

[@carlesbautista8293]

Muchas Gracias Jonathan por tu tiempo!! :), como puedo hacer que vaya en diagonal la bola? con keyPress y ArrowUp+ArrowLeft no me funciona, gracias!!

[@jonmircha]

Tendrías que detectar la pulsación de ambas teclas y aplicar el translate en X y Y simultáneamente

[@Juankybi]

muy bien, un codigo o solucion sencilla, e inteligente

[@stiven_as02]

Gratitud Profe Mircha, tan pronto me sea posible le agradeceré por tanto aporte, el mejor contenido de programación que se puede encontrar. Tengo una pequeña inquietud con el intento de comprender un poco mejor. Leyendo el codigo, en este ejercicio sumerce crea el listener keydown en el index.js y importa la función. Y yo probando importe la función en el listener DOMContentLoaded en index.js, y agrege el listener en keyDown en el teclado.js. Ambas por lo que noto funcionan igual, pero me queda la incertidumbre si tienen algun significado relevante la manera en que se elaboran las 2 versiones..?

[@jonmircha]

Simplemente trato de que todo lo que haga funcionar en mi módulo quede empaquetado en el archivo correspondiente, pero amnas formas funcionan ;)

[@stiven_as02]

@@jonmircha A okey, llegue a pensar que se debía ser prudente cuando colgar o no en el DOMcontent, gratitud por la contesta...!!!🤜

[@santi35]

Jon! Buenas, este curso esta cada vez mejor…..quería hacerte solo una consulta porque no se coloca todas las funciones dentro del addEventListener del DOMContentLoaded?

[@jonmircha]

🤔 en qué parte del video?

[@rafaelchiguil8168]

Espero que veas Intersection Observer. A ver si nos podrías enseñar algunos trucos. Saludos.

[@jonmircha]

Hay dos ejercicios más adelante sobre intersection observer

[@jesussantos2934]

Estoy un poco confundido con la etiqueta article, no se de quien esta heredando el width? Pensé que seria del section, pero lo consulte y tienen valores diferentes.

[@rafaelrodriguezcalvente8482]

Buenas Jonathan, desde que conocí tu canal todos los días saco un rato para continuar tanto con este curso como con otros como los de Node.js o el de Responsive Design. Quería preguntarte sobre un tema y es que me encuentro a muchos desarrolladores web profesionales que me dicen que hoy en día no es necesario conocer en profundidad HTML + CSS porque la gran mayoría de empresas usan para sus proyectos frameworks como Bootstrap, Foundation, etc... ¿ Qué opinas al respecto? Un saludo desde España!!

[@jonmircha]

Es verdad que se ocupan mucho, yo mismo ocupo Bootstrap y Materialize CSS, pero el conocimiento que tengo de HTML y CSS me permite sacarle un provecho extra a estas herramientas, incluso a veces hackeo su código y modifico su comportamiento, justo al gran conocimiento que tengo de HTML y CSS

[@rafaelrodriguezcalvente8482]

@@jonmircha Genial, muchas gracias !! ☺️

[@elcaosdejosh6622]

Cuando terminé de resolver el ejercicio de eventos del teclado (con metodos muy diferentes y debo admitir que no sabia del getBoundingClientRect eso me habría ahorrado un dolor de cabeza jajaja) esa noche me fui a dormir y pensé "Estaría perrón hacer una cuenta regresiva" y justo el siguiente ejercicio es realizarla JAJAJAJA que curiosa es la vida

[@jonmircha]

😉👍🏻

[@matiasromera330]

muy buen video che!

[@jonmircha]

🤙

[@normanejm]

Profe, tocando éste tema. Y si hace algunos vídeos o cursos (Básicos) de crear videojuegos con html?? Algo simple, es como para tener una idea de lo que puede llegar a ser... Como una especie de SuperMario Bros. Algo así como plataformas...

[@jonmircha]

jejejeje 🤫 estoy preparando algo de eso para el próximo año, por que estoy dando clases en una universidad orientada al desarrollo de videojuegos

[@normanejm]

@@jonmircha 😯❤️🤩 Genial profe!!! Espero que también le éste yendo bien dando clases en la U. 💪

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@helipalacio8772]

👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

[@jonmircha]

😉👋🏻

[@fd2195]

profe!! como es que puedo buscar que metodos existen, porque al igual que getBoundingClienteRect hay varios que no conozco y no se que extension recomiendan para el autocompletado de metodos de js

[@jonmircha]

VE a la documentación de MDN

[@ginesnm7018]

Muy buen curso!! que raro se hace la y llamarla ye, en España decimos y griega jeje. Un saludo y felices Reyes Magos

[@jonmircha]

jejeje acá también le decimos i latina e y griega, pero también le decimos ye :P

[@braianrico4422]

Es como #gatito jajajaj Jamás había escuchado ese termino, y ya lo utilizo frecuentemente y nadie me entiende jajajja

[@jorgequintero4749]

Hola voy por este episodio y pues una duda ya que hasta el día de hoy investigue y el keyCode e which ya los rayaron en MDZ que alternativa puede haber!!

[@jonmircha]

key

[@jorgequintero4749]

@@jonmircha Gracias el key me trae el nombre de la tecla que presiono solamente ? ensaye con code tambien pero es similar

[@IsaacGarcia-qq8oq]

Hola profe como se podría hacer para que el desplazamiento del scroll solo se desactive en el stage? ya que no tiene target, talvez asignar el evento directamente al section y no al document ?( no se me ocurre mas que eso

[@jonmircha]

Podría ser 😉

[@adriel8152]

Yo hice que al dar clic al stage se desactive el scroll del document y las flechas tomen el control de la pelota. Para activar de nuevo el scroll del document das clic fuera del stage o a un botón de X que puse

[@andresarturomorenohurtado8386]

Hola mirchar, tengo una duda el punto y coma desde tu perspectiva es mejor ponerla o no ponerla?

[@jonmircha]

Es una buena práctica y si no sabes cuando debe usarse o no, mejor si ponla

[@federicoraulmaciasaparicio1339]

Mi experiencia es que justamente cuando a uno se le olvida es justamente cuando es necesario el punto y coma. Así que yo prefiero ponerlo siempre, por si acaso...

[@user87546]

Siempre trato de ponerla por si a caso. No olvides usar proteccion

[@ronaldm.r]

Mmmm tengo una traba o algo asi... usé moment.js para lo de la fecha pero tuve que hacer los calculos de conversiones y todo pero resulta que el tiempo ya sea hora, minutos, segundos me los da super largos, o sea, son correctos pero me son largos por la diferencia que hay entre las fechas, que me recomendaria hacer? intenté quitar unos cuantos numeros con los string pero se me ha hecho imposible

[@Juicio87]

Si en vez de multiplicar por 10 las variables "x" e "y" las sumo el primer movimiento lo hace hacia la derecha independientemente de la tecla que pulse 🤔 Yo este ejercicio lo intenté resolver con el getBoundingClientRect() pero no me dejaba cambiar los valores de esas propiedades

[@jonmircha]

😮

[@matiasmaidana2248]

El Visual Studio Code me dice que la propiedad keyCode está obsoleta. ¿Qué propiedad la reemplazó?

[@paulpaucarb]

#jonmircha

[@helipalacio8772]

👨

[@jurrrgenOF]

33:57 perfecto para hacer una bomba jajaj

[@jonmircha]

🤣🤭

[@RoyArrascaeta]

Hola Jon, de qué manera podríamos hacer para que el movimiento de la pelota solo funcione si situamos el ratón sobre el escenario, o si le hacemos click a él? Habría que asignar el evento "click" al article #stage y dentro mandarle toda la función "moveBall"??

[@jonmircha]

Sería cuestión de probarlo pero tú lógica me suena correcta, prueba y nos cuentas :)

[@luchogrz273]

Excelente video. Solo tengo un problema que no logro superar. Cuando quiero que la pelota colisione, luego de escribir el codigo y probarlo me aparece $ball.getBoundingClientReact() is not a function. Minuciosamente trate de ver si el codigo estaba mal escrito y nada. Todo funciona hasta que coloco las variables limitsBall y limitsStage. Gracias!

[@jonmircha]

🤔

[@luchogrz273]

@@jonmircha escribi getBoundingClientReact en vez de getBoundingClientRect JAJA

[@heimancastro1954]

🤓🤓🤓🤓🤓🤓 la bolita la bolita

[@thejb9902]

Me siento frustradoooo... Si tan solo investigara un poco mas... Pero a lo que llegue a investigar estaba realizando mi forma con el canvas. pero solo llegue a realizar un pequeño lapiz con las teclas del evento. asi poder dibujar en el stage, pero me encanto esta forma. nada que ver con el canvas

[@jonmircha]

🤓👍🏻

[@yovanyescobarrojas2041]

hola profe mircha , tengo un problema el ejercicio lo estoy realizando a mi manera , tengo un problema cuando uso la propiedad : getBoundingClientRect(), la lanzo por consola me arroja los dato pero cuando muevo la pelotita , no cambian los valores left y right se quedan estaticos , yo no estoy utilizando la propiedad translate , simplemente le di position reative ala pelottita en el css y con js lo muevo en las propiedades top , left, right etc. muchas gracias por su comprensión

[@xavicode3436]

si lo has pasado a una variable no te arroja los cambios, en cambio si directamente le pones el metodo al element exempl: console.log($ballGame.getBoundingClientRect().right) ; console.log($containerGame.getBoundingClientRect().right); en este caso veras los cambios en consola. Me paso lo mismo que a ti

[@user87546]

4:00 alguien se acuerda para que era el default?

[@paulamainini6749]

Jon gracias por el video. Hice el mismo código que vos pero cuando muevo la pelotita se mueve una sola vez para cada lado, como si solo admitiera 4 posiciones de la bola, como si no quedara guardado el movimiento anterior, pero el código es el mismo. Alguien sabe que puede estar pasando?

[@jonmircha]

Sube tu código a un codesandbox, así platicado ni como ayudarte

[@fadelsalem4172]

Tenia el mismo problema. Prueba donde tienes declarados los const x= 0, y= 0, deben estar antes de la function. Un saludo

[@user87546]

getBoundingClientRect no es un metodo que venga del objeto window. No entiendo de donde salen estos métodos

[@lesbaixllobregat5664]

Al momento de hacer el ensayo con las flechas me sale este error: Uncaught TypeError: Cannot read properties of null (reading 'style') Haciendo énfasis aquí: $ball.style.transform =`translate(${x * 10}px, ${y * 10}px)`; Pero está bien la sintáxis, no entiendo porqué, ojalá pueda ayudarme.

[@brandonmunozmazariegos1555]

declarate tus variables de x,y inicializadas en 0?

[@compaluis51]

Mismo caso, me da el mismo error

[@andrespaez1301]

Buen día. Necesito de su ayuda... He efectuado el mismo proceso y paso a paso, sin embargo al momento de ensayar el movimiento, la consola me muestra un error y no he podido entender cual es el error, me muestra esto la consola: $ball.style.transform = `translate(${x * 10}px,${y * 10}px)`; Haciendo enfasis en que el error es style pero no entiendo el por qué.

[@jonmircha]

😮

[@lesbaixllobregat5664]

Hola amigo, tengo actualmente el mismo errior, cómo lo resolviste?

[@compaluis51]

Tengo el mismo error Andrés, lograste corregirlo ?

[@andrespaez1301]

@@compaluis51 const d = document; // CAP 84 ↓↓↓ export function shortcuts(e) { if (e.key === "q" && e.altKey) { alert(`Haz lanzado una alerta con el teclado`); }; if (e.key === "c" && e.altKey) { confirm(`Haz lanzado una confirmación con el teclado`); }; if (e.key === "p" && e.altKey) { prompt(`Haz lanzado un aviso con el teclado`); }; } // CAP 84 ↑↑↑ // *********************************************************************************************************** // *********************************************************************************************************** // CAP 85 ↓↓↓ /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Variables para el movimiento en X y Y: let x = 0, y = 0; /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// export function moveBall(e, ball, stage) { //Primero enlazar las clases a variables del DOM const $ball = d.querySelector(ball), $stage = d.querySelector(stage); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Variable para la colisión de la pelotita: --- variables para los limites: const limitBall = $ball.getBoundingClientRect(), limitStage = $stage.getBoundingClientRect(); ////////////// un console log para ver sus valores: // console.log( limitBall, limitStage); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Un console log para saber para saber el keyCode de las teclas que se van a usar: //console.log(e.keyCode); // Y otro console para saber que tecla se está oprimiendo: //console.log(e.key); //Luego un switch case para hacer funcionar las teclas: //Este switch funcionara con los keyCode de las flechas (37 izquierda, 38 arriba, 39 derecha y 40 abajo) switch (e.keyCode) { // IZQUIERDA -- LEFT case 37: if (limitBall.left > limitStage.left) { x--; //Sentido negativo e.preventDefault(); //Cada preventDefault se lanza con su evento dentro del case para que no afecte externamente los shortcurts o las teclas especiales. } break; // ARRIBA -- TOP case 38: if (limitBall.top > limitStage.top) { y--; //En la web el eje y es invertido, por eso el negativo es hacia arriba. e.preventDefault(); } break; // DERECHA -- RIGHT case 39: if (limitBall.right < limitStage.right) { x++; //Sentido positivo e.preventDefault(); } break; // ABAJO -- BOTTOM case 40: if (limitBall.bottom < limitStage.bottom) { y++; //Sentido hacia abajo. e.preventDefault(); } break; default: break; } $ball.style.transform = `translate(${x * 10}px,${y * 10}px)`; //translate (posición X, posición Y) //Esto es lo que le da el movimiento y la dirección a la pelota. }

[@RochaNahuel]

Jon algo que veo que haces siempre y no entiendo que pasa , muchas veces creas una primer variable const y debajo creas otras identadas pero sin declararlas como const ? que pasa ahí?

[@RochaNahuel]

otra cosa que no entendí en el style.transform al valor de translate le decis x*10 siendo que x la iniciaste en 0 entonces el resultado no debería ser 0 por lo tanto la pelotita nunca se movería?

[@luisvasquez1090]

@@RochaNahuel pasa que cuando estras al switch dependiendo del caso se suma o se resta una unidad bien sea en X o en Y . x-- x++ y-- y++

[@luisvasquez1090]

Compañero cuando hace eso es por que esta declarando en bloque las variables, fijate que entre cada variable usa una coma .

[@Juankybi]

después de 1 hora con un error. Resulta que limitsBall tenia que declararla antes. Como soy malo, muy malo, cometo muchos errores, y esta vez fui a leer documentación y parece que a ti si te deja hacerlo sin declarar como let la variable, por ejemplo. Y a mi me obliga a declararla. Puede que en estos 2 meses algo haya cambiado, o que? Porque yo miro tu código y tu no habías declarado la variable limitsBall. No importa, si eso me da tablas, y aprendo a aprender.

[@jonmircha]

Si declaras una función de forma expresada, es decir como variable, su invocación forzosamente va despues, si con forma declarada, es decir con la palabra function, da igual donde la pongas

[@angelicas8090]

En realidad el profesor si declara las variables limitBall y limitStage, lo hace con el mismo const de $ball. Si miras bien en esas líneas de código no hay puntos y comas, si no comas, solo que no pone todo en una sola línea para que se vea mejor.

[@davidavellaneda133]

Alguien sabe cómo se redondean esos valores del getBoundingClientRect, ya intenté con el Math.round() de muchísimas maneras pero nada que puedo, alguien me puede ayudar?

[@jonmircha]

😮

[@rodrigoromano7608]

estoy en la misma.. ya probe con los métodos de la clase Math.

[@oliviataveras2808]

no se que pasa pero solo me funciona en los lados

[@codelessbudd7108]

fijate en los operadores que usas para comparar arriba y abajo, quizas estan al contrario de como deberian estar :)

[@elweonweandolaweafome]

🚨🚨🚨🚧28:29 patrulla de la programaciòn, muestre su còdigo🚧🚨🚨🚨

[@jonmircha]

😅🚨

[@ronaldm.r]

Cuando termine todo los ejercicios del DOM lo subiré como una web, para que vea los resultados ya que codepen es enemigo de los módulos jajajaja