WIP: landing

html/images/space.svg

@@ -149,6 +149,15 @@
     let acceleration; // meters per second per second
     let rotate = 0;
 
+    const s = {
+      position: { x: 0, y: 0 },
+      velocity: { x: 0, y: 0 },
+      acceleration: { x: 0, y: 0 },
+      rotate: 0,
+      collision: null,
+      node: null
+    };
+
     let friction = 0;
     let rotationSpeed = 0.25;
     let started = false;
@@ -161,6 +170,7 @@
     const time = document.querySelector("#time");
     const debug = document.querySelector("#debug");
     const ship = document.querySelector(".ship");
+    s.node = ship;
     const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("#body");
     // const walls = document.querySelectorAll('.wall:not(.inverse)');
@@ -187,7 +197,7 @@
         // return [+x, +y];
         // const [xb, yb] = arr[i]++;
         const [xb, yb] = arr[(i + 1) % arr.length].split(',');
-        console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") });
+        // console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") });
 
         // return `${+x},${+y} ${+xb},${+yb}`;
         return {
@@ -203,14 +213,14 @@
     });
 
 
-    console.log("edgeszz", edgeszz);
+    // console.log("edgeszz", edgeszz);
     // console.log("wall corners", allWallCorners);
 
     const allEdgePts = allWallCorners.map(w =>
       w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
     );
 
-    console.log("all edge points", allEdgePts);
+    // console.log("all edge points", allEdgePts);
 
     let allStartingEdges;
     init(allEdgePts);
@@ -406,11 +416,16 @@
       });
     }
 
-    function slope(edge) {
+    function slope({ xa, ya, xb, yb }) {
-      const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n));
+      // const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n));
       return (yb - ya) / (xb - xa);
     }
 
+    function isLandable(edge) {
+      console.log("edge", edge, "slope", slope(edge));
+      return Object.is(slope(edge), +0);
+    }
+
     // i need to know which edge
     function detectEdgeCollision([xc, yc], edge, edgee) {
       // console.log("edge", edge, "edgee", edgee);
@@ -439,7 +454,7 @@
 
     function detectCollisions(position, walls, edges, z) {
       // console.log("edges to test for collision", edgesToCheck);
-      console.log("walls", walls);
+      // console.log("walls", walls);
       // this returns the wall with the corner, no the corner
       let actualCorner;
       const corner = walls.find(wall => {
@@ -460,7 +475,6 @@
         }
       );
 
-      console.log("collision detected", "edge", edge, "corner", actualCorner);
 
       // if (found) console.log("found", found.node, found.node.node.classList.contains("inverse"));
 
@@ -476,37 +490,60 @@
       return edge || actualCorner;
     }
 
-    function updateShip(elapsed) {
+    function updateShip(s, 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)`;
 
-      let [velocityX, velocityY] = restart ? [0, 0] : velocity;
+      // let [velocityX, velocityY] = restart ? [0, 0] : velocity;
-      let [accelerationX, accelerationY] = restart ? [0, 0] : acceleration;
+      let { x: velocityX, y: velocityY } = s.velocity;
+      // let [accelerationX, accelerationY] = restart ? [0, 0] : acceleration;
+      let { x: accelerationX, y: accelerationY } = s.acceleration;
 
-      if (velocityX > 0) accelerationX += -friction;
+      // if (velocityX > 0) accelerationX += -friction;
-      else if (velocityX < 0) accelerationX += friction;
+      // else if (velocityX < 0) accelerationX += friction;
-
+      //
-      if (velocityY > 0) accelerationY += -friction;
+      // if (velocityY > 0) accelerationY += -friction;
-      else if (velocityY < 0) accelerationY += friction;
+      // else if (velocityY < 0) accelerationY += friction;
 
       velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
       velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
-      velocity = [velocityX, velocityY];
 
-      if (velocity[0] > maxSpeed) velocity[0] = maxSpeed;
+      s.velocity = { x: velocityX, y: velocityY };
-      else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed
+      // if (velocity[0] > maxSpeed) velocity[0] = maxSpeed;
-
+      // else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed
-      if (velocity[1] > maxSpeed) velocity[1] = maxSpeed;
+      //
-      else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed
+      // if (velocity[1] > maxSpeed) velocity[1] = maxSpeed;
+      // else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed
 
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
 
-      let [x, y] = getTranslate(ship);
+      let { x, y } = s.position;
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
-      ship.style.transform = `translate(${positionX}px, ${positionY}px)`;
+      s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
-      return position;
+
+      if (s.collision && !isLandable(s.collision.edge)) {
+        // console.log("collision detected", s.collision, "slope", Object.is(slope(s.collision.edge), +0));
+        // console.log("isLandable()", isLandable(s.collision.edge));
+        s.velocity = { x: 0, y: 0 };
+        // s.position = { x: 0, y: 0 }
+        // s.node.style.transform = `translate(${0}px, ${0}px)`;
+        // s.position = { x: positionX, y: positionY }
+
+        console.log("ship", s);
+      } else if (s.collision) {
+        console.log("ship landed", s);
+        s.velocity = { x: 0, y: 0 };
+
+        s.collision = null;
+        s.position = { x: positionX, y: positionY }
+      // ship.style.transform = `translate(${positionX}px, ${positionY}px)`;
+        s.node.style.transform = `translate(${positionX}px, ${positionY}px)`;
+      } else {
+        s.position = { x: positionX, y: positionY }
+        s.node.style.transform = `translate(${positionX}px, ${positionY}px)`;
+      }
     }
 
     function updateEdges(position) {
@@ -528,10 +565,6 @@
       });
     }
 
-    function isLandable(edge) {
-      return true;
-    }
-
     function init(edgePts) {
       started = false;
       position = [0, 0]; // meters
@@ -576,26 +609,23 @@
         frameCount++;
       }
 
-      position = updateShip(elapsed);
+      // position = updateShip(s, elapsed);
+      updateShip(s, elapsed);
       updateBullets(elapsed);
       updateEdges(position);
       if (drawCollisionLines) updateTriangles(position);
 
-      const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
+      // const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
 
-      console.log("collision", collision && collision.hasOwnProperty("edge"));
+      // console.log("collision", collision && collision.hasOwnProperty("edge"));
       // console.log("landable?", isLandable(collision));
 
-      if (collision) {
+      console.log("collision", s.collision);
-        if (collision.hasOwnProperty("edge") && isLandable(collision)) {
+      if (s.collision) {
-          // stop velocity in all directions
+        started = false;
-          velocity = [0, 0];
+        isReadingKeys = false;
-        } else {
+        walls.forEach(w => w.setAttribute('fill', 'red'));
-          started = false;
+        // bg.style.fill = 'red';
-          isReadingKeys = false;
-          walls.forEach(w => w.setAttribute('fill', 'red'));
-          bg.style.fill = 'red';
-        }
       }
 
       if (restart) {
@@ -646,28 +676,28 @@
         case "ArrowUp":
           if (!upPressed) {
             upPressed = true;
-            acceleration[1] += -force;
+            s.acceleration.y += -force;
           }
           break;
         case "KeyS":
         case "ArrowDown":
           if (!downPressed) {
             downPressed = true;
-            acceleration[1] += force;
+            s.acceleration.y += force;
           }
           break;
         case "KeyA":
         case "ArrowLeft":
           if (!leftPressed) {
             leftPressed = true;
-            acceleration[0] += -force;
+            s.acceleration.x += -force;
           }
           break;
         case "KeyD":
         case "ArrowRight":
           if (!rightPressed) {
             rightPressed = true;
-            acceleration[0] += force;
+            s.acceleration.x += force;
           }
           break;
         case "KeyQ":
@@ -700,28 +730,28 @@
         case "ArrowUp":
           if (upPressed) {
             upPressed = false;
-            acceleration[1] -= -force;
+            s.acceleration.y -= -force;
           }
           break;
         case "KeyS":
         case "ArrowDown":
           if (downPressed) {
             downPressed = false;
-            acceleration[1] -= force;
+            s.acceleration.y -= force;
           }
           break;
         case "KeyA":
         case "ArrowLeft":
           if (leftPressed) {
             leftPressed = false;
-            acceleration[0] -= -force;
+            s.acceleration.x -= -force;
           }
           break;
         case "KeyD":
         case "ArrowRight":
           if (rightPressed) {
             rightPressed = false;
-            acceleration[0] -= force;
+            s.acceleration.x -= force;
           }
           break;
         case "KeyQ":