How to Code: Collision Detection — Part I

🚀Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet

Collision detection is what tells us when two objects have touched. By reacting to collisions, we can 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 just two objects, while part II will cover how to code collision detection between multiple objects.

Programming collision detection may seem scary at first, but it becomes exponentially easier with a basic understanding of some rudimentary math. Learn how to code this reactive effect in the latest installment of How to Code.

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/chriscourses

Beats:

Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre ... https://www.youtube.com/watch?v=XYzA_kPWyJ8