Add bullet cancellation and widen touch controls

src/game.js

@@ -460,8 +460,24 @@
       bullet.y += bullet.vy * dt;
     }
 
+    const canceledBullets = new Set();
+    for (let i = 0; i < bullets.length; i += 1) {
+      if (canceledBullets.has(i)) continue;
+      for (let j = i + 1; j < bullets.length; j += 1) {
+        if (canceledBullets.has(j)) continue;
+        if (bullets[i].owner === bullets[j].owner) continue;
+        if (!intersects(expandedBullet(bullets[i]), expandedBullet(bullets[j]))) continue;
+        canceledBullets.add(i);
+        canceledBullets.add(j);
+        spark((bullets[i].x + bullets[j].x) / 2, (bullets[i].y + bullets[j].y) / 2, "#f7df7b");
+        break;
+      }
+    }
+
     const remaining = [];
-    for (const bullet of bullets) {
+    for (let index = 0; index < bullets.length; index += 1) {
+      if (canceledBullets.has(index)) continue;
+      const bullet = bullets[index];
       const out =
         bullet.x < -20 || bullet.y < -20 || bullet.x > WIDTH + 20 || bullet.y > HEIGHT + 20;
       if (out) continue;
@@ -503,6 +519,16 @@
     bullets = remaining;
   }
 
+  function expandedBullet(bullet) {
+    const padding = 5;
+    return {
+      x: bullet.x - padding,
+      y: bullet.y - padding,
+      w: bullet.w + padding * 2,
+      h: bullet.h + padding * 2,
+    };
+  }
+
   function updateParticles(dt) {
     particles = particles
       .map((particle) => ({

src/styles.css

@@ -446,7 +446,7 @@ kbd {
 
   .touch-controls {
     grid-template-columns: minmax(144px, 40vw) minmax(104px, 1fr);
-    column-gap: 24px;
+    column-gap: 36px;
     row-gap: 10px;
   }