Add pointermove event to print pointer coordinates

html/images/space.svg

@@ -1,12 +1,22 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <style>
+    foreignObject {
+      font-size: 4pt;
+      font-family: courier;
+    }
+
     #info {
       position: absolute;
       right: 0px;
       padding: 1px;
-      font-size: 4pt;
+    }
-      font-family: courier;
+
+    #pointer {
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      padding: 1px;
     }
 
     rect#bg {
@@ -64,7 +74,8 @@
   </g>
 
   <!-- <polygon id="wall" points="20,20 40,20 40,40 20,40" /> -->
-  <polygon id="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" />
+  <!-- <polygon id="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
+  <polygon id="wall" points="-130,-80 -40,-70 -70,-10 -100,40 -120,100" />
 
   <g id="triangles"></g>
   <g id="edges"></g>
@@ -75,8 +86,20 @@
       <span id="time" xmlns="http://www.w3.org/1999/xhtml">0</span> s
       <span id="fps" xmlns="http://www.w3.org/1999/xhtml">-</span> fps
     </div>
-
+    <ul xmlns="http://www.w3.org/1999/xhtml">
+      <li xmlns="http://www.w3.org/1999/xhtml">bounce off walls/border</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">gravity</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">complete surround by wall</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">fall off screen after crash</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">make ship a helicopter</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">use paths for walls</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">multiple walls</li>
+    </ul>
     <pre id="debug" xmlns="http://www.w3.org/1999/xhtml"></pre>
+    <div id="pointer" xmlns="http://www.w3.org/1999/xhtml">
+      x: <span class="x" xmlns="http://www.w3.org/1999/xhtml">-</span>,
+      y: <span class="y" xmlns="http://www.w3.org/1999/xhtml">-</span>
+    </div>
   </foreignObject>
 
   <script type="text/javascript">//<![CDATA[
@@ -103,14 +126,14 @@
     const svg = document.querySelector('svg');
     const fps = document.querySelector("#fps");
     const time = document.querySelector("#time");
-    const info = document.querySelector("#debug");
+    const debug = document.querySelector("#debug");
     const ship = document.querySelector(".ship");
     const gun = ship.querySelector('#cannon');
-    const shipBody = ship.querySelector("circle");
+    const shipBody = ship.querySelector("#body");
-    const bulletsContainer = document.querySelector("#bullets");
     const wall = document.querySelector('#wall');
+    const bulletsContainer = document.querySelector("#bullets");
     const triangleContainer = document.querySelector('#triangles');
-    const lineContainer = document.querySelector('#edges');
+    const edgeContainer = document.querySelector('#edges');
 
     const bulletPt = svg.createSVGPoint();
     const cornerPt = svg.createSVGPoint();
@@ -121,7 +144,7 @@
     });
 
     const edgePts = wallCorners.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]);
-    const collisionEdges = findEdges(edgePts, position);
+    const startingEdges = findEdges(edgePts, position);
 
     function distance(x1, y1, x2, y2) {
       return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
@@ -140,7 +163,7 @@
         el.setAttribute('y1', y1);
         el.setAttribute('x2', x2);
         el.setAttribute('y2', y2);
-        lineContainer.appendChild(el)
+        edgeContainer.appendChild(el)
       });
     }
 
@@ -351,19 +374,19 @@
     }
 
     function updateEdges(position) {
-      const mappedEdges = findEdges(edgePts, position);
+      const collisionEdges = findEdges(edgePts, position);
 
-      [...lineContainer.children].forEach(l => {
+      [...edgeContainer.children].forEach(l => {
         const x1 = l.getAttribute('x1');
         const y1 = l.getAttribute('y1');
         const x2 = l.getAttribute('x2');
         const y2 = l.getAttribute('y2');
         const edge = `${x1},${y1} ${x2},${y2}`;
 
-        if (mappedEdges.includes(edge))
+        if (collisionEdges.includes(edge))
           if ([
-            lineContainer.childElementCount <= collisionEdges.length,
+            edgeContainer.childElementCount <= startingEdges.length,
-            !collisionEdges.includes(edge)
+            !startingEdges.includes(edge)
           ].some(c => c))
             l.remove();
       });
@@ -387,7 +410,7 @@
       if (delta >= 1000) {
         fps.innerText = frameCount;
 
-        // info.innerText = `velocity ${velocity}\n`
+        // debug.innerText = `velocity ${velocity}\n`
         //   + 'bullets\nx\ty\tvx\tvy\n'
         //   + bullets.map(b => {
         //     return `${b.x.toFixed(2)}\t${b.y.toFixed(2)}\t${b.vx.toFixed(2)}\t${b.vy.toFixed(2)}`;
@@ -406,7 +429,7 @@
 
       if (restart) {
         restart = false;
-        [...lineContainer.children].forEach(c => c.remove());;
+        [...edgeContainer.children].forEach(c => c.remove());;
         drawEdges(edgePts);
       }
 
@@ -423,7 +446,7 @@
 
       // if (+y < 200)
       // if (timestamp < 10000)
-      if (lineContainer.childElementCount > 0 && started)
+      if (edgeContainer.childElementCount > 0 && started)
         requestAnimationFrame(t => animate(t));
     }
 
@@ -552,6 +575,24 @@
           break;
       }
     });
+
+    const bg = svg.querySelector('#bg');
+    const pointer = svg.querySelector('#pointer');
+    const xp = pointer.querySelector('.x');
+    const yp = pointer.querySelector('.y');
+    const pointerPt = svg.createSVGPoint();
+
+    svg.addEventListener("pointermove", function({ clientX, clientY }) {
+      pointerPt.x = clientX;
+      pointerPt.y = clientY;
+      const svgP = pointerPt.matrixTransform(svg.getScreenCTM().inverse());
+
+      if (bg.isPointInFill(svgP)) {
+        xp.innerText = Math.trunc(svgP.x);
+        yp.innerText = Math.trunc(svgP.y);
+      }
+    });
+
   //]]></script>
 </svg>