座標ズレ修正

by cutfloss 04/29 [2026/04/29 22:21:36]

PC、タブレットのタップずれ補正し、ブーストボタンを押せるようになる

@@ -5,39 +5,60 @@
  */
 javascript:(function(){
     const cvs = document.querySelector('canvas');
-    if(!cvs) return alert('Canvasが見つかりません');
+    const joyBase = document.getElementById('virtual-joystick-base');
+    if(!cvs || !joyBase) return alert('必要な要素が見つかりません');
 
-    // Canvasの表示位置とサイズを取得
-    const rect = cvs.getBoundingClientRect();
-    
-    // オリジナルのイベントリスナーを無効化するのは難しいので、
-    // マウス座標を常に「Canvas相対」に補正するラッパーを強制注入します。
-    const originalAddEventListener = window.EventTarget.prototype.addEventListener;
-    
-    // 今後登録される、または既に動いている座標取得に割り込み
-    const wrapX = (rawX) => {
+    /* 1. 座標変換の極意：ブラウザ上の生座標を「Canvas内の座標」に変換 */
+    const getCanvasPos = (e) => {
         const r = cvs.getBoundingClientRect();
-        // 表示上の位置を差し引き、解像度比率を掛ける
-        return (rawX - r.left) * (cvs.width / r.width);
+        const clientX = e.clientX || (e.touches ? e.touches[0].clientX : 0);
+        const clientY = e.clientY || (e.touches ? e.touches[0].clientY : 0);
+        return {
+            x: (clientX - r.left) * (cvs.width / r.width),
+            y: (clientY - r.top) * (cvs.height / r.height),
+            rawX: clientX,
+            rawY: clientY
+        };
     };
-    const wrapY = (rawY) => {
-        const r = cvs.getBoundingClientRect();
-        return (rawY - r.top) * (cvs.height / r.height);
+
+    /* 2. 入力イベントをまるごと上書き（フック） */
+    const handlePCInput = (e) => {
+        const pos = getCanvasPos(e);
+
+        /* A. ブースト判定 (これでボタンが押せる) */
+        if(typeof isInBoostButtonArea === 'function' && isInBoostButtonArea(pos.x, pos.y)) {
+            if(e.type === 'mousedown') triggerBoost();
+            return; 
+        }
+
+        /* B. スティックの表示位置を修正 (ここが今回追加した重要ポイント) */
+        if(e.type === 'mousedown') {
+            window.isGameReady = true; // 念のため
+            window.touchStartPos = { x: pos.rawX, y: pos.rawY };
+            window.inputState.drawing = true;
+
+            joyBase.style.display = 'block';
+            /* マウス位置（pos.rawX）にそのまま合わせる。余白の計算はブラウザがやってくれる */
+            joyBase.style.left = (pos.rawX - 60) + 'px';
+            joyBase.style.top = (pos.rawY - 60) + 'px';
+            
+            if(typeof sendInput === 'function') sendInput();
+        }
     };
 
-    // 【PC・タブレット用】 強制座標修正パッチ
-    // 直接内部の handleStart 等を叩けないため、イベントの座標を偽装します
-    window.addEventListener('mousedown', (e) => {
-        const r = cvs.getBoundingClientRect();
-        // 座標を補正
-        const correctedX = e.clientX - r.left;
-        const correctedY = e.clientY - r.top;
-        
-        // ここでゲーム側の判定関数に、補正した座標を直接送り込む
-        if(typeof isInBoostButtonArea === 'function' && isInBoostButtonArea(correctedX, correctedY)) {
-            if(typeof triggerBoost === 'function') triggerBoost();
+    /* ゲームのイベントリスナーより先に実行させる */
+    window.addEventListener('mousedown', handlePCInput, true);
+    
+    /* 3. マウス移動時のスティック追従も修正 */
+    window.addEventListener('mousemove', (e) => {
+        if (window.touchStartPos) {
+            const deltaX = e.clientX - window.touchStartPos.x;
+            const deltaY = e.clientY - window.touchStartPos.y;
+            window.inputState.dx = deltaX;
+            window.inputState.dy = deltaY;
+            if(typeof handleMove === 'function') handleMove(e.clientX, e.clientY);
         }
     }, true);
 
-    alert('座標ズレ補正パッチを適用しました！\nスティックが指（マウス）の真下に出るか確認してください。');
+    alert('【修正完了】ブーストOK ＆ スティック位置補正を適用しました！');
 })();

/*
 * @title 座標ズレ修正パッチ
 * @description PC、タブレットのタップずれ補正！
 * @private
 */
javascript:(function(){
    const cvs = document.querySelector('canvas');
    const joyBase = document.getElementById('virtual-joystick-base');
    if(!cvs || !joyBase) return alert('必要な要素が見つかりません');

    /* 1. 座標変換の極意：ブラウザ上の生座標を「Canvas内の座標」に変換 */
    const getCanvasPos = (e) => {
        const r = cvs.getBoundingClientRect();
        const clientX = e.clientX || (e.touches ? e.touches[0].clientX : 0);
        const clientY = e.clientY || (e.touches ? e.touches[0].clientY : 0);
        return {
            x: (clientX - r.left) * (cvs.width / r.width),
            y: (clientY - r.top) * (cvs.height / r.height),
            rawX: clientX,
            rawY: clientY
        };
    };

    /* 2. 入力イベントをまるごと上書き（フック） */
    const handlePCInput = (e) => {
        const pos = getCanvasPos(e);

        /* A. ブースト判定 (これでボタンが押せる) */
        if(typeof isInBoostButtonArea === 'function' && isInBoostButtonArea(pos.x, pos.y)) {
            if(e.type === 'mousedown') triggerBoost();
            return; 
        }

        /* B. スティックの表示位置を修正 (ここが今回追加した重要ポイント) */
        if(e.type === 'mousedown') {
            window.isGameReady = true; // 念のため
            window.touchStartPos = { x: pos.rawX, y: pos.rawY };
            window.inputState.drawing = true;

            joyBase.style.display = 'block';
            /* マウス位置（pos.rawX）にそのまま合わせる。余白の計算はブラウザがやってくれる */
            joyBase.style.left = (pos.rawX - 60) + 'px';
            joyBase.style.top = (pos.rawY - 60) + 'px';
            
            if(typeof sendInput === 'function') sendInput();
        }
    };

    /* ゲームのイベントリスナーより先に実行させる */
    window.addEventListener('mousedown', handlePCInput, true);
    
    /* 3. マウス移動時のスティック追従も修正 */
    window.addEventListener('mousemove', (e) => {
        if (window.touchStartPos) {
            const deltaX = e.clientX - window.touchStartPos.x;
            const deltaY = e.clientY - window.touchStartPos.y;
            window.inputState.dx = deltaX;
            window.inputState.dy = deltaY;
            if(typeof handleMove === 'function') handleMove(e.clientX, e.clientY);
        }
    }, true);

    alert('【修正完了】ブーストOK ＆ スティック位置補正を適用しました！');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

このページへの個別リンクです。

RAW

書かれたコードへの直接のリンクです。

Packed

文字列が圧縮された書かれたコードへのリンクです。

Userscript

Greasemonkey 等で利用する場合の .user.js へのリンクです。

Loader

@require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

Metadata

コード中にコメントで @xxx と書かれたメタデータの JSON です。

座標ズレ修正

History