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.
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.
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
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.
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)`; } }
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
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++
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... 🧙♂️🧙♂️🧙♂️
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
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
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?
🍎 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 😄)
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.
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
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.
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!!.
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.
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
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.
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.
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!!
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..?
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!!
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
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?
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...
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!!
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
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
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
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
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
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
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"??
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...
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!
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
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
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?
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.
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
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.
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.
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í?
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?
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é.
@@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. }
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?
