Add gravity

html/images/space.svg

@@ -178,8 +178,8 @@
       <span id="fps" xmlns="http://www.w3.org/1999/xhtml">-</span> fps
     </div>
     <ul xmlns="http://www.w3.org/1999/xhtml">
+      <li xmlns="http://www.w3.org/1999/xhtml">use angular velocity for gun turning?</li>
       <li xmlns="http://www.w3.org/1999/xhtml">bounce from collisions</li>
-      <li xmlns="http://www.w3.org/1999/xhtml">gravity</li>
       <li xmlns="http://www.w3.org/1999/xhtml">fall off screen after crash</li>
       <li xmlns="http://www.w3.org/1999/xhtml">make ship a helicopter</li>
       <li xmlns="http://www.w3.org/1999/xhtml">use paths for walls</li>
@@ -520,7 +520,6 @@ function fireBullet(position, degrees) {
   lineEl.addEventListener('transitionend', e => e.target.remove());
 
   const startTime = performance.now()
-  // console.time('bulletCollision');
 
   let pt, hit;
   for (let i = 0; i <= lineEl.getTotalLength(); i++) {
@@ -530,9 +529,24 @@ function fireBullet(position, degrees) {
   }
 
   const endTime = performance.now()
-  // console.timeEnd('bulletCollision');
   console.log(`Took ${endTime - startTime} milliseconds`)
 
+  // const screenCTM = svg.getScreenCTM();
+  // const startTime = performance.now()
+  //
+  // let pt, hit;
+  // for (let i = 0; i <= lineEl.getTotalLength(); i++) {
+  //   pt = lineEl.getPointAtLength(i);
+  //   const domPt = pt.matrixTransform(screenCTM);
+  //   const elements = document.elementsFromPoint(domPt.x, domPt.y);
+  //   hit = elements.find(el => el.classList.contains('wall'));
+  //
+  //   if (hit) break;
+  // }
+  //
+  // const endTime = performance.now()
+  // console.log(`Took ${endTime - startTime} milliseconds`)
+
   if (hit) {
     lineEl.setAttribute('x2', pt.x);
     lineEl.setAttribute('y2', pt.y);
@@ -771,6 +785,8 @@ function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
 }
 
 function updateShip(s, elapsed) {
+  const gravity = 0.25;
+
   if (rotate > 0) {
     s.degrees = (s.degrees + rotationSpeed * elapsed) % 360;
   } else if (rotate < 0) {
@@ -781,7 +797,9 @@ function updateShip(s, elapsed) {
 
   const { x: px, y: py } = s.position;
   const { x: vx, y: vy } = s.velocity;
-  const { x: ax, y: ay } = s.acceleration;
+  // const { x: ax, y: ay } = s.acceleration;
+  let { x: ax, y: ay } = s.acceleration;
+  ay += gravity;
 
   s.velocity = {
     x: vx > 0 && vx + ax <= 0 ? 0 : vx + ax,