Handle horizontal and vertical bases

html/images/space.svg

@@ -110,8 +110,8 @@
 
   <!-- <polygon class="wall" points="20,20 30,20 40,40 20,40" /> -->
   <!-- <polygon class="wall" points="20,20 20,10 30,10 30,20 40,40 10,40" /> -->
-  <polygon class="wall" points="-10,20 10,10 10,20" />
+  <!-- <polygon class="wall" points="-10,20 10,10 10,20" /> -->
-  <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
+  <polygon class="wall" points="20,20 40,20 40,40 20,40" />
   <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
   <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
   <!-- <polygon class="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" /> -->
@@ -185,8 +185,10 @@
 
     const s = {
       position: { x: 0, y: 0 },
+      velocity: { x: 0, y: 0 },
+
       // velocity: { x: 0.25 * mult, y: 1 * mult },
-      velocity: { x: 0, y: 1 * mult },
+      // velocity: { x: 0, y: 1 * mult },
       acceleration: { x: 0, y: 0 },
       rotate: 0,
       collision: null,
@@ -456,9 +458,21 @@
     }
 
     function perpIntxn(baseSlope, xa, ya, xc, yc) {
-      const altitudeSlope = 1 / -baseSlope;
+      let isx, isy;
-      const isx = (-altitudeSlope * xc + yc + baseSlope * xa - ya) / (baseSlope - altitudeSlope);
+
-      const isy = altitudeSlope * isx - altitudeSlope * xc + yc;
+      // base is vertical
+      if (baseSlope === -Infinity || baseSlope === Infinity) {
+        isx = xa;
+        isy = yc;
+      } else if (baseSlope === 0) { // base is horizontal
+        isx = xc;
+        isy = ya;
+      } else {
+        const altitudeSlope = 1 / -baseSlope;
+        isx = (-altitudeSlope * xc + yc + baseSlope * xa - ya) / (baseSlope - altitudeSlope);
+        isy = altitudeSlope * isx - altitudeSlope * xc + yc;
+      }
+
       return { x: isx, y: isy };
     }
 
@@ -551,7 +565,7 @@
       return { x: x, y: y };
     }
 
-    function updateShip(s, elapsed, collE) {
+    function updateShip(s, elapsed, edgeszz) {
       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)`;
@@ -576,6 +590,8 @@
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
       let [xc, yc] = position;
 
+      const collE = getCollisionEdges(edgeszz, position);
+      console.log("collision edges", collE);
       s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), collE);
 
       console.log("future position", xc, yc);
@@ -592,10 +608,14 @@
           y2: s.position.y + s.velocity.y
         };
 
+
+        console.log("baseSlope", baseSlope);
         const baseNrmlIntxn = perpIntxn(baseSlope, xa, ya, s.position.x, s.position.y);
         const baseVelIntxn = lineIntxnPt(baseLine, velocityLine);
+        console.log("baseNrmlIntxn", baseNrmlIntxn, "baseVelIntxn", baseVelIntxn);
         const baseSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y , baseVelIntxn.x, baseVelIntxn.y);
         const normalSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, s.position.x, s.position.y);
+        console.log("baseSegLength", baseSegLength, "normalSegLength", normalSegLength);
         const theta = Math.atan(normalSegLength / baseSegLength);
         const shipRadius = 5;
         const h = shipRadius / Math.sin(theta);
@@ -605,6 +625,8 @@
         cl.setAttribute('y1', baseVelIntxn.y);
         cl.setAttribute('x2', s.position.x);
         cl.setAttribute('y2', s.position.y);
+
+        console.log("h", h, "theta", theta, );
         const clPos = cl.getPointAtLength(h);
 
         s.velocity = { x: 0, y: 0 };
@@ -768,16 +790,11 @@
         frameCount++;
       }
 
-
+      updateShip(s, elapsed, edgeszz);
-      // position = updateShip(s, elapsed);
-      const collE = getCollisionEdges(edgeszz, position);
-
-      const { x, y } = s.position;
-      updateShip(s, elapsed, collE);
       // console.log("S POSITION", s.position);
       updateBullets(elapsed);
       // updateEdges(position);
-      if (!s.collision) updateLines(elapsed, collE, {x, y}, s.position);
+      // if (!s.collision) updateLines(elapsed, collE, {x, y}, s.position);
       if (drawCollisionLines) updateTriangles(position);
 
       // const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
@@ -787,6 +804,7 @@
 
       // console.log("collision", s.collision);
       if (s.collision && !s.isLanded) {
+        console.log(s.collision);
         started = false;
         isReadingKeys = false;
         walls.forEach(w => w.setAttribute('fill', 'red'));