WIP: bullets hit walls

html/images/space.svg

@@ -6,7 +6,6 @@
       font-size: 4pt;
       font-family: courier;
       color: white;
-      display: none;
     }
 
     #info {
@@ -491,6 +490,11 @@ function fireBullet(position, velocity) {
   observer.observe(bulletsContainer, config);
 
   const lineEl = document.createElementNS(namespaceURIsvg, 'line');
+  // bulletsContainer.addEventListener("DOMContentLoaded", (event) => {
+  //   console.log("bulletsContainer fully loaded and parsed");
+  // });
+
+
   lineEl.classList.add('bullet');
   // lineEl.setAttribute('x1', position.x + vx * cannonLength);
   //   x: position.x + vx * cannonLength,
@@ -505,17 +509,45 @@ function fireBullet(position, velocity) {
     y: position.y + rise
   }
 
+  const bulletDestination = {
+    x: bulletOrigin.x + run * 50,
+    y: bulletOrigin.y + rise * 50
+  }
+
   lineEl.setAttribute('x1', bulletOrigin.x);
   lineEl.setAttribute('y1', bulletOrigin.y);
-  lineEl.setAttribute('x2', bulletOrigin.x + run * 50);
-  lineEl.setAttribute('y2', bulletOrigin.y + rise * 50);
+  lineEl.setAttribute('x2', bulletDestination.x);
+  lineEl.setAttribute('y2', bulletDestination.y);
+
+  const startTime = performance.now()
+
+  let pt, hit;
+  for (let i = 0; i <= lineEl.getTotalLength(); i++) {
+    pt = lineEl.getPointAtLength(i);
+    hit = [...wallElements].find(el => el.isPointInFill(pt));
+    if (hit) break;
+  }
+
+  const endTime = performance.now()
+
+  console.log(`Took ${endTime - startTime} milliseconds`)
+
   // lineEl.addEventListener('transitionrun', e => console.log('transitionrun', e));
   // lineEl.addEventListener('transitionstart', e => console.log('transitionstart', e));
   // lineEl.addEventListener('transitionend', e => console.log('transitionend', e));
   lineEl.addEventListener('transitionend', e => e.target.remove());
-  lineEl.addEventListener('transitioncancel', e => console.log(e));
+
+  if (hit) {
+    lineEl.setAttribute('x2', pt.x);
+    lineEl.setAttribute('y2', pt.y);
+  }
+
   const appended = bulletsContainer.appendChild(lineEl);
+  // [...bulletsContainer.children][0].classList.add('fade');
   // I don't know why I have to delay it
+  // console.log("path length", lineEl.getTotalLength());
+
+
   setTimeout(() => appended.classList.add('fade'), 1000);
 
   // const bullet = {