Thin Moving Crosshair

moving cross hair

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Thin Moving Crosshair
// @match        *://*.shellshock.io/*
// @grant        none
// @description moving cross hair
// @version 0.0.1.20251120194352
// @namespace https://greasyfork.org/users/1357667
// ==/UserScript==

(function () {
    function waitForElement(id) {
        return new Promise(resolve => {
            const check = setInterval(() => {
                const el = document.getElementById(id);
                if (el) {
                    clearInterval(check);
                    resolve(el);
                }
            }, 100);
        });
    }

    waitForElement("crosshairContainer").then(container => {
        console.log("Crosshair container found!");

        
        const ch = document.createElement("div");
        ch.id = "thinCrosshair";
        Object.assign(ch.style, {
            position: "absolute",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            pointerEvents: "none",
            zIndex: 1
        });

        const vert = document.createElement("div");
        Object.assign(vert.style, {
            position: "absolute",
            width: "1.2px",
            height: "24px",
            background: "#ffffff",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)"
        });

        const horiz = document.createElement("div");
        Object.assign(horiz.style, {
            position: "absolute",
            width: "24px",
            height: "1.2px",
            background: "#ffffff",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)"
        });

        ch.appendChild(vert);
        ch.appendChild(horiz);
        container.appendChild(ch);

        
        let offsetX = 0, offsetY = 0;
        const strength = 0.28;  // how much it moves
        const smoothing = 0.15; // reduce jitter

        document.addEventListener("mousemove", e => {
            
            if (document.pointerLockElement == null) return;

            offsetX += e.movementX * strength;
            offsetY += e.movementY * strength;
        });

        function animate() {
  
            offsetX *= (1 - smoothing);
            offsetY *= (1 - smoothing);

            ch.style.transform =
                `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`;

            requestAnimationFrame(animate);
        }
        animate();
    });
})();