WIP: bullet

html/images/tanks.svg

@@ -57,6 +57,9 @@
         <line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
       </g>
     </g>
+
+    <circle id="bullet" cx="0" cy="0" r="1"/>
+
     <!-- <g id="crosshair"> -->
     <!--   <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/> -->
     <!--   <line x1="0" y1="-2" x2="0" y2="2" stroke="red"/> -->
@@ -74,6 +77,7 @@
     <button id="turn-right" xmlns="http://www.w3.org/1999/xhtml">🡒</button>
     <button id="rotate-ccw" xmlns="http://www.w3.org/1999/xhtml">⟲</button>
     <button id="rotate-cw" xmlns="http://www.w3.org/1999/xhtml">⟳</button>
+    <button id="fire" xmlns="http://www.w3.org/1999/xhtml">Fire</button>
   </foreignObject>
 
   <script type="text/javascript">//<![CDATA[
@@ -85,6 +89,7 @@
     const rightTurnButton = document.querySelector("#turn-right");
     const reverseMoveButton = document.querySelector("#move-backward");
     const forwardMoveButton = document.querySelector("#move-forward");
+    const bullet = document.querySelector("#bullet");
 
     const rotateCWButton = document.querySelector("#rotate-cw");
     const rotateCCWButton = document.querySelector("#rotate-ccw");
@@ -96,8 +101,29 @@
     let friction = 7.5;
     let rotate = 0;
     let rotationSpeed = 0.25;
+
+    let bullets = [
+      { x: 0, y: 0, vx: 0, vy: 1, time: 5000 }
+    ];
+
     gun.style.transform = "rotate(0deg)";
 
+    function wrapPos(positionX, positionY) {
+      let x, y;
+
+      // if (positionY > 150) positionY += -300;
+      if (positionY > 150) y = positionY - 300;
+      // else if (positionY < -150) positionY += 300;
+      else if (positionY < -150) y = positionY + 300;
+      else y = positionY;
+
+      if (positionX > 200) positionX += -400;
+      else if (positionX < -200) positionX += 400;
+      else x = positionX;
+
+      return [x, y];
+    }
+
     requestAnimationFrame(firstFrame);
 
     function firstFrame(timestamp) {
@@ -145,6 +171,19 @@
       const regex = /(-?\d*\.{0,1}\d+)px/g;
       const def = ["0px", "0"];
 
+      bullets[0].time -= elapsed;
+
+      if (bullets[0].time > 0) {
+        bullets[0].y += 0.1 * elapsed * bullets[0].vy;
+
+        let [bx, by] = wrapPos(bullets[0].x, bullets[0].y)
+        bullets[0].x = bx;
+        bullets[0].y = by;
+        bullet.style.transform = `translate(${bx}px, ${by}px)`;
+      } else {
+        bullet.remove();
+      }
+
       let x, y;
       if (hitbox.style.transform.length === 0) {
         x = 0;