Game Panel New

Draggable panel with FPS and crosshair
换行
// ==UserScript==
// @name         Game Panel New
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Draggable panel with FPS and crosshair
// @author       You
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==


(function () {
  'use strict';

  let visible = true;
  let crosshairOn = false;
  let fpsOn = false;
  let cleanerOn = false;
  let unlagOn = false;
  let cleanerInterval = null;

  // ===== PANEL =====
  const panel = document.createElement("div");
  Object.assign(panel.style, {
    position: "fixed",
    top: "20px",
    left: "20px",
    background: "#111",
    color: "#0f0",
    padding: "12px",
    borderRadius: "10px",
    zIndex: "99999",
    fontFamily: "monospace",
    cursor: "grab"
  });

  panel.innerHTML = `
    <b>Game Panel</b><br><br>
    <button id="crosshairBtn">Crosshair OFF</button><br>
    <button id="fpsBtn">FPS OFF</button><br>
    <button id="cleanBtn">Cleaner OFF</button><br>
    <button id="unlagBtn">Unlag OFF</button><br><br>
    <button id="hideBtn">Hide Panel</button>
  `;

  document.body.appendChild(panel);

  // ===== DRAGGABLE =====
  let isDragging = false;
  let offsetX = 0;
  let offsetY = 0;

  panel.addEventListener("mousedown", (e) => {
    isDragging = true;

    offsetX = e.clientX - panel.offsetLeft;
    offsetY = e.clientY - panel.offsetTop;

    panel.style.cursor = "grabbing";
  });

  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;

    panel.style.left = (e.clientX - offsetX) + "px";
    panel.style.top = (e.clientY - offsetY) + "px";
  });

  document.addEventListener("mouseup", () => {
    isDragging = false;
    panel.style.cursor = "grab";
  });

  // ===== DOT CROSSHAIR =====
  const crosshair = document.createElement("div");
  Object.assign(crosshair.style, {
    position: "fixed",
    top: "50%",
    left: "50%",
    width: "8px",
    height: "8px",
    background: "#ff0000",
    borderRadius: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: "99998",
    display: "none",
    pointerEvents: "none"
  });

  document.body.appendChild(crosshair);

  // ===== FPS =====
  const fpsBox = document.createElement("div");

  Object.assign(fpsBox.style, {
    position: "fixed",
    bottom: "10px",
    left: "10px",
    color: "#0f0",
    fontFamily: "monospace",
    zIndex: "99999",
    display: "none"
  });

  document.body.appendChild(fpsBox);

  let lastTime = performance.now();

  function fpsLoop() {
    const now = performance.now();
    const fps = Math.round(1000 / (now - lastTime));
    lastTime = now;

    if (fpsOn) fpsBox.textContent = "FPS: " + fps;

    requestAnimationFrame(fpsLoop);
  }

  fpsLoop();

  // ===== CLEANER =====
  function runCleaner() {
    document.querySelectorAll("iframe, img").forEach(el => {
      el.style.display = "none";
    });
  }

  // ===== UNLAG =====
  function enableUnlag() {
    const style = document.createElement("style");

    style.id = "unlag-style";

    style.innerHTML = `
      * {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
      }
    `;

    document.head.appendChild(style);
  }

  function disableUnlag() {
    const style = document.getElementById("unlag-style");

    if (style) style.remove();
  }

  // ===== BUTTONS =====
  document.getElementById("crosshairBtn").onclick = (e) => {
    crosshairOn = !crosshairOn;

    crosshair.style.display = crosshairOn ? "block" : "none";

    e.target.textContent =
      crosshairOn ? "Crosshair ON" : "Crosshair OFF";
  };

  document.getElementById("fpsBtn").onclick = (e) => {
    fpsOn = !fpsOn;

    fpsBox.style.display = fpsOn ? "block" : "none";

    e.target.textContent =
      fpsOn ? "FPS ON" : "FPS OFF";
  };

  document.getElementById("cleanBtn").onclick = (e) => {
    cleanerOn = !cleanerOn;

    if (cleanerOn) {
      runCleaner();
      cleanerInterval = setInterval(runCleaner, 2000);
    } else {
      clearInterval(cleanerInterval);

      document.querySelectorAll("iframe, img").forEach(el => {
        el.style.display = "";
      });
    }

    e.target.textContent =
      cleanerOn ? "Cleaner ON" : "Cleaner OFF";
  };

  document.getElementById("unlagBtn").onclick = (e) => {
    unlagOn = !unlagOn;

    unlagOn ? enableUnlag() : disableUnlag();

    e.target.textContent =
      unlagOn ? "Unlag ON" : "Unlag OFF";
  };

  document.getElementById("hideBtn").onclick = () => {
    visible = false;
    panel.style.display = "none";
  };

  // ===== KEYS =====
  document.addEventListener("keydown", (e) => {

    if (e.key === "Tab") {
      e.preventDefault();
      visible = false;
      panel.style.display = "none";
    }

    if (e.key === "Escape") {
      visible = true;
      panel.style.display = "block";
    }

  });

})();