X-RAY

World Code

Tags:

New Feature, Decoration, Combat

Creator:

aungpyaephyopaing

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Ore Scanner Radius Demo</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
      background: #111;
      color: white;
    }

    #gameArea {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    #info {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 20;
      font-size: 14px;
      color: #ccc;
    }

    #player {
      position: absolute;
      width: 22px;
      height: 22px;
      background: cyan;
      border-radius: 50%;
      left: 400px;
      top: 250px;
      z-index: 10;
    }

    .ore {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: gold;
      box-shadow: 0 0 12px gold;
      display: none;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="info">
      Move: Arrow Keys | Toggle Scanner: J | Radius: 180px
    </div>

    <div id="player"></div>

    <div class="ore" style="left:120px; top:100px;"></div>
    <div class="ore" style="left:450px; top:180px;"></div>
    <div class="ore" style="left:600px; top:320px;"></div>
    <div class="ore" style="left:260px; top:360px;"></div>
    <div class="ore" style="left:800px; top:220px;"></div>
    <div class="ore" style="left:340px; top:500px;"></div>
  </div>

  <script>
    const player = document.getElementById("player");
    const ores = document.querySelectorAll(".ore");

    let scannerOn = false;
    const scanRadius = 180;
    const moveStep = 15;

    function getCenter(el) {
      return {
        x: el.offsetLeft + el.offsetWidth / 2,
        y: el.offsetTop + el.offsetHeight / 2
      };
    }

    function updateScanner() {
      if (!scannerOn) {
        ores.forEach(ore => ore.style.display = "none");
        return;
      }

      const playerPos = getCenter(player);

      ores.forEach(ore => {
        const orePos = getCenter(ore);
        const dx = orePos.x - playerPos.x;
        const dy = orePos.y - playerPos.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        ore.style.display = distance <= scanRadius ? "block" : "none";
      });
    }

    // 🔥 TOGGLE WITH J KEY
    document.addEventListener("keydown", (e) => {
      if (e.key.toLowerCase() === "j") {
        scannerOn = !scannerOn;
        updateScanner();
      }

      let left = player.offsetLeft;
      let top = player.offsetTop;

      if (e.key === "ArrowLeft") left -= moveStep;
      if (e.key === "ArrowRight") left += moveStep;
      if (e.key === "ArrowUp") top -= moveStep;
      if (e.key === "ArrowDown") top += moveStep;

      left = Math.max(0, Math.min(window.innerWidth - player.offsetWidth, left));
      top = Math.max(0, Math.min(window.innerHeight - player.offsetHeight, top));

      player.style.left = left + "px";
      player.style.top = top + "px";

      updateScanner();
    });
  </script>
</body>
</html>

Instructions:

...