hi bro, in your source code you only uploaded some lines of the html code can you please share the full code of this project
@HunorMartonBorbely20 күн бұрын
The HTML code is only a few lines of code indeed. Switch to the JavaScript tab to see the logic.
@macusgeorgiev9821Ай бұрын
Wonderful
@심심한개발자-v4vАй бұрын
I saw this minigame on Codepen. I'm making a CMS and I'd like to insert a minigame into the CMS. Can I use it? I would like to insert this mini-game into the administrator page so that bored administrators can use it when they are bored.
@HunorMartonBorbely24 күн бұрын
Hey there. I'm not sure that would be legal as this is a remake of an existing game that I have no rights for. Making educational content like this is okay, but using the game clone on its own might not.
@DanielImray-x3bАй бұрын
I came to this video from your SVG tutorial, which I found through google. Just wanted to say how useful the svg tutorial is, thank you!
@HunorMartonBorbelyАй бұрын
Glad it helped! I made some major updates the last weeks, like update on the interactive editors and such. Check it out!
@PhilipDenysАй бұрын
looks like a 'worms' game type
@HunorMartonBorbelyАй бұрын
It's similar I guess. Gorillas came out 5 years before Worms though, so it's rather the other way around :)
@nikolas4749Ай бұрын
Thanks Hunor Will you make react three fiber game ?
@HunorMartonBorbelyАй бұрын
Yes, I'm on it, but I feel it takes forever. The next major video will be a double feature. One with plain Three.js and one with React Three Fiber
@online.python.dersim2 ай бұрын
Very good video thnx
@alisajadahmadi9782 ай бұрын
Thank you for this video.
@kyachahteho2 ай бұрын
As opposed to writing so much code drawing things we should use images, I guess? Won't the process be simpler?
@HunorMartonBorbely2 ай бұрын
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
@kyachahteho2 ай бұрын
@@HunorMartonBorbely Got it, thanks!
@NormalyBS2 ай бұрын
Love you BRO !!!!
@HunorMartonBorbely2 ай бұрын
I love you too!
@DigitalCraftstodio3 ай бұрын
Hi, I'm trying to create a game with three.js and cannon But I have a bad problem When I try to create a gameGroup object and adding all the shapes to it and then change its position, the world position of shapes doesn't change and when I apply cannon to it, the position of cannon is the same as shapes old position, I tried everything but it's doesn't change, I tried updateMatrixWorld(); I tried world.position.Matrix4(); But its not working I can share the code with you if you want
@HunorMartonBorbelyАй бұрын
Hey, I'm sorry for the delay. Did you figure this out? You can also find this game's source code in the description
@TwoBrosCubing-oj4zl3 ай бұрын
What type of file is this (.html, .jv, .ctx, .css)?
@HunorMartonBorbely3 ай бұрын
HTML and JavaScript
@TwoBrosCubing-oj4zl3 ай бұрын
Thanks!😃
@kap52913 ай бұрын
guys do you actully have to paste it 200 times !!!
@HunorMartonBorbely3 ай бұрын
What do you mean?
@radadicАй бұрын
I think you mean the tiles in HTML No, you don't have to paste it 255 times. You can do it automatically with the CSS code. It's shown at 1:53
@manoloreyes99583 ай бұрын
Hello, thank you! I have an issue, and hope you can help me. With the script code, How can I set the light mode persistent? because when I switch to dark mode I cannot return to light mode and make it default
@HunorMartonBorbely3 ай бұрын
To make it persistent you have to save the state in local storage
@tmate88-j8y3 ай бұрын
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!
@HunorMartonBorbely3 ай бұрын
4 with restore and save :)
@DIAMONDMOVIES1234 ай бұрын
please make flappy bird game in a modern way please reply when you finifhed i am ur fan
@HunorMartonBorbely3 ай бұрын
That's a good idea. I might get there on day. But for the next months I have another plan :)
@DIAMONDMOVIES1234 ай бұрын
hello
@HunorMartonBorbely3 ай бұрын
hi
@HuynhLuong2274 ай бұрын
omg, amazing game :D
@fiuzzii4 ай бұрын
Nice video! can you make a video to cover something more of three js? Like postprocessing or I don't know
@HunorMartonBorbely4 ай бұрын
I’m planning a couple more. Still mainly about the basics, and also cover react-three-fiber as well and maybe blender or some simple modeling tool
@ИванАндриевский-у2д5 ай бұрын
nice code but it is not work on iphone((
@HunorMartonBorbely5 ай бұрын
Yeah, I forgot to mention that it’s not possible on iOS (probably android neither)
@ИванАндриевский-у2д5 ай бұрын
@@HunorMartonBorbely your code works on android perfectly)
@ИванАндриевский-у2д5 ай бұрын
@@HunorMartonBorbely your code works on android perfectly
@joysardar61095 ай бұрын
img link???
@HunorMartonBorbely5 ай бұрын
Eh?
@prasenjitnayak_20 күн бұрын
@@HunorMartonBorbely he is talking about the assets, those images stick man pictures etc, 😢😭😭
@HunorMartonBorbely19 күн бұрын
There are no assets in this project. Everything is code
@hitbox74225 ай бұрын
That’s how I make interactive animations on my websites. It’s a really cool technique, but „handcrafting“ vector graphics is a very time consuming task, which makes it expensive for the customer.
@HunorMartonBorbely5 ай бұрын
You can always use graphic designer tools then animate parts of it after with code. Though designer tools generate a lot of unnecessary code and it's hard to see what is what after
@hitbox74225 ай бұрын
@@HunorMartonBorbely yeah that's what i also noticed. For simple buttons or other slightly more complex basic elements i'll use figma or sketch, but anything that goes beyond that is just more customizable if you do it in VSC
@HunorMartonBorbely5 ай бұрын
@@hitbox7422 Yeah, but then you can break it down and export the static parts and the moving parts separately
@m-electronics59775 ай бұрын
But it is very advanced when you code it only😅😅
@HunorMartonBorbely5 ай бұрын
Depends on the complexity. It's not more advanced than doing art with CSS only :)
@neutron_stz88943 ай бұрын
I prefer to draw pixel by pixel rather than use svg 😂
@Ginto_O5 ай бұрын
I like svg for linux distros chart
@HunorMartonBorbely5 ай бұрын
Charts are a great use for SVGs
@wise_old_tree5 ай бұрын
Where are you from? Your voice and accent is very relaxing !!
@HunorMartonBorbely5 ай бұрын
Thank you! I'm from Hungary, but I live abroad for a long time now and use English as my primary language. So I guess it's hard to tell :)
@badcatdesign5 ай бұрын
This looks great - thank you. The audio is pretty rough though - not sure what's going on, it sounds like it has a filter
@HunorMartonBorbely5 ай бұрын
Thanks! Yes, audio is my arch nemesis. I never figure out how to get it right. I guess this time I was just dried out and that’s all I could get out of it :)
@mikko-penttieinarieronen5 ай бұрын
@@HunorMartonBorbely I think the audio is great quality. great to listen on headphones at least. Your voice is very clear and calming. Also Absolutely fantastic video. Keep up the good work.
@HunorMartonBorbely5 ай бұрын
Check out SVG-Tutorial.com for more examples. You can also find the interactive slide deck I created for this video here: svg-tutorial.com/summary
@nikolas474924 күн бұрын
Your website svg-tutorial is amazing Could you make a video on how you do it ?
@HunorMartonBorbely24 күн бұрын
@@nikolas4749 Thank you! It's a bit complicated, and I think it would only be interesting to a niche audience. But the whole site is open source if you want to check it out :)
@philliplam27045 ай бұрын
man i never really understood canvas clipping until your visual explanation, thanks
@HunorMartonBorbely5 ай бұрын
It took me a while as well. Especially as I needed a reverse clipping
@osseyejoseph11616 ай бұрын
I know it sounds impossible, but i would like you to make a simulation game
@HunorMartonBorbely5 ай бұрын
What do you mean by simulation game?
@subarunatsuki19026 ай бұрын
Is there any resources you would recommend for learning JavaScript?
@HunorMartonBorbely6 ай бұрын
For the fundamentals I’m not sure. Did you try freeCodeCamp?
@stuk57877 ай бұрын
"How do you answer to requests like this?"- You don't. You're above this. You're a celeb. A tech overlord who knows it all and will never need assistance with anything. You're not a dumb 21yr old kid like ionut.lincariu whose name you leaked. You didn't do this on accident, you're an UX specialist hired by Google through a consulting company. You don't make mistakes. And you don't help for free because never would anyone help you for free. Even though you have this empathic and charismatic appearance, a world ruled by humility would just be a burden to an expert like you. Instead you can profit off another ones demise and gain some cool internet clout. There's a reason you chose Berlin and I feel like I know why.
@gavinlew82737 ай бұрын
This tutorial is gold standard.
@HunorMartonBorbely5 ай бұрын
Thanks! It took me a while :)
@moonsun36587 ай бұрын
Hi hunor .thank you for all your amazing tutorials ..do you recommend learning blender before three.js ?
@HunorMartonBorbely7 ай бұрын
I never used blender so I wouldn’t say it’s a requirement but it probably makes sense for more complex models
@moonsun36587 ай бұрын
@@HunorMartonBorbely thank you very much for the answer
@goku.26227 ай бұрын
Love this video, going to apply in my project, Thank you ♥
@HunorMartonBorbely7 ай бұрын
Go for it!
@Dardasha_Studios8 ай бұрын
This is brilliant!!
@HunorMartonBorbely8 ай бұрын
Thank you!
@pedapudiraviteja73888 ай бұрын
Which font are you using? Is that office code pro. By the way your videos are very qualitative. Keep up the good work <3
@HunorMartonBorbely8 ай бұрын
The one used for the code? I think it's Menlo. Thank you. I try to keep up :)
@nasimajosefi8 ай бұрын
Perfect, keep uploading
@HunorMartonBorbely8 ай бұрын
I’m on it, thanks :)
@parassharma70418 ай бұрын
great video I was learning about SVG animations and found your blog on freecodecamp and now subscribing your channel. Thanks again for this wonderful tutorial. I want to learn physics and mathematics used for game development.
@idowusalami48668 ай бұрын
Wow! Nice tutorial. Thanks, a lot.
@HunorMartonBorbely8 ай бұрын
You are welcome. I made a new tutorial site in the meanwhile. Check out SVG-tutorial.com for more :)
@idowusalami48668 ай бұрын
Thank you so much. That's a great tutorial.
@HunorMartonBorbely8 ай бұрын
Check out SVG-tutorial.com for an updated version :)
@Kraaven20268 ай бұрын
Nice Video! Was this made in Motion Canvas?
@HunorMartonBorbely8 ай бұрын
Thanks! No, I use Keynote for the slides and animations and put it together with DaVinci Resolve
@Darthvanger5 ай бұрын
@@HunorMartonBorbely Interesting. The slides and transitions look so slick, I didn't know Keynote can do that. I thought you did it in JS :)
@HunorMartonBorbely5 ай бұрын
@@Darthvanger there’s a transition called Magic Move and it just morphs the differences between two slides. It’s pretty cool
@dhrubakawatson8 ай бұрын
Mouseup and mouse down can be changed to touch start and touch end.. For touch screen devices.. But getting some glitches.. Can you please help?
@HunorMartonBorbely8 ай бұрын
My guess is that some devices detect both mouse and touch events and that gets mixed up. What’s the glitch?
@dhrubakawatson8 ай бұрын
@@HunorMartonBorbely like on touchscreen device, i changed the event listeners to touch start and touch end.. When the user touches the screen, the stick will be drawn and user stops touching the screen, the stick will fall down but the glitch is that.... Sometimes, When I'm touching the screen and removing the touch the stick goes on extending until i tap on it again.. On tapping again it falls down...
@dhrubakawatson8 ай бұрын
@@HunorMartonBorbely should i share my codes with you?
@HunorMartonBorbely8 ай бұрын
I don’t have a laptop at the moment as I’m away for the weekend, but you can try the touchcancel event as well
@dhrubakawatson8 ай бұрын
@@HunorMartonBorbely umm.. Can you please explain? 🙂
@samoyla18 ай бұрын
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 ?
@HunorMartonBorbely8 ай бұрын
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
@HoralesCafeles9 ай бұрын
Thank you.... This is a belleza!
@HunorMartonBorbely9 ай бұрын
Grazie mille :)
@codeatlas_gr9 ай бұрын
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?
@HunorMartonBorbely9 ай бұрын
You mean for the video itself? It's mainly Keynote for the slide deck, then put it together with DaVinci Resolve
@codeatlas_gr9 ай бұрын
@@HunorMartonBorbelyyup, I was referring to the video itself. Thanks for clarifying! Looks pretty crisp and easy to follow 👍
@HunorMartonBorbely9 ай бұрын
@@codeatlas_gr Thank you, let me know if you have any improvement tips :)
@yvahagn9 ай бұрын
Thank you for creating this tutorial!
@HunorMartonBorbely9 ай бұрын
Thank you! If you could improve one thing, what would you change?
@johnvarghese83409 ай бұрын
Question - if the animate function is called recursively , will the browser able to detect the click event of the txt . the toggle works in Chrome , but in Safari the txt toggle click event is not getting called as the animate function is running. any comment ? btw thanks for this video @HunorMartonBorbely
@HunorMartonBorbely9 ай бұрын
Hmm, that's interesting. Great catch! The animation loop should not interfere with the event handling. The animation loop has a similar behavior to recursion, but it's not synchronous, so event handlers should work without any issue between two animation frames. However, it seems the *click* event handler in Safari does not work on this element for some reason. It works if you replace it with the *mousedown* event. Updated the code on CodePen
@johnvarghese83409 ай бұрын
Thank you @@HunorMartonBorbely !
@loopymind9 ай бұрын
thank you for porting this QBasic demo program, brings back memories!
@kryptons-galaxy9 ай бұрын
This is awesome 🤩
@HunorMartonBorbely9 ай бұрын
Thank you 🦍
@MichaelTrouw9 ай бұрын
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();
@HunorMartonBorbely9 ай бұрын
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 :)