From a6fde9e567a6236d940df0f1021a29983b858567 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Sun, 21 Dec 2025 08:47:38 -0800 Subject: [PATCH] Fix cannon rotation --- html/images/space.svg | 115 ++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 72 deletions(-) diff --git a/html/images/space.svg b/html/images/space.svg index ff193e8..d7ca187 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -1,54 +1,29 @@ - - - - - - - - - - + + + + + + - - - - - - - + + + + + + + -
+
0 s - 0 fps + - fps 

@@ -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;