ZIM Basics 09 - How to use Hit Tests on the HTML 5 Canvas with JavaScript and ZIMjs
Channel: ZIM LEARN
Date: 12/06/2021

Here is a ZIM Basics video about hit tests in ZIM at https://zimjs.com to code creativity on the HTML 5 Canvas with JavaScript and ZIM powered by CreateJS.  Hit tests test of two objects are hitting. There are many types of hit tests and they can be tricky both in which type to use and when and where to put the test.  Here is a ZIM TIPS that will help as we have compiled all the things that might go wrong and how to avoid errors: https://zimjs.com/tips.html#HITTEST Also see https://zimjs.com/hittests.html

00:00 start explaining this example
01:00 other example with label and circle example draggable  https://codepen.io/zimjs/pen/xzzaVq
07:45 testing hitTestCircle and hitTestRect
11:50 if circle hit square equation by changing the color of the circle
12:40 Zim 10 introduced circle and rect combined into https://zimjs.com/docs.html?items=hitTestcircleRect (another example with circle to square can be found here https://codepen.io/zimjs/pen/LrqXxO)
14:50 full code while circle is dragged "pressmove"
17:23 full code with ELSE IF the circle becomes red when touch, otherwise again circle color green
17:56 example with score while hitting an object, it should count only one time,
20:26 example of color change but a better example can be a disappear for example with disappear:  https://codepen.io/zimjs/pen/JjoJQmR
21:05 outline box of the shape Circle hits correctly with  hitTestCircleRect
21:45 hitTestBounds is the bound of the shape hitting
21:56 hitTestRect only has some points onto the shape rect what is not easy for collision detecting
24:15 hitTestCircle by swapping the code with rect
26:24 SOLUTION: hitTestCircleRect
29:55 some hitTests have a margin parameter for a border for example border 20 with margin 10 because border is half into circle
35:25 ticker function on square that moves with https://zimjs.com/docs.html?items=animate
with an other triangle animate example 
https://codepen.io/zimjs/pen/YvvOpa

Come discuss ZIM with us at https://zimjs.com/slack and https://zimjs.com/discord  We would love to see you there!