Show player tank condition by lives

src/game.js

@@ -483,20 +483,85 @@
     ctx.save();
     ctx.translate(cx, cy);
     ctx.rotate(directionAngle(entity.dir));
+
+    let glowColor, glowBlur, outerColor, innerColor, coreColor;
+
     if (isPlayer) {
-      ctx.shadowColor = "rgba(132, 238, 212, 0.75)";
-      ctx.shadowBlur = 12;
+      if (lives >= 3) {
+        glowColor = "rgba(132, 238, 212, 0.75)";
+        glowBlur = 12;
+        outerColor = "#e8fff7";
+        innerColor = "#102822";
+        coreColor = entity.color;
+      } else if (lives === 2) {
+        glowColor = "rgba(240, 182, 70, 0.45)";
+        glowBlur = 8;
+        outerColor = "#c8c0a0";
+        innerColor = "#1e2818";
+        coreColor = "#9a9850";
+      } else {
+        const pulse = 0.5 + 0.5 * Math.sin(Date.now() / 180);
+        glowColor = `rgba(212, 93, 69, ${0.5 + 0.4 * pulse})`;
+        glowBlur = 10 + 6 * pulse;
+        outerColor = "#3a2020";
+        innerColor = "#1a0c0c";
+        coreColor = "#6b2828";
+      }
+      ctx.shadowColor = glowColor;
+      ctx.shadowBlur = glowBlur;
     }
-    ctx.fillStyle = isPlayer ? "#e8fff7" : "#2c0f0a";
+
+    ctx.fillStyle = isPlayer ? outerColor : "#2c0f0a";
     ctx.fillRect(-18, -18, 36, 36);
     ctx.shadowBlur = 0;
-    ctx.fillStyle = isPlayer ? "#102822" : "#10140f";
+    ctx.fillStyle = isPlayer ? innerColor : "#10140f";
     ctx.fillRect(-15, -15, 30, 30);
-    ctx.fillStyle = entity.color;
+    ctx.fillStyle = coreColor || entity.color;
     ctx.fillRect(-12, -12, 24, 24);
     ctx.fillStyle = "rgba(255,255,255,0.18)";
     ctx.fillRect(-7, -8, 14, 16);
+
+    if (isPlayer && lives === 2) {
+      ctx.strokeStyle = "rgba(30, 20, 10, 0.55)";
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(-10, -6);
+      ctx.lineTo(4, 8);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(6, -10);
+      ctx.lineTo(12, -2);
+      ctx.stroke();
+      ctx.fillStyle = "rgba(30, 20, 10, 0.4)";
+      ctx.fillRect(-8, 4, 5, 5);
+      ctx.fillRect(5, -4, 4, 4);
+    }
+
+    if (isPlayer && lives <= 1) {
+      ctx.strokeStyle = "rgba(80, 10, 10, 0.6)";
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(-12, -8);
+      ctx.lineTo(6, 10);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(8, -12);
+      ctx.lineTo(-4, 6);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(-6, -12);
+      ctx.lineTo(10, 4);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(-10, 2);
+      ctx.lineTo(8, -6);
+      ctx.stroke();
+    }
+
     ctx.fillStyle = isPlayer ? "#f4fff8" : "#1b0805";
+    if (isPlayer && lives <= 1 && Math.floor(Date.now() / 300) % 2 === 0) {
+      ctx.globalAlpha = 0.3;
+    }
     ctx.fillRect(-4, -26, 8, 20);
     if (isPlayer) {
       ctx.fillStyle = "#f4fff8";
@@ -504,6 +569,15 @@
       ctx.fillRect(-10, -2, 20, 4);
       ctx.fillStyle = "#79e5c9";
       ctx.fillRect(-5, -5, 10, 10);
+      if (lives <= 1 && Math.floor(Date.now() / 300) % 2 === 0) {
+        ctx.fillStyle = "rgba(212, 93, 69, 0.7)";
+        ctx.beginPath();
+        ctx.moveTo(0, -14);
+        ctx.lineTo(5, -6);
+        ctx.lineTo(-5, -6);
+        ctx.closePath();
+        ctx.fill();
+      }
     } else {
       ctx.fillStyle = "#ffd2c2";
       ctx.beginPath();
@@ -513,6 +587,8 @@
       ctx.closePath();
       ctx.fill();
     }
+    ctx.globalAlpha = 1;
+
     ctx.restore();
   }