Asteroids javascript implementation

In order to somehow dilute the trend towards 30line players, I decided to write a rather complete and, in comparison with 30lines, bulk implementation of the classic game Asteroids.

I will not be measured by the number of lines or characters of the code, because it has a fairly normal design and even comments.
The world of the game is drawn on canvas, all objects of the world are unified, and the collision detector uses a pixel-by-pixel test. There is a simple dubbing of life, godmod for the first seconds after the appearance, points, complexity increasing with points and, of course, asteroids falling apart.
You can try here . I strongly advise Chrome or at least FF.


To reduce the amount of logic, all the objects of the world are made universal, with minimal separation depending on the specific type. The geometry of the objects is stored in the lists of vertices, just like they used to do through glBegin (GL_LINES). For the ship, two geometries are assigned (regular and with flame during acceleration) for the sake of the same logic unification. If you break the code, you can make asteroids or bullets in the shape of a ship, and so on. All points in the geometry are specified in the coordinates [-1..1], and specific dimensions are obtained by scaling at the canvas drawing level. And for any size of the asteroid, you can apply any geometry (there are several options for asteroids).

Each object has a group of characteristics:

• Object type: ship, asteroid, bullet. UFO yet;
• Current geometry;
• Coordinates of the geometry center in the screen SC;
• The size of the object, as a multiplier of coordinates in geometry;
• The projections of the velocity vector on the coordinate axes;
• Drag coefficient (> 1 for the ship, which leads to drag after acceleration);
• Angle of rotation and "angular velocity" used for asteroids and bullets;
• The lifetime of the object, if this time is limited (applies to bullets).

Unification has greatly simplified the handling of special situations, such as wrapping an object as it leaves the screen.

In one of the first versions I tried the variant with the display of objects in two parts, with a partial approach over the edges (a sort of Portal). It looked funny, but it seemed to me not at all canonical. Maybe worth a refund?
')
Differentiation by type is performed only in the logic of handling collisions, in order to understand what has come across at all. Now accounted for the collision of asteroids in the ship and bullets. There are thoughts about the collision of asteroids with each other, and, of course, an introduction to the game of UFOs.

The initial version of the collisions on the shells (the bounding box through the circumscribed circles) showed inconsistency, when in the case, as in the picture on the right, the collision worked. This was unacceptable, as it deprived of all the "drive". I came up with two solutions: the mathematical calculation of the intersection of geometry (any object is represented as a closed set of segments) and pixel-by-pixel testing exactly as it draws the browser engine. The first option is, theoretically, less resource-intensive, but I chose the second.
A second canvas is created, on which (only if the shell test confirms a possible intersection) two checked objects are drawn, but in a red-green color gamut with active blending by 50%. As a result, in the place of the real intersection, we will have pixels that have both red and green components. Very simple, though not effective.


Well, some already more or less "meat" in the end:

It is seen that asteroids are derived wireframe. Again, for the sake of canonicity.