Blasteroids - How It Was Created

Explosions

The explosions in the game serve two purposes; to create a visible indication that a bullet has hit something, and to mask the deletion of an asteroid with an optional creation of its fragments. They also look pretty cool...

The explosion is created using a png image (with some transparency), and some CSS animating both the scale and the opacity of the image for the duration of the explosion. The image took about 2 minutes to create using PaintShop Pro using an air-brush and 4 different colours; with a bit more time I'm sure I could make it look better!

Click on the nebula below to trigger an explosion. Occasionally, a different, larger explosion will be triggered. The larger explosion uses the same image but with slightly different css animation settings.

CSS

CSS is cool! Most of the explosion work is done in the style-sheet using a combination of zooming the image with a scale transform and fading, by adjustiung the explosion element's opacity. With some careful timing of these two attributes, quite a dynamic and effective explosion can be created. The CSS for this, including the two different types of explosion, is listed below:

1.explode-large {
2    opacity: 1;
3    animation-name: explode-large;
4    animation-duration: 0.8s;
5    animation-fill-mode: forwards;
6    transform-origin: center center;
7}
8
9.explode-small {
10    opacity: 1;
11    animation-name: explode-small;
12    animation-duration: 0.8s;
13    animation-fill-mode: forwards;
14    transform-origin: center center;
15}
16
17@keyframes explode-large {
18    0% {
19        opacity: 1;
20        transform: scale(0.0);
21    }
22    30% {
23        transform: scale(0.8);
24    }
25    50% {
26        opacity: 1;
27    }
28    100% {
29        opacity: 0;
30        transform: scale(4.2);
31    }
32}
33
34@keyframes explode-small {
35    0% {
36        opacity: 1;
37        transform: scale(0.0);
38    }
39    30% {
40        transform: scale(0.8);
41    }
42    50% {
43        opacity: 1;
44    }
45    100% {
46        opacity: 0;
47        transform: scale(1);
48    }
49}

The Code

Th

1// self invoking function...
2(function () {
3
4    // assuming the DOM has loaded and an element withn id "explosions" has 
5    // has been created in the document; hook up a little routine to create
6    // explosions
7    const elm = document.getElementById("explosions");
8    if( elm) {
9        elm.addEventListener("mousedown", (event) => {
10
11            // mouse-down, create an image with the explosion graphic at the
12            // location that the mouse when down on the target element (explosions)
13            const elmExplode = document.createElement("img");
14            elmExplode.src = "/games/blasteroids-2/explode-02.png";
15            const x = event.offsetX - 32;
16            const y = event.offsetY - 32;
17
18            // pointer-events: none; don't allow explosion to be clicked
19            elmExplode.style = "pointer-events: none; position: absolute; top: "+y+"px; left: "+x+"px;";
20
21            // Just for a bit of run, randomly generate a larger exlosion (because it looks cool)
22            // larger explosions are created using different animation parameters in the css, this
23            // code just applies the relevant class to make the magic happen
24            if( Math.random() > 0.9 ) {
25                elmExplode.classList.add("explode-large");
26            } else {
27                elmExplode.classList.add("explode-small");
28            }
29            
30            // when animation completed, remove the element.  This stops the DOM from being
31            // saturated with endless dead explosions
32            elmExplode.addEventListener("animationend", (event) => {
33                elmExplode.remove();
34            });
35
36            // add the explosion to the dom
37            elm.appendChild(elmExplode);
38
39        });        
40    }
41})();
42
43
44

Exploding Trails

Just for a bit of fun; in the image below, the same routine is used but with a slight modification that initiates explosions followng mouse with the mouseover events. This creates a neat little flame effect but also illustrates the importance of removing the explosion image element once the animation has finished. Failure to do this, would eventually cause performance issues as the DOM would become filled with latent hidden explosions.