画面90度回転

by cutfloss 4 hours ago [2026/05/07 21:37:28]

ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ

@@ -8,52 +8,70 @@
     const canvas = document.getElementById('gameCanvas');
     if(!container || !canvas) return alert('ゲーム画面が見つかりません');
 
-    /* --- 1. 表示エリアを画面いっぱいに広げる --- */
+    /* --- 1. 表示エリアの解放と比率維持 --- */
     Object.assign(container.style, {
         position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh',
-        zIndex: '9999', backgroundColor: '#000', maxWidth: 'none', maxHeight: 'none'
+        zIndex: '9999', backgroundColor: '#000', maxWidth: 'none', maxHeight: 'none',
+        display: 'flex', alignItems: 'center', justifyContent: 'center'
     });
     
-    /* 画面の縦横比に合わせて拡大率を自動計算 (横画面にするので縦幅に合わせる) */
-    const scale = window.innerWidth / canvas.height;
-    canvas.style.transform = `translate(-50%, -50%) rotate(90deg) scale(${scale})`;
-    Object.assign(canvas.style, {
-        position: 'absolute', top: '50%', left: '50%', transformOrigin: 'center center'
-    });
+    /* 縦横比を壊さず、画面に収まる最大サイズを計算 */
+    const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
+    canvas.style.transform = `rotate(90deg) scale(${scale})`;
+    canvas.style.transformOrigin = 'center center';
 
-    /* --- 2. 名前と絵文字を「水平」に保つフック --- */
-    /* CanvasのfillTextを上書きし、描画の瞬間だけ-90度回転させて打ち消す */
-    const originalFillText = CanvasRenderingContext2D.prototype.fillText;
-    CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
-        /* プレイヤーの名前や絵文字と思われる描画（特定座標でのテキスト）を狙い撃ち */
-        /* ゲームの描画ロジック上、translateで位置が決まった後に0,0付近で描画される性質を利用 */
-        if (Math.abs(x) < 50 && Math.abs(y) < 50 && !text.includes('%') && !text.includes(':')) {
-            this.save();
-            this.rotate(-Math.PI / 2); /* -90度回転して画面の回転を打ち消す */
-            /* 座標軸が変わるので x と y を入れ替えて調整 */
-            originalFillText.call(this, text, -y, x, maxWidth);
-            this.restore();
-        } else {
-            originalFillText.apply(this, arguments);
-        }
-    };
+    /* --- 2. 名前と絵文字の水平維持 --- */
+    if (!window._originalFillText) {
+        window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
+        CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
+            /* プレイヤー名や絵文字(translate後の0,0付近)のみ回転を打ち消す */
+            if (Math.abs(x) < 50 && Math.abs(y) < 50 && !text.includes('%')) {
+                this.save();
+                this.rotate(-Math.PI / 2);
+                window._originalFillText.call(this, text, -y, x, maxWidth);
+                this.restore();
+            } else {
+                window._originalFillText.apply(this, arguments);
+            }
+        };
+    }
+
+    /* --- 3. 操作・クリック判定の90度補正 --- */
+    if (typeof sendInput === 'function' && !window._rotateLogicActive) {
+        window._rotateLogicActive = true;
 
-    /* --- 3. 操作方向の90度回転補正 --- */
-    if (typeof sendInput === 'function' && !window._originalSendInput) {
-        window._originalSendInput = sendInput;
+        /* 入力ベクトルの回転 */
+        const originalSendInput = window.sendInput;
         window.sendInput = function() {
-            const oldDx = inputState.dx;
-            const oldDy = inputState.dy;
-            /* 画面が90度右に回っているので、入力ベクトルも同様に回す */
-            /* 右(oldDx)が下へ、上(oldDy)が右へ */
-            inputState.dx = -oldDy;
-            inputState.dy = oldDx;
-            window._originalSendInput.apply(this, arguments);
-            inputState.dx = oldDx;
-            inputState.dy = oldDy;
+            const dx = inputState.dx;
+            const dy = inputState.dy;
+            /* 物理的な「右」がデータの「下」、「上」がデータの「右」 */
+            inputState.dx = -dy;
+            inputState.dy = dx;
+            originalSendInput.apply(this, arguments);
+            inputState.dx = dx;
+            inputState.dy = dy;
+        };
+
+        /* タップ・クリック座標の変換 (ブーストボタン等のため) */
+        /* 本来の座標系を90度戻して計算させる */
+        const wrapEvent = (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const rawX = e.clientX || (e.touches && e.touches[0].clientX);
+            const rawY = e.clientY || (e.touches && e.touches[0].clientY);
+            /* 回転・拡大を考慮した逆変換は複雑なため、
+               マウスイベント時の isInBoostButtonArea 等をバイパスするか、
+               ボタン自体を画面に水平な別ボタンとして作るのが確実です。 */
         };
     }
 
+    /* スペースキーでのブーストを確実に効かせる */
+    window.addEventListener('keydown', e => {
+        if(e.code === 'Space') {
+            if(typeof triggerBoost === 'function') triggerBoost();
+        }
+    }, true);
+
     document.body.style.overflow = 'hidden';
-    alert('【真・横画面パッチ】適用完了！\n・全画面化\n・文字の向き補正\n・操作方向修正');
+    alert('【究極・横画面パッチ】適用完了！\n・比率維持モード\n・操作方向を画面に同期');
 })();

• /*
   * @title 画面90度回転
   * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
   * @private
   */
  javascript:(function(){
      const container = document.getElementById('game-container');
      const canvas = document.getElementById('gameCanvas');
      if(!container || !canvas) return alert('ゲーム画面が見つかりません');
  
      /* --- 1. 表示エリアの解放と比率維持 --- */
      Object.assign(container.style, {
          position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh',
          zIndex: '9999', backgroundColor: '#000', maxWidth: 'none', maxHeight: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
      });
      
      /* 縦横比を壊さず、画面に収まる最大サイズを計算 */
      const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
      canvas.style.transform = `rotate(90deg) scale(${scale})`;
      canvas.style.transformOrigin = 'center center';
  
      /* --- 2. 名前と絵文字の水平維持 --- */
      if (!window._originalFillText) {
          window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
          CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
              /* プレイヤー名や絵文字(translate後の0,0付近)のみ回転を打ち消す */
              if (Math.abs(x) < 50 && Math.abs(y) < 50 && !text.includes('%')) {
                  this.save();
                  this.rotate(-Math.PI / 2);
                  window._originalFillText.call(this, text, -y, x, maxWidth);
                  this.restore();
              } else {
                  window._originalFillText.apply(this, arguments);
              }
          };
      }
  
      /* --- 3. 操作・クリック判定の90度補正 --- */
      if (typeof sendInput === 'function' && !window._rotateLogicActive) {
          window._rotateLogicActive = true;
  
          /* 入力ベクトルの回転 */
          const originalSendInput = window.sendInput;
          window.sendInput = function() {
              const dx = inputState.dx;
              const dy = inputState.dy;
              /* 物理的な「右」がデータの「下」、「上」がデータの「右」 */
              inputState.dx = -dy;
              inputState.dy = dx;
              originalSendInput.apply(this, arguments);
              inputState.dx = dx;
              inputState.dy = dy;
          };
  
          /* タップ・クリック座標の変換 (ブーストボタン等のため) */
          /* 本来の座標系を90度戻して計算させる */
          const wrapEvent = (e) => {
              const rect = canvas.getBoundingClientRect();
              const rawX = e.clientX || (e.touches && e.touches[0].clientX);
              const rawY = e.clientY || (e.touches && e.touches[0].clientY);
              /* 回転・拡大を考慮した逆変換は複雑なため、
                 マウスイベント時の isInBoostButtonArea 等をバイパスするか、
                 ボタン自体を画面に水平な別ボタンとして作るのが確実です。 */
          };
      }
  
      /* スペースキーでのブーストを確実に効かせる */
      window.addEventListener('keydown', e => {
          if(e.code === 'Space') {
              if(typeof triggerBoost === 'function') triggerBoost();
          }
      }, true);
  
      document.body.style.overflow = 'hidden';
      alert('【究極・横画面パッチ】適用完了！\n・比率維持モード\n・操作方向を画面に同期');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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