In this JavaScript tutorial, you will learn how to code a complex puzzle game that uses the camera. The game uses PHP and MySql on the backend.
βοΈ Radu Mariescu-Istodor created this course. Check out his channel:
π Radu's website:
βοΈ Resources βοΈ
π Pythagorean theorem:
π Visual web development course:
βοΈ Course Contents βοΈ
β¨οΈ (0:00:00) Introduction
β¨οΈ (0:01:25) Accessing the camera
β¨οΈ (0:11:06) Cropping the image
β¨οΈ (0:18:24) Drag and drop
β¨οΈ (0:28:46) Gameplay elements
β¨οΈ (0:42:03) Logo design
β¨οΈ (0:47:06) Sound
β¨οΈ (0:54:13) MySQL database
β¨οΈ (1:00:17) PHP web server
β¨οΈ (1:20:06) Advanced cropping
β¨οΈ (1:32:30) Advanced hit-testing
π Thanks to our Champion and Sponsor supporters:
πΎ Wong Voon jinq
πΎ hexploitation
πΎ Katia Moran
πΎ BlckPhantom
πΎ Nick Raker
πΎ Otis Morgan
πΎ DeezMaster
πΎ AppWrite
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Thank you so much for your tutorial π
You’re welcome! I have few more like this on my channel π
All the institutes who charge to teach are jealous of this channel
@imt idgaf to your comment
@legend kartik hahaha, youβre so poor
@imt butcj lasagna
I went through the CSS zero to hero and later on looked at the react structure. I’m thankful to FCC. The react structure had a lot of the staff I learnt from the zero to hero course of CSS.
If you want to see more tutorials like this, welcome to my channel π
Ok. It’s time for me to stop being lazy. i need to learn this thing for real.so many great content, …… let’s see where this take me
@m1fer Thank you π Yeah, content is almost the same as on my channel, but here you can watch it all in one video. Thanks for showing interest!
nice to see your video here @radu
Thanks Radu
@Humoyun no problem! π
Great tutorial! Thank you guys!
You’re welcome π And thanks again for subscribing!
Hello freecode, it would be so cool to get a tutorial about shopware, how to work with, how to add new modules, templates or elements and how to combine with GraphQL
β¬οΈ for tutorials
Great project and so many important techniques to learn, thank you for teaching us
You’re welcome Frank π
New subscriber here! I like what I see… Congratulations to the creator
Thank you Paul! Glad you like it π
If you load the javascrpt at the end of the html (like you should do), there is no need to use the “onload” directive in the html.
Thanks for the tip. I’m a bit old fashioned, I guess… might be also because I change languages quite a lot in university environment and I feel like I need a ‘main’ function π
I’ll try switching in the future.
@Radu Mariescu-Istodor Yeah, it’s a C thing! I don’t fault you for it. Ultimately, I suppose it is not such a bad practice.
@Andrew Erwin Feels good to have a clear starting point somehow…
Also, I feel like in stead of using mouse events and touch events, you can just use click events to cover it all…
I would be very interested to see a simpler way of getting the same result!
In my experience, though, click events fire after press AND release, so, you cannot get the functionality on down as desired.
@Radu Mariescu-Istodor actually, I tried it out myself and you are right. Your way is better!
@Andrew Erwin Ah, damn… was thinking I’m gonna learn something new π
@Radu Mariescu-Istodor well, I ended up learning in stead. Keep them coming!
@Andrew Erwin Glad to hear π
Saw hundreds of tutorials on this channel, this is probably the most impressive one I’ve seen. Great Job!
Not sure if that’s really true, or if it’s just different than most. Regardless, flattering to hear such a thing. Thanks π
@Radu Mariescu-Istodor musical note composing in JS, powerpoint logo making and hit detection using colors for the little tabs, all in the same tutorial? That’s very impressive, you got yourself a new subscriber
@Signal P Wow π Thanks! Glad you learned something new π
Thanks for this video! As an absolute beginner ( so please forgive me if it is something stupid) I tried to code along, and right at the beginning I caught the error “cannot read properties of null” at code line 7 (context = canvas.getContext(“2d”);) If i follow the code excactly what could I have possibly done wrong? Thank you <3
Hi, it’s a bit hard to say what the problem is by looking only at that line of code. But one difference is that I use capital letters when I define the CANVAS and CONTEXT variables (I use this convention for all globals). Check if you have them capitalized on top.
@Radu Mariescu-Istodor Thanks for you’re reply… I will puzzle a bit more π
Can you guys do a robotic process automation tutorial?
β¬οΈ for full tutorials
Thanks for this course. Please create more projects like this and also those that experiment with concepts like Object Oriented Programming in JavaScript
Msg β¬οΈ
This video is vary good this is a grat valuable video
It works perfectly for me!
Good π
O.M.G. my hero is you manπ₯°ππ!!! Great tutorial! Thank you so much for coding a coplex puzzle!!!! Obviously it will be difficult for me…but not impossible…maybe
Good luck π
How hard would it be to add auth login and keep progress as local storage or to a database, and how would you suggest I go about it?
Not too hard. You can serialize the puzzle pieces as a JSON string, for example and store it into local storage. That should preserve the pieces’ characteristics as well: like the location of the tabs. The login can be a standard component.
This was awesome, Radu! Thanks! Hope to see more of this. I’ve already subscribed to your channel.
I’m glad you like it π and that you subscribed π
I really like and apreciate this channel i hope this channel have many subs and view sooner