Gameplay elements in vanilla JavaScript (Menu, Timer, Check complete)

In this video we learn how to implement gameplay elements in vanilla JavaScript and HTML canvas. We will create a simple menu for the puzzlecam game. The menu will have a start button and a difficulty selection component. When the game starts we will start a timer which will run until the puzzle is solved (we also need to implement a check complete function).
This tutorial is part 4 of a series that teaches how to code a complex puzzle game that uses the camera:
Part 1. Accessing camera with HTML and vanilla JavaScript (Desktop and Mobile)
Part 2. Image manipulation in vanilla JavaScript (Cutting images into Pieces)
Part 3. Drag and drop in vanilla JavaScript and HTML canvas (Desktop and Mobile)
Part 4. Gameplay elements (Menu, Timer, Check complete)
Part 5. Styles and visuals (CSS and vectorial drawing)
Part 6. Working with sound (Recording and synthesis)
Part 7. MySql (PhpMyAdmin, Table structure)
Part 8. Php (Handling HTTP Requests, Interacting with the database)
Part 9. Advanced image manipulation in vanilla JavaScript (Shaping Puzzle Pieces)
Part 10. Advanced drag and drop in vanilla JavaScript (Handling Complex Shapes)
Full Playlist:
• PuzzleCam JavaScript C...
Play the game here:
radufromfinlan...
Me playing the game on INSANE difficulty:
• Live Camera Puzzle (Pu...
Game introduction (1000 subscriber special):
• 1000 Subscriber Specia...

[@Radu]

Did you ever build a game before? Share it here if it's playable somewhere, I'm really curious to see what you came up with!

[@javifontalva7752]

You are so underrated!!! Make more projects! They are awesome!

[@Radu]

Thanks :-) and thanks for watching!

[@comoyun]

Perfect video, as usual..

[@Radu]

Thanks! Really motivating to get comments like that :-)

[@Cyber_Lanka]

Nice video man. Wish you all the best with your KZbin channel.

[@Radu]

Thanks :-) Same to you!

[@Eternam]

Thank you very much for your videos

[@Radu]

You're welcome :-)

[@mohamedyoussef8835]

Awesome Videos ++++++++++++++++

[@Radu]

Many thanks!

[@3dfuture.ledcanvas]

you got my subscription!!!!

[@Radu]

Cool! Thanks :-)

[@3dfuture.ledcanvas]

still insane tutorial! haha!

[@Radu]

Glad you thought so.

[@javifontalva7752]

I had issue with the scope and I fixed it by creating a variable for each of those function and using arrow functions. Of course the variables are created outside the main function.

[@Radu]

Good that you found a workaround :-)