Move bullets and lines updates to separate functions

html/images/space.svg

@@ -183,6 +183,45 @@
       return +degrees;
     }
 
+    function updateBullets(elapsed) {
+      bullets.forEach((bullet, index) => {
+        const deleteCount = 1;
+        bullets[index].time -= elapsed;
+
+        if (bullets[index].time > 0) {
+          bullets[index].y += 0.001 * elapsed * bullets[index].vy;
+          bullets[index].x += 0.001 * elapsed * bullets[index].vx;
+
+          let [bx, by] = wrapPos(bullets[index].x, bullets[index].y)
+          bullets[index].x = bx;
+          bullets[index].y = by;
+          bullet.node.style.transform = `translate(${bx}px, ${by}px)`;
+        } else {
+          bullet.node.remove();
+          bullets.splice(index, deleteCount);
+        }
+      });
+
+    }
+
+    function updateLines([positionX, positionY]) {
+      lines.forEach(line => {
+        line.setAttribute('x2', positionX);
+        line.setAttribute('y2', positionY);
+
+        // let slope = (+line.getAttribute('y2') - +line.getAttribute('y1')) / (+line.getAttribute('x2') - +line.getAttribute('x1'));
+        // slope = +slope.toFixed(15);
+        // console.log('slope', slope);
+
+        const firstP = line.getPointAtLength(1);
+        if (polygon.isPointInFill(firstP)) {
+          line.setAttribute('x2', line.getAttribute('x1'));
+          line.setAttribute('y2', line.getAttribute('y1'));
+        }
+      });
+
+    }
+
     requestAnimationFrame(firstFrame);
 
     function firstFrame(timestamp) {
@@ -238,41 +277,11 @@
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
 
-      bullets.forEach((bullet, index) => {
-        const deleteCount = 1;
-        bullets[index].time -= elapsed;
-
-        if (bullets[index].time > 0) {
-          bullets[index].y += 0.001 * elapsed * bullets[index].vy;
-          bullets[index].x += 0.001 * elapsed * bullets[index].vx;
-
-          let [bx, by] = wrapPos(bullets[index].x, bullets[index].y)
-          bullets[index].x = bx;
-          bullets[index].y = by;
-          bullet.node.style.transform = `translate(${bx}px, ${by}px)`;
-        } else {
-          bullet.node.remove();
-          bullets.splice(index, deleteCount);
-        }
-      });
-
       let [x, y] = getTranslate(hitbox);
-      let [positionX, positionY] = wrapPos(changeX + x, changeY + y);
+      let position = [positionX, positionY] = wrapPos(changeX + x, changeY + y);
 
-      lines.forEach(line => {
+      updateBullets(elapsed);
-        line.setAttribute('x2', positionX);
+      updateLines(position);
-        line.setAttribute('y2', positionY);
-
-        // let slope = (+line.getAttribute('y2') - +line.getAttribute('y1')) / (+line.getAttribute('x2') - +line.getAttribute('x1'));
-        // slope = +slope.toFixed(15);
-        // console.log('slope', slope);
-
-        const firstP = line.getPointAtLength(1);
-        if (polygon.isPointInFill(firstP)) {
-          line.setAttribute('x2', line.getAttribute('x1'));
-          line.setAttribute('y2', line.getAttribute('y1'));
-        }
-      });
 
       pt.x = positionX;
       pt.y = positionY;