Bullets

2024-08-30 07:44:31 +10:00 · 2024-08-30 07:44:31 +10:00 · f57e627c93
commit f57e627c93
parent 83395dd4a3
1 changed files with 173 additions and 0 deletions
--- a/src/bullets.html
+++ b/src/bullets.html
@ -0,0 +1,173 @@
+<html>
+  <body>
+    <canvas id="render" width="1920" height="1080"></canvas>
+  </body>
+  <style>
+    body,
+    html {
+      padding: 0;
+      margin: 0;
+    }
+
+    #render {
+      width: 100%;
+      aspect-ratio: 16/9;
+    }
+  </style>
+  <script>
+    const canvas = document.getElementById("render");
+    const { width, height } = canvas;
+    const middle = [width / 2, height / 2];
+    const ctx = canvas.getContext("2d");
+    ctx.font = "32px sans-serif";
+    let lastRenderTime = performance.now();
+    let mouse = [0, 0];
+
+    window.addEventListener("mousemove", (event) => {
+      mouse = [event.clientX, event.clientY];
+    });
+
+    const playerRadius = 10;
+    const bulletRadius = 5;
+    let _bullets = [];
+
+    let frameTimes = [1];
+    const renderFrameRate = (delta) => {
+      const fps = 1 / (delta / 1000);
+      frameTimes = [fps, ...frameTimes].slice(0, 100);
+
+      const avg =
+        frameTimes.reduce((acc, val) => acc + val, 0) / frameTimes.length;
+
+      ctx.fillStyle = "#fff";
+      ctx.fillText(`${avg.toFixed()} AVG FPS`, 10, 42);
+    };
+
+    const spawnBullet = (bullets, color, x, y, speed, angle) => {
+      return [...bullets, { color, x, y, speed, angle }];
+    };
+
+    const cullBullets = (bullets) => {
+      return bullets.filter(
+        (bullet) =>
+          !(
+            bullet.x > width ||
+            bullet.x < 0 ||
+            bullet.y > height ||
+            bullet.y < 0
+          ),
+      );
+    };
+
+    const collisionCheck = (bullets) => {
+      const filtered = bullets.filter(
+        (bullet) =>
+          !(
+            bullet.x > mouse[0] &&
+            bullet.x < mouse[0] + playerRadius &&
+            bullet.y > mouse[1] &&
+            bullet.y < mouse[1] + playerRadius
+          ),
+      );
+
+      if (filtered.length < bullets.length) {
+        console.log("Hit!");
+      }
+
+      return filtered;
+    };
+
+    const moveBullets = (bullets, delta) => {
+      return bullets.map((bullet) => {
+        const speed = bullet.speed;
+        const rad = (bullet.angle * Math.PI) / 180;
+
+        return {
+          ...bullet,
+          x: bullet.x + speed * Math.cos(rad),
+          y: bullet.y + speed * Math.sin(rad),
+        };
+      });
+    };
+
+    const renderBullets = (bullets, ctx) => {
+      bullets.forEach((bullet) => {
+        const { x, y } = bullet;
+        ctx.fillStyle = bullet.color;
+        ctx.fillRect(
+          x - bulletRadius / 2,
+          y - bulletRadius / 2,
+          bulletRadius,
+          bulletRadius,
+        );
+      });
+
+      ctx.fillStyle = "#fff";
+      ctx.fillText(`${bullets.length} Entities`, 10, 76);
+
+      return bullets;
+    };
+
+    let _lastAngle = 0;
+    const createSpiral = (bullets, x, y, color, lastAngle) => {
+      return spawnBullet(
+        spawnBullet(
+          spawnBullet(
+            spawnBullet(bullets, color, x, y, 1, lastAngle),
+            color,
+            x,
+            y,
+            1,
+            -lastAngle,
+          ),
+          color,
+          x,
+          y,
+          1,
+          lastAngle + 180,
+        ),
+        color,
+        x,
+        y,
+        1,
+        -(lastAngle + 180),
+      );
+    };
+
+    const draw = (ms) => {
+      const delta = ms - lastRenderTime;
+
+      ctx.fillStyle = "#000";
+      ctx.fillRect(0, 0, width, height);
+
+      _lastAngle = _lastAngle >= 360 ? 0 : (_lastAngle += 1);
+      let pattern = createSpiral(
+        createSpiral(
+          createSpiral(_bullets, ...middle, "#0f0", _lastAngle),
+          width / 4,
+          height / 2,
+          "#f00",
+          _lastAngle,
+        ),
+        width - width / 4,
+        height / 2,
+        "#00f",
+        _lastAngle,
+      );
+
+      _bullets = renderBullets(
+        collisionCheck(moveBullets(cullBullets(pattern), delta)),
+        ctx,
+      );
+
+      ctx.fillRect(mouse[0], mouse[1], playerRadius, playerRadius);
+
+      renderFrameRate(delta);
+
+      lastRenderTime = performance.now();
+      requestAnimationFrame(draw);
+    };
+
+    requestAnimationFrame(draw);
+  </script>
+</html>