Fix cannon rotation

html/images/space.svg

@@ -1,54 +1,29 @@
 <?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>
-    #frames {
+    #info {
       position: absolute;
       right: 0px;
-    }
-
-    p {
-      border: 1px solid black;
-      box-size: border-box;
+      padding: 1px;
+      font-size: 4pt;
+      font-family: courier;
     }
 
     rect#bg {
       fill: gray;
     }
 
-    .ship rect {
-      fill: green;
-    }
-
     .ship circle {
       fill: white;
     }
 
-    #crosshair {
-      opacity: 0.5;
-    }
-
     circle.bullet {
       fill: yellow;
     }
 
-    #frames {
-      padding: 1px;
-      font-size: 4pt;
-      font-family: courier;
-    }
-
-    #triangles {
-      opacity: 0.5;
-    }
-
-    #triangles line {
-      stroke: limegreen;
-      stroke-width: 0.5px;
-    }
-
     #triangles polygon {
       fill-opacity: 0.2;
-      stroke-width: 0.5px;
+      stroke-width: 1px;
       fill: none;
       stroke: none;
     }
@@ -58,14 +33,6 @@
       stroke: red;
     }
 
-    #lines line {
-      stroke: gold;
-    }
-
-    #legs {
-      display: none;
-    }
-
     #triangles polygon.obtuse {
       stroke: orangered;
       stroke-dasharray: 5 10;
@@ -75,34 +42,38 @@
       stroke: orange;
       stroke-dasharray: 1 5;
     }
+
+    #edges line {
+      stroke: gold;
+    }
+
+    #legs {
+      display: none;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
 
-  <g>
-    <g class="hitbox">
-      <g class="ship">
-        <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
-        <circle id="body" cx="0" cy="0" r="5"/>
-        <g id="legs">
-          <path d="M 3 2 l 2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
-          <path d="M -3 2 l -2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
-        </g>
-      </g>
+  <g class="ship">
+    <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
+    <circle id="body" cx="0" cy="0" r="5"/>
+    <g id="legs">
+      <path d="M 3 2 l 2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
+      <path d="M -3 2 l -2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
     </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" />
-
-    <g id="triangles"></g>
-    <g id="lines"></g>
-    <g id="bullets"></g>
   </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" />
+
+  <g id="triangles"></g>
+  <g id="edges"></g>
+  <g id="bullets"></g>
+
   <foreignObject x="-200" y="-150" width="100%" height="100%">
-    <div id="frames" xmlns="http://www.w3.org/1999/xhtml">
+    <div id="info" xmlns="http://www.w3.org/1999/xhtml">
       <span id="time" xmlns="http://www.w3.org/1999/xhtml">0</span> s
-      <span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
+      <span id="fps" xmlns="http://www.w3.org/1999/xhtml">-</span> fps
     </div>
 
     <pre id="debug" xmlns="http://www.w3.org/1999/xhtml"></pre>
@@ -133,11 +104,10 @@
     const ship = document.querySelector(".ship");
     const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("circle");
-    const hitbox = document.querySelector(".hitbox");
     const bulletsContainer = document.querySelector("#bullets");
     const wall = document.querySelector('#wall');
 
-    const pt = svg.createSVGPoint();
+    const bulletPt = svg.createSVGPoint();
     const cornerPt = svg.createSVGPoint();
 
     const wallCorners = wall.getAttribute('points').split(' ').map(coords => {
@@ -146,10 +116,14 @@
     });
 
     const triangleContainer = document.querySelector('#triangles');
-    const lineContainer = document.querySelector('#lines');
+    const lineContainer = document.querySelector('#edges');
     const edgePts = wallCorners.map((pt, i) => [pt, wallCorners[(i + 1) % wallCorners.length]]);
     const drawCollisionLines = true;
 
+    function distance(x1, y1, x2, y2) {
+      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+
     function drawEdges(lpts) {
       let edges = lpts.map(e => e.join(' '));
 
@@ -295,16 +269,15 @@
 
     function updateBullets(elapsed) {
       const deleteCount = 1;
-      const pt = document.querySelector('svg').createSVGPoint();
 
       [...bullets].forEach((bullet, index) => {
         bullet.time -= elapsed;
         const x = bullet.x + 0.001 * elapsed * bullet.vx;
         const y = bullet.y + 0.001 * elapsed * bullet.vy;
-        pt.x = x;
-        pt.y = y;
+        bulletPt.x = x;
+        bulletPt.y = y;
 
-        if (bullet.time > 0 && !wall.isPointInFill(pt)) {
+        if (bullet.time > 0 && !wall.isPointInFill(bulletPt)) {
           [bullet.x, bullet.y] = wrapPos(x, y);
           bullet.node.style.transform = `translate(${bullet.x}px, ${bullet.y}px)`;
         } else {
@@ -315,6 +288,8 @@
     }
 
     function detectCollision(corners, [xc, yc], edges) {
+      const shipRadius = 5;
+
       const cornerCollision = corners.some(([x, y]) => {
         cornerPt.x = x - xc;
         cornerPt.y = y - yc;
@@ -322,7 +297,6 @@
         return shipBody.isPointInFill(cornerPt);
       });
 
-      const shipRadius = 5;
       const sideCollision = edges.reduce((acc, e) => {
         const [[xa, ya], [xb, yb]] = e.split(' ').map(n => n.split(',').map(n => +n));
 
@@ -343,6 +317,7 @@
     }
 
     function updateShip(elapsed) {
+      const degrees = getRotate(gun);
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
       else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
 
@@ -368,9 +343,9 @@
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
 
-      let [x, y] = getTranslate(hitbox);
+      let [x, y] = getTranslate(ship);
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
-      hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
+      ship.style.transform = `translate(${positionX}px, ${positionY}px)`;
       return position;
     }
 
@@ -402,10 +377,6 @@
       animate(timestamp);
     }
 
-    function distance(x1, y1, x2, y2) {
-      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
-    }
-
     let isReadingKeys = true;
 
     function animate(timestamp) {
@@ -483,7 +454,7 @@
         case "Space":
           if (!spacePressed) {
             spacePressed = true;
-            const [x, y] = getTranslate(hitbox);
+            const [x, y] = getTranslate(ship);
             fireBullet(x, y, velocity);
           }
           break;