座標ズレ修正

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

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

@@ -5,60 +5,41 @@
  */
 javascript:(function(){
     const cvs = document.querySelector('canvas');
-    const joyBase = document.getElementById('virtual-joystick-base');
-    if(!cvs || !joyBase) return alert('必要な要素が見つかりません');
+    if(!cvs) return;
 
-    /* 1. 座標変換の極意：ブラウザ上の生座標を「Canvas内の座標」に変換 */
-    const getCanvasPos = (e) => {
+    /* 座標変換：余白を消し、解像度倍率を合わせる */
+    const getFixPos = (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);
+        const cx = e.clientX || (e.touches ? e.touches[0].clientX : 0);
+        const cy = 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
+            x: (cx - r.left) * (cvs.width / r.width),
+            y: (cy - r.top) * (cvs.height / r.height),
+            rawX: cx,
+            rawY: cy
         };
     };
 
-    /* 2. 入力イベントをまるごと上書き（フック） */
-    const handlePCInput = (e) => {
-        const pos = getCanvasPos(e);
-
-        /* A. ブースト判定 (これでボタンが押せる) */
-        if(typeof isInBoostButtonArea === 'function' && isInBoostButtonArea(pos.x, pos.y)) {
-            if(e.type === 'mousedown') triggerBoost();
-            return; 
+    /* イベント発火時にゲームの内部関数を「正しい座標」で叩く */
+    const inject = (e) => {
+        const p = getFixPos(e);
+        
+        /* 1. ブースト判定へ直接送る */
+        if(typeof isInBoostButtonArea === 'function' && isInBoostButtonArea(p.x, p.y)) {
+            if(e.type === 'mousedown' || e.type === 'touchstart') triggerBoost();
+            return;
         }
 
-        /* B. スティックの表示位置を修正 (ここが今回追加した重要ポイント) */
-        if(e.type === 'mousedown') {
-            window.isGameReady = true; // 念のため
-            window.touchStartPos = { x: pos.rawX, y: pos.rawY };
+        /* 2. 移動入力の基準点(touchStartPos)を強制補正 */
+        if(e.type === 'mousedown' || e.type === 'touchstart') {
+            window.touchStartPos = { x: p.rawX, y: p.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);
+    /* 既存の処理より先に割り込む（true設定） */
+    window.addEventListener('mousedown', inject, true);
+    window.addEventListener('touchstart', inject, {passive: false, capture: true});
 
-    alert('【修正完了】ブーストOK ＆ スティック位置補正を適用しました！');
+    console.log('座標補正パッチ：稼働中（軽量モード）');
 })();

• /*
   * @title 座標ズレ修正パッチ
   * @description PC、タブレットのタップずれ補正！
   * @private
   */
  javascript:(function(){
      const cvs = document.querySelector('canvas');
      if(!cvs) return;
  
      /* 座標変換：余白を消し、解像度倍率を合わせる */
      const getFixPos = (e) => {
          const r = cvs.getBoundingClientRect();
          const cx = e.clientX || (e.touches ? e.touches[0].clientX : 0);
          const cy = e.clientY || (e.touches ? e.touches[0].clientY : 0);
          return {
              x: (cx - r.left) * (cvs.width / r.width),
              y: (cy - r.top) * (cvs.height / r.height),
              rawX: cx,
              rawY: cy
          };
      };
  
      /* イベント発火時にゲームの内部関数を「正しい座標」で叩く */
      const inject = (e) => {
          const p = getFixPos(e);
          
          /* 1. ブースト判定へ直接送る */
          if(typeof isInBoostButtonArea === 'function' && isInBoostButtonArea(p.x, p.y)) {
              if(e.type === 'mousedown' || e.type === 'touchstart') triggerBoost();
              return;
          }
  
          /* 2. 移動入力の基準点(touchStartPos)を強制補正 */
          if(e.type === 'mousedown' || e.type === 'touchstart') {
              window.touchStartPos = { x: p.rawX, y: p.rawY };
              window.inputState.drawing = true;
          }
      };
  
      /* 既存の処理より先に割り込む（true設定） */
      window.addEventListener('mousedown', inject, true);
      window.addEventListener('touchstart', inject, {passive: false, capture: true});
  
      console.log('座標補正パッチ：稼働中（軽量モード）');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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