From 547088084b3ab495afb4b7ee2ca51b777efef14d Mon Sep 17 00:00:00 2001
From: zenoamaro <zenoamaro@gmail.com>
Date: Mon, 24 Jun 2019 03:44:02 +0200
Subject: [PATCH] Explosions

---
 main.js    | 24 ++++++++++++++++++++++--
 weapons.js |  3 ++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index 9eb9b4a..ef315a4 100644
--- a/main.js
+++ b/main.js
@@ -13,6 +13,7 @@ const players = [];
 let currentPlayer = 0;
 let projectile = null;
 let prevProjectile = null;
+let explosion = null;
 let fadeCount = 0;
 let wind = 0;
 
@@ -85,14 +86,26 @@ function update() {
       projectile.osc.frequency.setValueAtTime(f, audio.currentTime);
 
       if (y > H || isTerrain(terrain, x, y)) {
-        clipTerrain(terrain, (ctx) => drawExplosion(ctx, projectile.x, projectile.y, weapon.xr));
         projectile.osc.stop();
-        state = 'land-collapse';
+        explosion = {
+          x: projectile.x,
+          y: projectile.y,
+          r: weapon.xr,
+          cr: 0,
+        }
+        state = 'explosion';
         return;
       }
     }
   }
 
+  else if (state === 'explosion') {
+    if (explosion.cr++ >= explosion.r) {
+      explosion = null;
+      state = 'land-collapse';
+    }
+  }
+
   else if (state === 'land-collapse') {
     collapseTerrain(terrain, projectile.x, projectile.weapon.xr);
     projectile = null;
@@ -121,6 +134,7 @@ function draw() {
   foreground.clearRect(0, 0, W, H);
   if (projectile) drawProjectile();
   for (let tank of players) drawPlayer(tank);
+  if (explosion) performExplosions();
   drawStatus();
 }
 
@@ -143,6 +157,12 @@ function fadeProjectiles(amount) {
   projectiles.putImageData(imageData, 0, 0);
 }
 
+function performExplosions() {
+  const {x, y, cr} = explosion;
+  drawExplosion(foreground, x, y, cr);
+  clipTerrain(terrain, (ctx) => drawExplosion(ctx, x, y, cr));
+}
+
 function drawStatus() {
   const player = players[currentPlayer];
   const {weapon} = player;
diff --git a/weapons.js b/weapons.js
index 47edc5e..7c41a22 100644
--- a/weapons.js
+++ b/weapons.js
@@ -1,5 +1,6 @@
 import {drawCircle} from './gfx.js';
 
 export function drawExplosion(ctx, x, y, r) {
-  drawCircle(ctx, x, y, r, 'white');
+  const color = 255 - (16 * (r % 16));
+  drawCircle(ctx, x, y, r, `rgb(${color}, 0, 0)`);
 }