Script de contrôle de manette et de curseur mobile

554 iroger7

Ouvrir dans l'éditeur Publiez votre code

Script de contrôle de manette et de curseur mobile

Recommandé

23 August 2025

Blog d'ingénierie : IA, cloud, cybersécurité et plus encore

25 July 2024

INSCRIPTION

17 May 2024

Galerie d'exposition des joueurs de football

HTML

<!DOCTYPE html>
<html>
    <head>
        <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@main/human-expenditure-program/">
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="user-scalable=no">
        <link rel="icon" href="icon/icon.png" type="image/png">
        <link rel="apple-touch-icon" href="icon/icon.png">
        <link rel="stylesheet" type="text/css" href="css/game.css">
        <title>HUMAN EXPENDITURE PROGRAM</title>
    </head>
    <body style="background-color: black">
        <script type="text/javascript" src="js/main.js"></script>
    </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.9.0/nipplejs.min.js"></script>
    <script>
        // full screen the game ----------------------------------------------------------
        function applycanvasmode() {
            let w = 0;
            let h = 0;
            let maxW = window.innerWidth;
            let maxH = window.innerHeight;
            if ((maxW * 0.75) > maxH) {
                h = maxH;
                w = Math.floor((maxH / 3) * 4);
            } else {
                w = maxW;
                h = Math.floor((maxW / 4) * 3);
            }
            try {
            document.querySelector("#gameCanvas").style.width = w + "px";
            document.querySelector("#gameCanvas").style.height = h + "px";
            document.querySelector("#gameVideo").style.width = w + "px";
            document.querySelector("#gameVideo").style.height = h + "px";
            document.querySelector("#mouseCanvas").style.width = w + "px";
            document.querySelector("#mouseCanvas").style.height = h + "px";
} catch(e) {}
        }
        setInterval(applycanvasmode, 100);

// support mobile ----------------------------------------------------------------

(function () {
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (!isMobile) return;

function dispatchCursorMove(x, y) {
        // element under cursor
        const el = document.elementFromPoint(Math.round(x), Math.round(y));

// if element changed -> fire mouseout on last, mouseover on new
        if (el !== lastHoverEl) {
            if (lastHoverEl) {
                lastHoverEl.dispatchEvent(new MouseEvent('mouseout', { bubbles: true, clientX: x, clientY: y }));
            }
            if (el) {
                el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, clientX: x, clientY: y }));
            }
            lastHoverEl = el;
        }

// always send mousemove to current element (so hover callbacks run)
        if (el) {
            el.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: x, clientY: y }));
        }
    }

function setupMobileControls() {
        // virtual cursor
        cursorEl = document.createElement("div");
        cursorEl.style = `
            position: fixed;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 18px;
            background: rgba(255,230,0,0.95);
            border-radius: 50%;
            z-index: 100000;
            pointer-events: none;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 6px rgba(0,0,0,0.6);
        `;
        document.body.appendChild(cursorEl);
        cursorEl.hidden = false;

// container for joystick + toggle so visual and hit areas align
        const controlsContainer = document.createElement("div");
        controlsContainer.style = "position: fixed; left: 5vw; bottom: 5vw; width: 25vw; height: 25vw; z-index: 9999;";
        document.body.appendChild(controlsContainer);

// joystick zone (fills container)
        let internal = document.createElement("div");
        internal.style = "position: absolute; left:0; top:0; width:100%; height:100%;";
        controlsContainer.appendChild(internal);

// static joystick positioned in the middle of the container
let joystick = nipplejs.create({
    mode: "static",
    zone: internal,
    color: "red",
    position: { left: "50%", top: "50%" },
    size: Math.min(window.innerWidth, window.innerHeight) * 0.2 // bigger joystick (was 0.12)
});

// Toggle button placed inside the same container above joystick (so hitbox matches)
        let toggleBtn = document.createElement("div");
        toggleBtn.style = `
            position: absolute;
            left: 0;
            bottom: calc(100% + 1vw); /* sits just above the container */
            width: 100%;
            height: 8vw;
            background: #444;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: sans-serif;
            font-size: 3vw;
            border-radius: 1vw;
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;
            z-index: 100000;
        `;
        toggleBtn.innerText = mode === "rpg" ? "RPG Mode" : "Cursor Mode";
        // use touchstart so it responds immediately on mobile
        toggleBtn.addEventListener("touchstart", function (e) {
            e.preventDefault();
            mode = mode === "rpg" ? "cursor" : "rpg";
            cursorEl.hidden = mode === "rpg";
            toggleBtn.innerText = mode === "rpg" ? "RPG Mode" : "Cursor Mode";
        }, { passive: false });
        controlsContainer.appendChild(toggleBtn);

// basic ENTER button (as before)
        const createButton = (text, key, bottom, right, bgColor) => {
            let button = document.createElement("div");
            button.style = `
                position: fixed;
                bottom: ${bottom};
                right: ${right};
                width: 10vw;
                height: 10vw;
                background: ${bgColor};
                color: white;
                touch-action: none;
                z-index: 999999;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: sans-serif;
                font-size: 3vw;
                border-radius: 50%;
            `;
            button.innerText = text;
            button.addEventListener("touchstart", e => {
                e.preventDefault();
                sendKeyEvent(key, "keydown");
            }, { passive: false });
            button.addEventListener("touchend", e => {
                e.preventDefault();
                sendKeyEvent(key, "keyup");
            }, { passive: false });
            document.body.appendChild(button);
        };
        createButton("ENTER", "ok", "20vw", "5vw", "#880f");
        createButton("ESC", "escape", "10vw", "5vw", "#880f");

// joystick handlers
        let cursorX = window.innerWidth / 2;
        let cursorY = window.innerHeight / 2;

// small helper to clamp
        const clamp = (v, a, b) => Math.max(a, Math.min(b, v));

joystick.on("move", function (evt, data) {
            if (!data) return;

// RPG mode: use direction strings but swap up/down (fixes the inverted orientation)
            if (mode === "rpg") {
                if (data.direction && data.direction.angle) {
                    // swap up/down because orientation was inverted for you
                    let dir = data.direction.angle;
                    if (dir === "up") dir = "down";
                    else if (dir === "down") dir = "up";
                    const dirs = ["up", "down", "left", "right"];
                    for (let o of dirs) {
                        if (o !== dir) sendKeyEvent(o, "keyup");
                        else sendKeyEvent(o, "keydown");
                    }
                }
                return;
            }

// cursor mode: move virtual cursor
            // prefer data.vector (gives x/y components) if present for more reliable movement
            const force = data.force || 0;
            const speed = Math.max(1, Math.min(force * 6, 9)); // slower movement

if (data.vector) {
                // NOTE: we invert Y here (subtract) to correct the up/down inversion you saw
                cursorX += (data.vector.x || 0) * speed;
                cursorY -= (data.vector.y || 0) * speed;
            } else if (data.angle && typeof data.angle.radian === "number") {
                const angle = data.angle.radian;
                cursorX += Math.cos(angle) * speed;
                cursorY -= Math.sin(angle) * speed; // subtract to make up = up
            }

cursorX = clamp(cursorX, 0, window.innerWidth);
            cursorY = clamp(cursorY, 0, window.innerHeight);

cursorEl.style.left = cursorX + "px";
            cursorEl.style.top = cursorY + "px";

// dispatch hover/mousemove to element under the virtual cursor
            dispatchCursorMove(cursorX, cursorY);
        });

joystick.on("end", function () {
            if (mode === "rpg") {
                const dirs = ["up", "down", "left", "right"];
                for (let o of dirs) sendKeyEvent(o, "keyup");
            }
        });
    }

if (document.readyState === "complete" || document.readyState === "interactive") {
        setupMobileControls();
    } else {
        document.addEventListener("DOMContentLoaded", setupMobileControls);
    }
})();
</script>

</html>

CSS