Advanced hit-test HTML Canvas tutorial

Опубликовано: 22 Октябрь 2021
на канале: Radu Mariescu-Istodor
1,984
73

In this video we implement advanced hit-testing on HTML Canvas. We do this advanced hit detection by using a multi-canvas technique and unique color codes for the pieces. In this way we can select a pieces as expected, no matter what shape it has.

This tutorial is part 10 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)

Source code on my website:
https://radufromfinland.com

Play the game here:
https://radufromfinland.com/projects/...

Full PuzzleCam Tutorial playlist:
   • PuzzleCam JavaScript Course  

Game introduction (1000 subscriber special):
   • 1000 Subscriber Special (Channel rede...  

Me playing PuzzleCam on INSANE difficulty:
   • Live Camera Puzzle (PuzzleCam): 1000 ...  


Смотрите видео Advanced hit-test HTML Canvas tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Radu Mariescu-Istodor 22 Октябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,98 раз и оно понравилось 7 людям.