JavaScript Tutorial – PuzzleCam Game

52 Comments / Web Design

Ecommerce Empire Academy

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:

52 thoughts on “JavaScript Tutorial – PuzzleCam Game”

  3. Fadhil Kiima

    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.

    1. peter

      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

    2. Radu Mariescu-Istodor

      @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!

  6. Dex Miller

    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

  9. Andrew Erwin

    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.

    1. Radu Mariescu-Istodor

      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.

    2. Andrew Erwin

      @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.

  10. Andrew Erwin

    Also, I feel like in stead of using mouse events and touch events, you can just use click events to cover it all…

    1. Radu Mariescu-Istodor

      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.

    2. Andrew Erwin

      @Radu Mariescu-Istodor actually, I tried it out myself and you are right. Your way is better!

  11. Signal P

    Saw hundreds of tutorials on this channel, this is probably the most impressive one I’ve seen. Great Job!

    1. Radu Mariescu-Istodor

      Not sure if that’s really true, or if it’s just different than most. Regardless, flattering to hear such a thing. Thanks 🙂

    2. Signal P

      @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

  12. Esther Programmeert

    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

    1. Radu Mariescu-Istodor

      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.

  14. Chaitanya Vuddanti

    Thanks for this course. Please create more projects like this and also those that experiment with concepts like Object Oriented Programming in JavaScript

  17. MQJogos

    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

  18. elr1818

    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?

    1. Radu Mariescu-Istodor

      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.

  19. Ayomide Ayodele

    This was awesome, Radu! Thanks! Hope to see more of this. I’ve already subscribed to your channel.

  20. Elgis O.D Sanvictores

    I really like and apreciate this channel i hope this channel have many subs and view sooner

Comments are closed.