踫撞检测 之二 — Collision Detection and Sound

Collision Detection and Sound 踫撞检测及播放踫撞声音

---

Today I am going to add collision detection in my game. Algorithms to detect collision in 2D games depend on the type of shapes that can collide (e.g. Rectangle to Rectangle, Rectangle to Circle, Circle to Circle). Generally you will have a simple generic shape that covers the entity known as a “hitbox” so even collision may not be pixel perfect.

Axis-Aligned Bounding Box

One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.

var rect1 = {x: 5, y: 5, width: 50, height: 50}
var rect2 = {x: 20, y: 10, width: 10, height: 10}

if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
    // collision detected!
}

// filling in the values =>

if (5 < 30 &&
    55 > 20 &&
    5 < 20 &&
    55 > 10) {
    // collision detected!
}

Note: You can see a live example of Axis-Aligned Bounding Box collision detection on jsFiddle, to illustrate how this code would work in practice. Here is another example without Canvas or external libraries.

Circle Collision

Another simple shape for collision detection is between two circles. This algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two radii added together.

var circle1 = {radius: 20, x: 5, y: 5};
var circle2 = {radius: 12, x: 10, y: 5};

var dx = circle1.x - circle2.x;
var dy = circle1.y - circle2.y;
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < circle1.radius + circle2.radius) {
    // collision detected!
}

Note: You can see a live example of Circle collision detection on jsFiddle, to illustrate how this code would work in practice.

Separating Axis Theorem

This is a collision algorithm that can detect a collision between any two convex polygons. It’s more complicated to implement than the above methods but is more powerful. The complexity of an algorithm like this means we will need to consider performance optimization, covered in the next section.

1. Separating Axis Theorem (SAT) explanation
2. Collision detection and response
3. Collision detection Using the Separating Axis Theorem
4. SAT (Separating Axis Theorem)
5. Separation of Axis Theorem (SAT) for Collision Detection

Collision Performance

While some of these algorithms for collision detection are simple enough to calculate, it can be a waste of cycles to test every entity with every other entity. Usually games will split collision into two phases, broad and narrow.

Broad Phase

Broad phase should give you a list of entities that could be colliding. This can be implemented with a spacial data structure that will give you a rough idea of where the entity exists and what exist around it. Some examples of spacial data structures are Quad Trees, R-Trees or a Spacial Hashmap.

Narrow Phase

When you have a small list of entities to check you will want to use a narrow phase algorithm (like the ones listed above) to provide a certain answer as to whether there is a collision or not.

So how I am doing the collision detection in my game is shown in the below image with self-explanatory comments.

There are 2 more else conditions but they are almost similar to the previous ones and covering those things which aren’t covered there. In each of the collision function I am calling the sound function , this is how the sound is going to play.

collision is the sound object and then we are going to play the collision again after it is hitting the paddle.