What is your favorite retro game? Classic games are often simple enough to recreate with HTML Canvas and JavaScript. Let me know what would you like to see next :)
Thanks for this great tutorial! I like how the lessons escalate to cover some pretty complicated aspects of development, but does so in a fun and engaging way!
Glad it was helpful! Yeah, one of the reasons it took this long to make this video was the constant refinement to make it as simple as possible and still building up a complex course :)
Oh wow, I've been wondering how to set the canvas coordinates to be (0,0) at the bottom left and thought it would be a headache. It's just 2 lines! Thank you!
Very very well explained, built, and then visually documented. I especially like the well explained inverse clipping and building hit detection. My issue with working with canvas is that OOP / SOLID goes out the window, I therefore prefer to work with higher abstracted canvas painting libraries / game libraries, so instead of redrawing a whole scene, once could build a gorilla.celebrate();
True, I was also thinking that there must be a better way to do this, but on the other hand there’s beauty in the simplicity of having a full reset with every redraw. I’m wondering what libraries do under the hood when dealing with this. For sure, you can partially redraw the canvas, but then you need some caching, or you can organize the scene into multiple canvas layers, but that would have made this unnecessarily complicated as well. And I’m sure there’s performance benefit behind this behavior of canvas. I guess OOP doesn’t always fit everything. Thank you for the positive feedback :)
I know, I know. It's a long one :) While putting it together, I also though, that a video with this length could easily be a movie. I hope you like it :)
Hello,thank you for tuto ! I am a having a hard time with drawing hands, i checked thrice the coordinates, but my gorillas still both are hands up in celebrating mode, and both are hands down in aiming mode. I have a question about right and left hand, your function leftHand is about the right one for me and vice versa. Do you chose the mirrowing effect or it is a rule in 2d context ?
If both hands are down in aiming phase then take a closer look on the if conditions that decide if the hand goes up or down. The two functions are not only different in coordinates but also in the if condition
You could use images for some, but this way you can generate random levels and make it more interactive. With images you couldn’t animate the hand of the gorilla or have a totally random level. And it’s also more effective this way
What is your favorite retro game? Classic games are often simple enough to recreate with HTML Canvas and JavaScript. Let me know what would you like to see next :)
Gauntlet, Outrun, Paperboy, & Spy Hunter! I'd spend all my tokens at Aladin's Castle in Towne East Mall, Mesquite TX on these games back in the 80s.
@@bruceferman562 Oh I remember Paperboy! I think about it. Most of these games are not that simple though. They would be a lot to cover
Thanks for creating this. I enjoyed coding this game out.
Thank you! Was anything unclear?
Thanks for this great tutorial! I like how the lessons escalate to cover some pretty complicated aspects of development, but does so in a fun and engaging way!
Glad it was helpful! Yeah, one of the reasons it took this long to make this video was the constant refinement to make it as simple as possible and still building up a complex course :)
thank you for porting this QBasic demo program, brings back memories!
Incredible, so much hard work behind this video, I am so thankful for this. Helped me a lot
You are welcome! Check out the others as well :)
Thank you for creating this tutorial!
Thank you! If you could improve one thing, what would you change?
Very well presented and explained. Nice relaxation just following along after many hours of laravel, nuxt and other stuff at work. Thank you
Thank you! Yeah, I try to make it chill, so people can follow along
Oh wow, I've been wondering how to set the canvas coordinates to be (0,0) at the bottom left and thought it would be a headache. It's just 2 lines! Thank you!
4 with restore and save :)
Very very well explained, built, and then visually documented. I especially like the well explained inverse clipping and building hit detection.
My issue with working with canvas is that OOP / SOLID goes out the window, I therefore prefer to work with higher abstracted canvas painting libraries / game libraries, so instead of redrawing a whole scene, once could build a gorilla.celebrate();
True, I was also thinking that there must be a better way to do this, but on the other hand there’s beauty in the simplicity of having a full reset with every redraw. I’m wondering what libraries do under the hood when dealing with this. For sure, you can partially redraw the canvas, but then you need some caching, or you can organize the scene into multiple canvas layers, but that would have made this unnecessarily complicated as well. And I’m sure there’s performance benefit behind this behavior of canvas. I guess OOP doesn’t always fit everything.
Thank you for the positive feedback :)
man i never really understood canvas clipping until your visual explanation, thanks
It took me a while as well. Especially as I needed a reverse clipping
Aight, Im sacrificing a movie for this 😭💀
I know, I know. It's a long one :) While putting it together, I also though, that a video with this length could easily be a movie. I hope you like it :)
Thank you for bringing our childhood memories to the new age 🍻What tools did u use to animate code highlighting/breakdown/animation/etc for this one?
You mean for the video itself? It's mainly Keynote for the slide deck, then put it together with DaVinci Resolve
@@HunorMartonBorbelyyup, I was referring to the video itself. Thanks for clarifying! Looks pretty crisp and easy to follow 👍
@@codeatlas_gr Thank you, let me know if you have any improvement tips :)
This is awesome 🤩
Thank you 🦍
Hey this is awesome thank you! But how can I publish this on the web?
Try CodePen, GitHub Pages, or Vercel. And don’t forget to mention the source :)
@@HunorMartonBorbely i wont thank you!
Love you BRO !!!!
I love you too!
Hello,thank you for tuto ! I am a having a hard time with drawing hands, i checked thrice the coordinates, but my gorillas still both are hands up in celebrating mode, and both are hands down in aiming mode. I have a question about right and left hand, your function leftHand is about the right one for me and vice versa. Do you chose the mirrowing effect or it is a rule in 2d context ?
If both hands are down in aiming phase then take a closer look on the if conditions that decide if the hand goes up or down. The two functions are not only different in coordinates but also in the if condition
As opposed to writing so much code drawing things we should use images, I guess? Won't the process be simpler?
You could use images for some, but this way you can generate random levels and make it more interactive. With images you couldn’t animate the hand of the gorilla or have a totally random level. And it’s also more effective this way
@@HunorMartonBorbely Got it, thanks!
Is there any resources you would recommend for learning JavaScript?
For the fundamentals I’m not sure. Did you try freeCodeCamp?
Thank you.... This is a belleza!
Grazie mille :)
Pyro ][ is simple enough a port is already online playable via web but not a Javascript/canvas version
Hmm, I don't remember this game, I'll check it out. I was thinking of Bomberman, but that might be too complicated
hello
hi