Clean up

html/images/space.svg

@@ -216,8 +216,6 @@
 // };
 
 const namespaceURIsvg = 'http://www.w3.org/2000/svg';
-const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
-const regex = /(-?\d*\.{0,1}\d+)px/g;
 const bullets = [];
 const halfPi = Math.PI / 2;
 const maxSpeed = 100;
@@ -227,27 +225,17 @@ const drawCollisionLines = false;
 let previous, zero, frameCount = 0;
 let rotate = 0;
 
-let mult = 10000;
-
-const ship = document.querySelector(".ship");
-const s = { node: ship };
-
-let friction = 0;
-let rotationSpeed = 0.25;
-let started = false;
-let restart = false;
-let isReadingKeys = true;
+const s = {};
+s.node = document.querySelector(".ship");
+s.radius = +s.node.querySelector("#body").getAttribute('r');
+const gun = s.node.querySelector('#cannon');
+const legs = s.node.querySelector("#legs");
 
 const svg = document.querySelector('svg');
 const bg = svg.querySelector('#bg');
 const fps = document.querySelector("#fps");
 const time = document.querySelector("#time");
 const debug = document.querySelector("#debug");
-const gun = ship.querySelector('#cannon');
-const shipBody = ship.querySelector("#body");
-const shipRadius = +shipBody.getAttribute('r');
-
-const legs = ship.querySelector("#legs");
 const wallElements = document.querySelectorAll('.wall');
 const bulletsContainer = document.querySelector("#bullets");
 const triangleContainer = document.querySelector('#triangles');
@@ -297,7 +285,40 @@ const map = (function(els) {
 })(wallElements);
 
 let allStartingEdges;
-init();
+let friction = 0;
+let rotationSpeed = 0.25;
+let started = false;
+let restart = false;
+let isReadingKeys = true;
+
+function init() {
+  started = false;
+  const mult = 10;
+
+  s.position = { x: 10, y: 10 };
+  s.velocity = { x: 0, y: 0 };
+
+  // s. velocity = { x: -5*mult, y: 7*mult };
+
+  s.acceleration = { x: 0, y: 0 };
+  s.rotate = 0;
+  s.degrees = 0;
+  s.collision = null;
+  s.isLanded = false;
+  s.gearDown = false;
+
+  [...edgeContainer.children].forEach(c => c.remove());;
+  s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
+
+  wallElements.forEach(w => w.setAttribute('fill', 'black'));
+  velIndic.setAttribute('x2', 0);
+  velIndic.setAttribute('y2', 0);
+  acclIndic.setAttribute('x2', 0);
+  acclIndic.setAttribute('y2', 0);
+
+  time.innerText = "0";
+}
+
 
 // const b = map.edges.map(({ edge }) => getEdgeCollisionBoundary(edge, shipRadius));
 // b.forEach(b => drawLine(b.xa, b.ya, b.xb, b.yb, "orange"));
@@ -785,7 +806,7 @@ function updateShip(s, elapsed) {
   // const tempRadius = 7;
 
   // s.collision = detectCollision([px, py], p, s.velocity, tempRadius, map);
-  s.collision = detectCollision([px, py], p, s.velocity, shipRadius, map, s.gearDown);
+  s.collision = detectCollision([px, py], p, s.velocity, s.radius, map, s.gearDown);
   if (s.collision) console.log("COLLISION", s.collision);
 
   legs.style.display = s.gearDown ? "initial" : "none";
@@ -793,7 +814,7 @@ function updateShip(s, elapsed) {
   if (!current && s.collision) {
     let posP;
     if (s.collision.corner) {
-      posP = cornerContactPosition(p.x, p.y, px, py, s.collision.corner, shipRadius);
+      posP = cornerContactPosition(p.x, p.y, px, py, s.collision.corner, s.radius);
     } else if (s.collision.edge) {
       if (isLandable(s.collision.edge) && s.gearDown) s.isLanded = true;
 
@@ -851,8 +872,6 @@ function updateLines(elapsed, walls, position, velocity) {
     if (!edgeIds.includes(n.id)) n.remove();
   });
 
-  // console.log("EDGES", edges);
-
   edges.forEach(({ xa, ya, xb, yb }) => {
     const id = `normal${xa}-${ya}-${xb}-${yb}`;
     const g = linesContainer.querySelector(`#${id}`) || document.createElementNS(namespaceURIsvg, 'g');
@@ -886,34 +905,6 @@ function updateLines(elapsed, walls, position, velocity) {
   });
 }
 
-function init() {
-  started = false;
-  const mult = 10;
-
-  s.position = { x: 10, y: 10 };
-  s.velocity = { x: 0, y: 0 };
-
-  // s. velocity = { x: -5*mult, y: 7*mult };
-
-  s.acceleration = { x: 0, y: 0 };
-  s.rotate = 0;
-  s.degrees = 0;
-  s.collision = null;
-  s.isLanded = false;
-  s.gearDown = false;
-
-  [...edgeContainer.children].forEach(c => c.remove());;
-  s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
-
-  wallElements.forEach(w => w.setAttribute('fill', 'black'));
-  velIndic.setAttribute('x2', 0);
-  velIndic.setAttribute('y2', 0);
-  acclIndic.setAttribute('x2', 0);
-  acclIndic.setAttribute('y2', 0);
-
-  time.innerText = "0";
-}
-
 function firstFrame(timestamp) {
   zero = timestamp;
   zeroForTimer = timestamp;
@@ -1112,13 +1103,12 @@ svg.addEventListener("pointermove", function({ clientX, clientY }) {
   const svgP = pointerPt.matrixTransform(svg.getScreenCTM().inverse());
 
   if (bg.isPointInFill(svgP)) {
-    // console.log(Math.trunc(svgP.x), Math.trunc(svgP.y));
-
     xp.innerText = Math.trunc(svgP.x);
     yp.innerText = Math.trunc(svgP.y);
   }
 });
 
+init();
+
 //]]></script>
 </svg>
-