Collision Detection JavaScript Tutorial Part 1




The source code: http://www.tigrisgames.com/src

This is JavaScript collision detection tutorial part 1, the intro to the free course consisting of about 10 tutorials on various collision detection cases including points and rectangles, line intersection, circle (or sphere) against lines and other circles and convex and concave polygons.

In my previous tutorials, the JavaScript sprite engine was nearly completed. But, the game engine is still not capable of collision detection, an important element if you’re planning on making any interesting games that go beyond chess or something where nothing collides with anything.

The rest of the series will follow, but this is an introduction. I hope this helps someone out there.

Original source


23 responses to “Collision Detection JavaScript Tutorial Part 1”

  1. here is how i remember that even crossings = outside, odd crossings = inside. at every crossing you change from either inside->outside or outside->inside, so 4 crossings would be, inside->outside->inside->outside

  2. OK, so let's say a polygon happens to end up sitting wherever it is you start your line from for the point in polygon test, and it would result in zero intersections. This could count a miss, just like if the point were far enough away that the line never intersected at all, since zero is even. How do we determine a starting point for the line that guarantees at least one intersection between its starting point and the point being tested?

  3. your description of convex/concave is flawed. convex means that no (interior) angle is greater than 180 degrees.
    at 13:25 you're pointing at an angle that has nothing to do with the shape being convex/concave.

    other than that, great introduction!

  4. I enjoy the subject matter, but I feel you could do it more justice if you work on your script a bit more. A quarter of the way through the video all you've really conveyed is that you wrote a JS engine, ported it to C, and it was a lot of work; all things you repeated multiple times. These are not very complex concepts, so you can be fairly sure that most of the people watching will understand them the first time.

    In the same period you briefly mentioned an overview of what you want to present, without elaborating on it, and discussed some technical details of the 3d collision detection. I would have really liked to hear more elaboration of what the tutorial is about, and how you will be covering the topic. I think you also missed many chances to refer to things in the video. Most of the time what's being shown has very little to do with what's being discussed.

  5. I just stumbled across your tutorial series for Javascript HTML games, and I'm really glad I found them! And now this pops up, great!

    EDIT: Do you know when you'lll be uploading the source code section of this tutorial?

Leave a Reply