画面90度回転

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

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

@@ -3,42 +3,57 @@
  * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
  * @private
  */
-
-
 javascript:(function(){
     const container = document.getElementById('game-container');
-    const canvas = document.querySelector('canvas');
+    const canvas = document.getElementById('gameCanvas');
     if(!container || !canvas) return alert('ゲーム画面が見つかりません');
 
-    /* 1. ゲーム画面を90度回転させる（CSS） */
-    /* 画面を横倒しにして、左右の余白を埋めるように拡大 */
-    canvas.style.transform = 'rotate(90deg) scale(1.7)'; /* 倍率は画面に合わせて調整 */
-    canvas.style.transformOrigin = 'center center';
+    /* --- 1. 表示エリアを画面いっぱいに広げる --- */
+    Object.assign(container.style, {
+        position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh',
+        zIndex: '9999', backgroundColor: '#000', maxWidth: 'none', maxHeight: 'none'
+    });
     
-    /* 2. 操作の向きを90度補正するハック */
-    /* sendInputを上書きして、角度を90度（255段階で約64）ずらす */
+    /* 画面の縦横比に合わせて拡大率を自動計算 (横画面にするので縦幅に合わせる) */
+    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'
+    });
+
+    /* --- 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);
+        }
+    };
+
+    /* --- 3. 操作方向の90度回転補正 --- */
     if (typeof sendInput === 'function' && !window._originalSendInput) {
         window._originalSendInput = sendInput;
         window.sendInput = function() {
-            /* 入力角度を計算する直前に dx/dy を入れ替える */
             const oldDx = inputState.dx;
             const oldDy = inputState.dy;
-            
-            /* 横倒し(90度)に合わせてベクトルを回転 */
+            /* 画面が90度右に回っているので、入力ベクトルも同様に回す */
+            /* 右(oldDx)が下へ、上(oldDy)が右へ */
             inputState.dx = -oldDy;
             inputState.dy = oldDx;
-            
-            _originalSendInput.apply(this, arguments);
-            
-            /* 元に戻さないと次のフレームの計算が狂うので復元 */
+            window._originalSendInput.apply(this, arguments);
             inputState.dx = oldDx;
             inputState.dy = oldDy;
         };
     }
 
-    /* 3. 背景や余白を黒で埋めて没入感を高める */
     document.body.style.overflow = 'hidden';
-    container.style.backgroundColor = '#000';
-
-    alert('【画面回転パッチ】適用しました！\nゲーム画面が横向きになり、操作も補正されています。');
+    alert('【真・横画面パッチ】適用完了！\n・全画面化\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'
      });
      
      /* 画面の縦横比に合わせて拡大率を自動計算 (横画面にするので縦幅に合わせる) */
      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'
      });
  
      /* --- 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);
          }
      };
  
      /* --- 3. 操作方向の90度回転補正 --- */
      if (typeof sendInput === 'function' && !window._originalSendInput) {
          window._originalSendInput = 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;
          };
      }
  
      document.body.style.overflow = 'hidden';
      alert('【真・横画面パッチ】適用完了！\n・全画面化\n・文字の向き補正\n・操作方向修正');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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