Add debug info

html/images/space.svg

@@ -58,6 +58,7 @@
     <button id="rotate-ccw" xmlns="http://www.w3.org/1999/xhtml">⟲</button>
     <button id="rotate-cw" xmlns="http://www.w3.org/1999/xhtml">⟳</button>
     <button id="fire" xmlns="http://www.w3.org/1999/xhtml">Fire</button>
+    <pre id="debug" xmlns="http://www.w3.org/1999/xhtml"></pre>
   </foreignObject>
 
   <script type="text/javascript">//<![CDATA[
@@ -79,6 +80,7 @@
     const rules = document.styleSheets[0].cssRules;
 
     const fps = document.querySelector("#fps");
+    const info = document.querySelector("#debug");
     const tank = document.querySelector(".tank");
     const gun = tank.querySelector('line');
     const hitbox = document.querySelector(".hitbox");
@@ -169,6 +171,11 @@
 
       if (delta >= 1000) {
         fps.innerText = frameCount;
+
+        info.innerText = 'bullets\nx\ty\tvx\tvy\n' + bullets.map((b, index) => {
+          return `${b.x.toFixed(2)}\t${b.y.toFixed(2)}\t${b.vx.toFixed(2)}\t${b.vy.toFixed(2)}`;
+        }).join("\n");
+
         zero = timestamp;
         frameCount = 0;
       } else {