Пікірлер
@unboxingmachan3289
@unboxingmachan3289 21 күн бұрын
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
@HunorMartonBorbely
@HunorMartonBorbely 20 күн бұрын
The HTML code is only a few lines of code indeed. Switch to the JavaScript tab to see the logic.
@macusgeorgiev9821
@macusgeorgiev9821 Ай бұрын
Wonderful
@심심한개발자-v4v
@심심한개발자-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.
@HunorMartonBorbely
@HunorMartonBorbely 24 күн бұрын
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
@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
@HunorMartonBorbely Ай бұрын
Glad it helped! I made some major updates the last weeks, like update on the interactive editors and such. Check it out!
@PhilipDenys
@PhilipDenys Ай бұрын
looks like a 'worms' game type
@HunorMartonBorbely
@HunorMartonBorbely Ай бұрын
It's similar I guess. Gorillas came out 5 years before Worms though, so it's rather the other way around :)
@nikolas4749
@nikolas4749 Ай бұрын
Thanks Hunor Will you make react three fiber game ?
@HunorMartonBorbely
@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.dersim
@online.python.dersim 2 ай бұрын
Very good video thnx
@alisajadahmadi978
@alisajadahmadi978 2 ай бұрын
Thank you for this video.
@kyachahteho
@kyachahteho 2 ай бұрын
As opposed to writing so much code drawing things we should use images, I guess? Won't the process be simpler?
@HunorMartonBorbely
@HunorMartonBorbely 2 ай бұрын
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
@kyachahteho
@kyachahteho 2 ай бұрын
@@HunorMartonBorbely Got it, thanks!
@NormalyBS
@NormalyBS 2 ай бұрын
Love you BRO !!!!
@HunorMartonBorbely
@HunorMartonBorbely 2 ай бұрын
I love you too!
@DigitalCraftstodio
@DigitalCraftstodio 3 ай бұрын
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
@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-oj4zl
@TwoBrosCubing-oj4zl 3 ай бұрын
What type of file is this (.html, .jv, .ctx, .css)?
@HunorMartonBorbely
@HunorMartonBorbely 3 ай бұрын
HTML and JavaScript
@TwoBrosCubing-oj4zl
@TwoBrosCubing-oj4zl 3 ай бұрын
Thanks!😃
@kap5291
@kap5291 3 ай бұрын
guys do you actully have to paste it 200 times !!!
@HunorMartonBorbely
@HunorMartonBorbely 3 ай бұрын
What do you mean?
@radadic
@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
@manoloreyes9958
@manoloreyes9958 3 ай бұрын
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
@HunorMartonBorbely
@HunorMartonBorbely 3 ай бұрын
To make it persistent you have to save the state in local storage
@tmate88-j8y
@tmate88-j8y 3 ай бұрын
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!
@HunorMartonBorbely
@HunorMartonBorbely 3 ай бұрын
4 with restore and save :)
@DIAMONDMOVIES123
@DIAMONDMOVIES123 4 ай бұрын
please make flappy bird game in a modern way please reply when you finifhed i am ur fan
@HunorMartonBorbely
@HunorMartonBorbely 3 ай бұрын
That's a good idea. I might get there on day. But for the next months I have another plan :)
@DIAMONDMOVIES123
@DIAMONDMOVIES123 4 ай бұрын
hello
@HunorMartonBorbely
@HunorMartonBorbely 3 ай бұрын
hi
@HuynhLuong227
@HuynhLuong227 4 ай бұрын
omg, amazing game :D
@fiuzzii
@fiuzzii 4 ай бұрын
Nice video! can you make a video to cover something more of three js? Like postprocessing or I don't know
@HunorMartonBorbely
@HunorMartonBorbely 4 ай бұрын
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д
@ИванАндриевский-у2д 5 ай бұрын
nice code but it is not work on iphone((
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
Yeah, I forgot to mention that it’s not possible on iOS (probably android neither)
@ИванАндриевский-у2д
@ИванАндриевский-у2д 5 ай бұрын
@@HunorMartonBorbely your code works on android perfectly)
@ИванАндриевский-у2д
@ИванАндриевский-у2д 5 ай бұрын
@@HunorMartonBorbely your code works on android perfectly
@joysardar6109
@joysardar6109 5 ай бұрын
img link???
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
Eh?
@prasenjitnayak_
@prasenjitnayak_ 20 күн бұрын
@@HunorMartonBorbely he is talking about the assets, those images stick man pictures etc, 😢😭😭
@HunorMartonBorbely
@HunorMartonBorbely 19 күн бұрын
There are no assets in this project. Everything is code
@hitbox7422
@hitbox7422 5 ай бұрын
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.
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
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
@hitbox7422
@hitbox7422 5 ай бұрын
@@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
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
@@hitbox7422 Yeah, but then you can break it down and export the static parts and the moving parts separately
@m-electronics5977
@m-electronics5977 5 ай бұрын
But it is very advanced when you code it only😅😅
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
Depends on the complexity. It's not more advanced than doing art with CSS only :)
@neutron_stz8894
@neutron_stz8894 3 ай бұрын
I prefer to draw pixel by pixel rather than use svg 😂
@Ginto_O
@Ginto_O 5 ай бұрын
I like svg for linux distros chart
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
Charts are a great use for SVGs
@wise_old_tree
@wise_old_tree 5 ай бұрын
Where are you from? Your voice and accent is very relaxing !!
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
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 :)
@badcatdesign
@badcatdesign 5 ай бұрын
This looks great - thank you. The audio is pretty rough though - not sure what's going on, it sounds like it has a filter
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
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-penttieinarieronen
@mikko-penttieinarieronen 5 ай бұрын
@@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.
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
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
@nikolas4749
@nikolas4749 24 күн бұрын
Your website svg-tutorial is amazing Could you make a video on how you do it ?
@HunorMartonBorbely
@HunorMartonBorbely 24 күн бұрын
@@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 :)
@philliplam2704
@philliplam2704 5 ай бұрын
man i never really understood canvas clipping until your visual explanation, thanks
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
It took me a while as well. Especially as I needed a reverse clipping
@osseyejoseph1161
@osseyejoseph1161 6 ай бұрын
I know it sounds impossible, but i would like you to make a simulation game
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
What do you mean by simulation game?
@subarunatsuki1902
@subarunatsuki1902 6 ай бұрын
Is there any resources you would recommend for learning JavaScript?
@HunorMartonBorbely
@HunorMartonBorbely 6 ай бұрын
For the fundamentals I’m not sure. Did you try freeCodeCamp?
@stuk5787
@stuk5787 7 ай бұрын
"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.
@gavinlew8273
@gavinlew8273 7 ай бұрын
This tutorial is gold standard.
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
Thanks! It took me a while :)
@moonsun3658
@moonsun3658 7 ай бұрын
Hi hunor .thank you for all your amazing tutorials ..do you recommend learning blender before three.js ?
@HunorMartonBorbely
@HunorMartonBorbely 7 ай бұрын
I never used blender so I wouldn’t say it’s a requirement but it probably makes sense for more complex models
@moonsun3658
@moonsun3658 7 ай бұрын
@@HunorMartonBorbely thank you very much for the answer
@goku.2622
@goku.2622 7 ай бұрын
Love this video, going to apply in my project, Thank you ♥
@HunorMartonBorbely
@HunorMartonBorbely 7 ай бұрын
Go for it!
@Dardasha_Studios
@Dardasha_Studios 8 ай бұрын
This is brilliant!!
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
Thank you!
@pedapudiraviteja7388
@pedapudiraviteja7388 8 ай бұрын
Which font are you using? Is that office code pro. By the way your videos are very qualitative. Keep up the good work <3
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
The one used for the code? I think it's Menlo. Thank you. I try to keep up :)
@nasimajosefi
@nasimajosefi 8 ай бұрын
Perfect, keep uploading
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
I’m on it, thanks :)
@parassharma7041
@parassharma7041 8 ай бұрын
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.
@idowusalami4866
@idowusalami4866 8 ай бұрын
Wow! Nice tutorial. Thanks, a lot.
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
You are welcome. I made a new tutorial site in the meanwhile. Check out SVG-tutorial.com for more :)
@idowusalami4866
@idowusalami4866 8 ай бұрын
Thank you so much. That's a great tutorial.
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
Check out SVG-tutorial.com for an updated version :)
@Kraaven2026
@Kraaven2026 8 ай бұрын
Nice Video! Was this made in Motion Canvas?
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
Thanks! No, I use Keynote for the slides and animations and put it together with DaVinci Resolve
@Darthvanger
@Darthvanger 5 ай бұрын
@@HunorMartonBorbely Interesting. The slides and transitions look so slick, I didn't know Keynote can do that. I thought you did it in JS :)
@HunorMartonBorbely
@HunorMartonBorbely 5 ай бұрын
@@Darthvanger there’s a transition called Magic Move and it just morphs the differences between two slides. It’s pretty cool
@dhrubakawatson
@dhrubakawatson 8 ай бұрын
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?
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
My guess is that some devices detect both mouse and touch events and that gets mixed up. What’s the glitch?
@dhrubakawatson
@dhrubakawatson 8 ай бұрын
@@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...
@dhrubakawatson
@dhrubakawatson 8 ай бұрын
@@HunorMartonBorbely should i share my codes with you?
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
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
@dhrubakawatson
@dhrubakawatson 8 ай бұрын
@@HunorMartonBorbely umm.. Can you please explain? 🙂
@samoyla1
@samoyla1 8 ай бұрын
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 ?
@HunorMartonBorbely
@HunorMartonBorbely 8 ай бұрын
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
@HoralesCafeles
@HoralesCafeles 9 ай бұрын
Thank you.... This is a belleza!
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
Grazie mille :)
@codeatlas_gr
@codeatlas_gr 9 ай бұрын
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?
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
You mean for the video itself? It's mainly Keynote for the slide deck, then put it together with DaVinci Resolve
@codeatlas_gr
@codeatlas_gr 9 ай бұрын
@@HunorMartonBorbelyyup, I was referring to the video itself. Thanks for clarifying! Looks pretty crisp and easy to follow 👍
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
@@codeatlas_gr Thank you, let me know if you have any improvement tips :)
@yvahagn
@yvahagn 9 ай бұрын
Thank you for creating this tutorial!
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
Thank you! If you could improve one thing, what would you change?
@johnvarghese8340
@johnvarghese8340 9 ай бұрын
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
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
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
@johnvarghese8340
@johnvarghese8340 9 ай бұрын
Thank you @@HunorMartonBorbely !
@loopymind
@loopymind 9 ай бұрын
thank you for porting this QBasic demo program, brings back memories!
@kryptons-galaxy
@kryptons-galaxy 9 ай бұрын
This is awesome 🤩
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
Thank you 🦍
@MichaelTrouw
@MichaelTrouw 9 ай бұрын
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();
@HunorMartonBorbely
@HunorMartonBorbely 9 ай бұрын
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 :)