How to Code: Collision Detection — Part I

Released on June 6th 2017
Length: 17:26

Collision detection is the thing that tells us when two objects have touched. The benefit? Well we can react to this collision and do things such as: increase a user's score within an HTML5 canvas game, change objects' colors only when they have touched, and even determine when a user's character should take damage. Part I of this series will cover how to implement collision detection between two objects only, then part II will cover how to implement the reactive effect with multiple objects rendered on the canvas. Implementing collision detection may seem scary at first, but with a simple math function that makes use of something called the Pythagorean Theorem, things become exponentially easier. Learn why you'd want to code this effect, and how to do so within the latest installment of the How to Code series. Video Git Repo: ----------------------------- https://github.com/christopher4lis/canvas-boilerplate Video Timeline: ----------------------------- 00:53 - Screencast Begins / Project Setup 03:50 - Clarifying The End Goal 04:34 - Drawing Objects 07:41 - Make An Object Follow The Mouse 09:49 - Getting The Distance Between Two Points with The Pythagorean Theorem 13:52 - Detecting When Objects Collide The Platform: ------------------------- http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning. Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams. For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Chris Courses Social: ------------------------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Christopher Lis Social: --------------------------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre