Desarrollo de Juego ARKANOID con HTML, CSS y JavaScript

[@AlbertoCarrizo]

Que emoción verte hacer un juego. Fue uno de los primeros juegos que hice en código de máquina del z80 hace como 35 años. Que viejo que estoy

[@SoyArthu]

Midu, lo del 1:24:47 es porque la pelota no rebota directamente apenas toca el ladrillo, sino que se esconde detras del ladrillo y después rebota, como si tuviera espacio entre ladrillos Cuando cargas las imagenes const clipX = currentBrick.color * 32 ctx.drawImage( $bricks, clipX, 0, (Lo tienes en 0, pero si lo ajustas a 7 u 8, te vas a dar cuenta de que hay un espacio super grande donde entra la pelotita, y hace el efecto que te salio en 1:24:47) 32, 16, currentBrick.x, currentBrick.y, brickWidth, brickHeight Haces que reviva esa llama que perdi por ser dev, saludos midu

[@Rogeltelo-tw8wj]

Porque dejaste la profesion?

[@luiggiandrade990]

​@@Rogeltelo-tw8wj para ser feliz... 😂

[@SoyArthu]

Me gradue hace 2 años y nunca he ejercido, solo me enseñaron lo básico y ya, además de que no te especializan en un lenguaje, sino que te dan las nociones y tu le buscas. También el factor de que yo no tenía contenmplado estudiar informatica, yo quería ir al sector de las ciencias de la salud, pero $$$$$$ muy cara y mi IQ no da para ser odontologo, así que continue con la carrera técnica y termine la Lic. en informática De a ver encontrado antes a Midu y Moure, seguramente sería bueno, pero ahora con tantos lenguajes que piden en las empresas pffff, me frusta mucho no saber programar como lo piden en las empresas Pero estos vídeos y directos me motivan aunque sea un poco para no dejar todo en saco roto@@Rogeltelo-tw8wj

[@raquelalvarado9497]

Que crack eres Midu, me sirves de inspiracion para convertirme en una buena desarrolladora web.

[@curycury2369]

Midu! Buenisimo tu video, me encantó. Hace bastante tiempo no tocaba nada de web y me pareció buena idea volver con este tutorial! El jueguito lo hice lo más parecido a lo que muestras. Solo que tenia un pequeño bug que al pasar por debajo del paddle rebotaba la pelotita con el mismo y continuaba el juego. Lo solucioné poniendole un OR a la condición en el else if de la función ballMovement, esta seria || (y > paddleY ).Así quedó: else if( (y + dy > canvas.height - ballRadius) || (y > paddleY ) ){ console.log('Game Over') document.location.reload() } Lo comento por si alguién le sirve. Tratare de hacer los demás proyectos que vayas publicando, muchas gracias por compartir tu conocmiento :D

[@raquel_garcia2863]

una pregunta: Cómo se hace el signo de tres barras largas horizontales que él puso en el renglón 104???

[@horaxDev]

Genial, sin menospreciar a otros streamers, para mi eres el mejor! Muy buena explicacion, y re explicacion, siempre de manera amable hacia los que no sabemos mucho, tambien se agradece el detalle en la descripcion!

[@xavier.xiques]

Dios mio! Acabo de volver a mis inicios! Yo este juego lo hice en C, mara MSDOS, hace años, infinitamente más cutre que lo que has montado tu, evidentemente. Eres grande, Midu 👏

[@davidmejias1445]

Excelente tus clases bro. Son de gran ayuda para los que los que comenzamos en este mundo. Dios te bendiga mi bro !

[@darkalden]

Uuuuuuuuuuu justo apenas comenzó el video, recordé el PANG (y luego lo mencionas) como uno de los mejores juegos en esos tiempos y hasta estos días lo veo muy top. Como siempre atento a tus videos. Gracias por ello. Saludos.

[@JulioChort]

Muy buen video! En su momento tomé un curso de desarrollo de videojuegos, y la verdad me hubiera encantado que hubiesen explicado tan claramente como lo hacés vos midu. Enhorabuena!

[@historiasdelodesconocido5021]

Ojala hagas una segunda parte con lo power up , donde se alarga la paleta, se triplica la bola, donde la bola se pega como un iman en la paleta, y también la paleta dispara, Saludos buen video!!

[@AlphariusOmegonREAL]

Voy a seguir el este proyecto como lo tienes ahorita y luego lo intentare rehacer por mi cuenta con Astro, porque me parece interesante usar astro para algo mas dinamico que una landing page

[@SonGoku-pc7jl]

el otro día pensaba que el juego que me venian más ganas de hacer con javascript seria el pang también!!! pensava en divs i animaciones o estados :hober del ratón pero quizás con canvas mejor. Hace mucho no veo nada de canvas, nada, que estoy al principio del video y lo de pang me emocionó. Hagamoslo! jaja ;) Ya acabé, que clase más chula jeje :)

[@nibismirnov1893]

El clasico juego del Arkanoid, recuerdo que lo hice en la univ en c++. Que buen video! De aqui a Berlino

[@ImBrakito]

Genial, lo acabo de hacer y aprendí bastante de canvas. Muchas gracias Midu.

[@alejandrorios6999]

Excelente proyecto midu, muchas gracias. Siempre habia querido aprender a utilizar canvas y a crear videojuegos

[@jmchema81]

Igual digo esto porque soy un friki y el arkanoid me ablanda el corazoncito.... Pero este video es del mejor contenido que he visto. Espectacular.

Hice el pong en consola en c++ hace 7 años creo, este video me trae muchos recuerdos ♥

[@cordoobez]

Que grande Midu !!! Me recuerda a mi primer juego, un ahorcado (adivinar palabras), allá en el año 96 en clipper....

[@nhereveri]

😢 Hacía estas cosas en Turbo C. Que recuerdos

[@adrianmartinez2061]

Muchas gracias Midu! que divertido va a estar esto..

[@xeffen5]

literalmente hoy he tenido que mirar ns cuantos videos de canva para coger ideas de como resolver algo hahahha

[@nicolashernandez1917]

que tipos de videosv

[@xeffen5]

@@nicolashernandez1917 gente que tambien hacia juegos, deteccion ae colision, etc...

[@anashe5417]

la verdad q trabajar con canvas es un problema ajksjs

[@joseysusamigos]

genial, se ve hermoso el jueguito yo solia querer un atari antes por ese jueguito pero como no se pudo cuando tube la posibilidad de comprarme mi primer celular jugaba algo similar era Block Breaker y la pasaba viciando jejeje

[@AnatolFuentes]

Muy buen vídeo. Para navegadores y demás dará igual, porque no tienes opciones de fps, pero tengo entendido que cuando usas motores de juegos es una mala practica asociar el loop del juego a los frames de la pantalla. Por eso en algunos juegos, cuando un jugador cambia la tasa de refresco de 30 a 60 o 144, el juego se vuelve loco, porque estás duplicando la velocidad que se ejecutan las acciones. Y el jugador puede correr a mil por hora y cosas raras asi jaja.

[@AnatolFuentes]

Vale, justo lo explicas al final del video jajaja grande.

[@Sionizado]

De las mejores series q vi ❤

[@nhereveri]

Hay un juego muy bueno que tenía varios mini juegos dentro. Muy bueno. Tant-R se llama. Y parece simple cada uno de estos.

[@siempreretro]

Esos mini-juegos son un buen ejercicio de lógica de programación. El de las gemas ('stone & jewel' creo que se llamaba), lo hice hace unos meses en React

[@robertoperalta3076]

Clasicazo el Arkanoid! a ver cuando te animas con el Pang

[@adrymateoramon7087]

Midu no deja de sorprender 👏👏👏👏👏

[@2005bgva]

Excelente, muchas gracias.

[@dajurino]

Deberias de meter dentro de esos 100 proyectos de JS el Tetris que hiciste con JS fue un gran proyecto

[@siempreretro]

En vanilla, he hecho éste, el pacman, un space invaders, tetris, etc... son muy buenos ejercicios de lógica de programación.

[@moisesromero9263]

Que grato es ver que acabas de subir un nuevo video eres el mejor!!!! Aprovechando que creo que soy el primer comentario, quisiera saber si se puede o puedes hacer un video donde pases una pagina cualquiera que tenga un html un css y un poco js la pases a Astro no se si me entiendes. Saludos bro eres el mejor

[@polalcs_old]

Contenido de calidad, mas videos así 🙏🙏

[@pedroroca694]

Gran Video!! este fue el primer proyecto que hice, aunque pure JS canvas facilita el asunto jaja me encanta este juego... que fácil lo haces mamon,. Alguien sabe como sacar los clip en un windows¿? Saludos :)

[@kuaot8609]

buen video joder

[@kkjjjdiskdksrlel9994]

xd ni paso um minuto y ya te viste el video de 1 y 31 min?

[@David-ns3ud]

hola muchas gracias por el curso y tu paciencia de los cursos q he seguido ers de los q mas me gustan midu me siento un poco tonto haciendo esta pregunta el minuto 38:39 pones un signo igual con tres rayitas q no consigo encontrar sirve igual tres simbolos igual seguidos?

[@rbcsfc]

Es exactamente eso, solo que su vs las ligaduras las muestra asi

[@richard-b-riddick]

Genial video, como siempre. Estás hecho todo un profesor, pero de los buenos. ¿ Para cuando el Bloodborne en javascript, ya que Miyazaki no lo va a sacar en PC hasta que salga la Play 6 ? 😁

[@gilbertobarbosa5136]

Settimeout y setinterval si bloqueaban la pantalla, pues una interacción iniciaba incluso si la anterior no había terminado, el requestAnimationFrame "espera" a qué se libere el pipeline y ejecuta la llamada, para los más avanzados en c++ hay dos paradigmas "retained" e inmediato, (svg es retained, es decir guarda el estado) canvas es inmediato por qué al borrarlo NO recuerda nada

[@lali0050]

Gracias Miudu

[@raquel_garcia2863]

@midulive necesito saber como pusiste el signo de tres lineas horizontales en el renglon 104 ¡¡¡

[@nhereveri]

Esperar el refresco no tiene sentido en los monitores actuales aunque permite que las transiciones no se vean titilando. Parecen más fluidas. Antiguamente dibujábamos en un buffer y es esa función intercambiábamos las direcciones de memoria que afectan a la salida (monitor).

[@kkjjjdiskdksrlel9994]

Yo estuve em el directo, me gusto mucho el proyecto. Qual extension usas para que el vscode te muestre opciones de autocomplete?

[@moisesromero9263]

jajajaja me imagine eso jajajaja

[@jszclaptone4042]

Es el Github copilot

[@tonyml1014]

Eres el mejor !

[@alejandrorios6999]

Hola midu. Estoy teniendo un problema cuando pongo el condicional que hace un reload de la pantalla cuando la pelota sale por abajo. Intenta ejecutar el reload pero al parecer la funcion se sigue llamando y esto me termina bloqueando el navegador.

[@kastikas]

Me pasa exactamente lo mismo, se ejecuta el GAME OVER miles de veces y no para... directamente no hace el reload de la pagina...

[@kastikas]

Ya encontramos con ChatGPT la solucion jajajaaja :V pon un return if(y + dy > canvas.height - ballRadius) { console.log("Game over") document.location.reload() return }

[@kastikas]

Te menti se volvio a romper ... PTM!!!!!

[@alejandrorios6999]

@@kastikas jaja no te preocupes bro. Yo ya lo solucioné. Tuve que hacer uso del metodo cancelRequestAnimation( ). Creo que así se llama. Es para cancelar la ejecución del requestAnimationFrame( ) Busca a cerca de ese metodo en intenta solucionarlo así, sino ahora te muestro mi codigo

[@dagonmeister]

Que IDE está usando, visual code?

[@gilbertobarbosa5136]

Normalmente la función draw se separa de las operaciones trigonométricas, eso ayuda a la optimizacion

[@dlcanegro753]

excelente!!!

[@darkcrow9319]

Una duda, ando un poco perdido, esto contaria como un proyecto Frontend?

[@deltaforce3329]

que juegos son los mejores para realizar hoy para los muchachos ?

[@Bdk-o9m]

Como ver los códigos de juegos 13kb

[@miguellpezhdez5195]

Like por el desarrollo de PANG!

[@kastikas]

Entre tantas funciones que hizo, tampoco me quedo claro cuales eran funciones propias del CANVAS o de donde salian.... como las del pintado de cosas. Si son propias de JS o las tenia hechas en otro lado :C

[@midulive]

Pues es sencillo de seguir, ya que las propias del canvas las creamos siempre a partir del contexto (ctx) que creamos desde el principio.

[@Rogeltelo-tw8wj]

No entendí lo de BRICK_STATUS: active y destroyed

[@vainixyu]

maestro disculpe, cual thema es el que usa para tener todo el codigo bien diferenciado en colores

[@shelsygarcia]

Hola lo mismo quiero saber

[@TheZetary]

Yo hice el snake con Java y netbean cuando estaba en la universidad 🥲

[@luiseduardofrias4044]

Hey que jevi, justo estoy haciendo un juego de memorizar cartas con nextjs, me gustaría que lo cheque y me de feedback de como codifico.

[@luiseduardofrias4044]

Recuerdo hacer este juego en mis inicios con js, use jquery, esta por hay el codigo y claro solo era la bola y la paleta, el fin era no dejar caer la pelota, la velocidad de la pelota varía.

[@JaviArte]

Por cierto, ¿de siempre lo pronunciaste ARkanoid, con el golpe de voz en AR? Yo siempre lo pronuncié españolizado xD arkaNOid, con el golpe de voz en NO. Quitando lo de la pronunciación, muy bien proyecto.

[@DiegoMenta]

Cómo es eso de que Atari es mas viejo que andarpa'lante? Jugaba al breakout de chico! 😅😂

[@Yomismo33]

Porqué no pones y su estructura???

[@_Joen_]

Estoy terminando mi formación en DAW. ¿Es normal sentirse abrumado por no entender muchas de las cosas que explica? Puf, no sé si alguna vez yo podría crear algo así...y eso que en teoria es algo simple...

[@DronDaniel79]

Me siento como tu

[@Bdk-o9m]

Tienes un tutorial de crear juegos javascript de 0 ???

[@raquel_garcia2863]

yo estoy haciendo este juego viendo tu video, lo extraño es que me tira error cuando coloco un if()

[@kastikas]

Naaaa me exploto la cabeza el calculo de los colores de los bricks, no entendi una chot.... jajajajaja ... recorto la imagen le paso la lupa encima le salio 0.32 y de ahi limo todo ... no se si los SPRITES por mas que recortes desde una partecita igual te sale en que parte del pixelado total pertenece de la imagen original .... me ha petao la cabeza como dirian los españoles ! :V

[@sol____-_-]

Wow no sabía eso de los sprite en los games. 🤍🤍