Fast bullets

html/images/space.svg

@@ -34,6 +34,16 @@
       fill: yellow;
     }
 
+    line.bullet {
+      stroke: black;
+      opacity: 0.5;
+      transition: opacity 2s ease-out;
+    }
+
+    line.bullet.fade {
+      opacity: 0;
+    }
+
     #triangles polygon {
       fill-opacity: 0.2;
       stroke-width: 1px;
@@ -98,7 +108,7 @@
   <!-- <polygon class="wall inverse" points="-160,-40 -170,-120 40,-110 170,-120 160,40 170,130 -40,110 -170,120" /> -->
 
   <g id="player" class="ship">
-    <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
+    <line id="cannon" x1="0" y1="0" x2="8" y2="0" stroke="black"/>
     <circle id="body" cx="0" cy="0" r="5"/>
     <line id="velocity-indicator" x1="0" y1="0" x2="0" y2="0"/>
     <line id="acceleration-indicator" x1="0" y1="0" x2="0" y2="0"/>
@@ -457,16 +467,67 @@ function fireBullet(position, velocity) {
   el.setAttribute('cx', 0);
   el.setAttribute('cy', 0);
 
-  const bullet = {
-    x: position.x + vx * cannonLength,
-    y: position.y + vy * cannonLength,
-    vx: vx * speed + velocity.x,
-    vy: vy * speed + velocity.y,
-    time: bulletTimeout,
-    node: bulletsContainer.appendChild(el)
+  // Options for the observer (which mutations to observe)
+  const config = { attributes: false, childList: true, subtree: true };
+  // Callback function to execute when mutations are observed
+  const callback = (mutationList, observer) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === "childList") {
+        // console.log("A child node has been added or removed.");
+        // console.log('added nodes', mutation.addedNodes);
+        // console.log('children', bulletsContainer.children.length);
+        // [...mutation.addedNodes].forEach(b => b.classList.add('fade'));
+        // mutation.addedNodes.forEach(bullet => bullet.classList.add('fade'));
+      } else if (mutation.type === "attributes") {
+        // console.log(`The ${mutation.attributeName} attribute was modified.`);
+      }
+    }
+  };
+
+  // Create an observer instance linked to the callback function
+  const observer = new MutationObserver(callback);
+
+  // Start observing the target node for configured mutations
+  observer.observe(bulletsContainer, config);
+
+  const lineEl = document.createElementNS(namespaceURIsvg, 'line');
+  lineEl.classList.add('bullet');
+  // lineEl.setAttribute('x1', position.x + vx * cannonLength);
+  //   x: position.x + vx * cannonLength,
+  //   y: position.y + vy * cannonLength,
+  const rad = s.degrees * Math.PI / 180; // toFixed(15)?
+
+  const rise = Math.sin(rad) * cannonLength;
+  const run = Math.cos(rad) * cannonLength;
+
+  const bulletOrigin = {
+    x: position.x + run,
+    y: position.y + rise
   }
 
-  bullets.push(bullet);
+  lineEl.setAttribute('x1', bulletOrigin.x);
+  lineEl.setAttribute('y1', bulletOrigin.y);
+  lineEl.setAttribute('x2', bulletOrigin.x + run * 50);
+  lineEl.setAttribute('y2', bulletOrigin.y + rise * 50);
+  // lineEl.addEventListener('transitionrun', e => console.log('transitionrun', e));
+  // lineEl.addEventListener('transitionstart', e => console.log('transitionstart', e));
+  // lineEl.addEventListener('transitionend', e => console.log('transitionend', e));
+  lineEl.addEventListener('transitionend', e => e.target.remove());
+  lineEl.addEventListener('transitioncancel', e => console.log(e));
+  const appended = bulletsContainer.appendChild(lineEl);
+  // I don't know why I have to delay it
+  setTimeout(() => appended.classList.add('fade'), 1000);
+
+  // const bullet = {
+  //   x: position.x + vx * cannonLength,
+  //   y: position.y + vy * cannonLength,
+  //   vx: vx * speed + velocity.x,
+  //   vy: vy * speed + velocity.y,
+  //   time: bulletTimeout,
+  //   node: bulletsContainer.appendChild(el)
+  // }
+
+  // bullets.push(bullet);
 }
 
 function getRotate(el) {
@@ -721,9 +782,13 @@ function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
 }
 
 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)`;
+  if (rotate > 0) {
+    s.degrees = (s.degrees + rotationSpeed * elapsed) % 360;
+  } else if (rotate < 0) {
+    s.degrees = (s.degrees - rotationSpeed * elapsed) % 360;
+  }
+
+  gun.style.transform = `rotate(${s.degrees}deg)`;
 
   const { x: px, y: py } = s.position;
   const { x: vx, y: vy } = s.velocity;
@@ -864,6 +929,7 @@ function init() {
 
   s.acceleration = { x: 0, y: 0 };
   s.rotate = 0;
+  s.degrees = 0;
   s.collision = null;
   s.isLanded = false;
   s.gearDown = false;
@@ -909,7 +975,17 @@ function animate(timestamp) {
   }
 
   updateShip(s, elapsed);
-  updateBullets(elapsed);
+  // updateBullets(elapsed);
+  // console.log(bulletsContainer.children)
+  // console.log([...bulletsContainer.children].filter(b => !b.classList.contains('fade')));
+  // const a = [...bulletsContainer.children].filter(b => !b.classList.contains('fade')).forEach(b => b.classList.add('fade'));
+  // console.log(bulletsContainer.children);
+  // console.log('before', bulletsContainer.children);
+  // const a = [...bulletsContainer.children].filter(b => !b.classList.contains('fade'));
+  // const a = [...bulletsContainer.children].filter(b => !b.classList.contains('fade'));
+  // a.forEach(b => b.classList.add('fade'))
+  // console.log('after', bulletsContainer.children);
+
   // updateEdges(position);
   if (drawCollisionLines) updateTriangles(position);