画面90度回転

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

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

@@ -4,31 +4,48 @@
  * @private
  */
 javascript:(function(){
-    const container = document.getElementById('game-container');
     const canvas = document.getElementById('gameCanvas');
-    if(!container || !canvas) return;
+    if(!canvas) return alert('ゲーム画面が見つかりません');
 
-    /* 1. コンテナを全画面 FlexBox 化（これで絶対にど真ん中へ） */
-    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', overflow: 'hidden'
-    });
-    
-    /* 2. キャンバスのサイズと回転の設定 */
-    /* 画面の短い方の辺に合わせて、はみ出さない最大倍率を計算 */
-    const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width) * 0.95;
+    /* 1. 見た目だけを90度回転（比率を維持） */
+    /* rotate(90deg) だけだと画面からはみ出す場合があるため、
+       現在の親要素に収まるように自動スケール調整します */
+    const parent = canvas.parentElement;
+    const scale = Math.min(parent.clientWidth / canvas.height, parent.clientHeight / canvas.width);
     
     canvas.style.transformOrigin = 'center center';
     canvas.style.transform = `rotate(90deg) scale(${scale})`;
-    canvas.style.position = 'static'; /* Flexboxで制御するため */
+    canvas.style.transition = 'transform 0.3s ease'; /* 滑らかに回転 */
+
+    /* 2. 操作方向の補正（脳内変換不要モード） */
+    /* 画面が右に90度倒れているので、
+       見た目上の「右（実際は下）」を「データ上の右」に変換します */
+    if (typeof sendInput === 'function' && !window._inputHooked) {
+        window._inputHooked = true;
+        const _origSendInput = window.sendInput;
+        window.sendInput = function() {
+            const dx = inputState.dx;
+            const dy = inputState.dy;
 
-    /* 3. 名前と絵文字の「首折れ」防止フック（安全版） */
+            /* 90度回転時のベクトル変換式 */
+            /* 見た目の右(X+) -> データの下(Y+)
+               見た目の上(Y-) -> データの右(X+) */
+            inputState.dx = -dy; 
+            inputState.dy = dx;
+
+            _origSendInput.apply(this, arguments);
+
+            /* 他の描画ロジックに影響を与えないよう戻す */
+            inputState.dx = dx;
+            inputState.dy = dy;
+        };
+    }
+
+    /* 3. 名前と絵文字の水平維持（首折れ防止） */
     if (!window._originalFillText) {
         window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
         CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
-            /* プレイヤー名や絵文字の描画位置（中心付近）を狙い撃ち */
-            /* スコアの % やタイマーの : は除外 */
+            /* プレイヤー周辺のテキスト(translate後)のみ回転を打ち消す */
             if (Math.abs(x) < 40 && Math.abs(y) < 40 && !text.includes('%') && !text.includes(':')) {
                 this.save();
                 this.rotate(-Math.PI / 2);
@@ -40,24 +57,5 @@
         };
     }
 
-    /* 4. 操作方向の90度回転補正（右が下、上が右） */
-    if (typeof sendInput === 'function' && !window._inputHooked) {
-        window._inputHooked = true;
-        const _origSendInput = window.sendInput;
-        window.sendInput = function() {
-            const dx = inputState.dx;
-            const dy = inputState.dy;
-            inputState.dx = -dy;
-            inputState.dy = dx;
-            _origSendInput.apply(this, arguments);
-            inputState.dx = dx;
-            inputState.dy = dy;
-        };
-    }
-
-    /* 5. ゲーム側の強制リサイズ（resize関数）を無効化して暴走を止める */
-    window.removeEventListener('resize', window.resize);
-    
-    document.body.style.overflow = 'hidden';
-    alert('【究極・横画面パッチ】\n・ど真ん中配置完了！\n・名前の向きを水平に固定\n・スペースキーでブースト可能');
+    alert('【比率維持・横画面】適用しました！\n操作方向も画面に合わせて補正済みです。');
 })();

• /*
   * @title 画面90度回転
   * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
   * @private
   */
  javascript:(function(){
      const canvas = document.getElementById('gameCanvas');
      if(!canvas) return alert('ゲーム画面が見つかりません');
  
      /* 1. 見た目だけを90度回転（比率を維持） */
      /* rotate(90deg) だけだと画面からはみ出す場合があるため、
         現在の親要素に収まるように自動スケール調整します */
      const parent = canvas.parentElement;
      const scale = Math.min(parent.clientWidth / canvas.height, parent.clientHeight / canvas.width);
      
      canvas.style.transformOrigin = 'center center';
      canvas.style.transform = `rotate(90deg) scale(${scale})`;
      canvas.style.transition = 'transform 0.3s ease'; /* 滑らかに回転 */
  
      /* 2. 操作方向の補正（脳内変換不要モード） */
      /* 画面が右に90度倒れているので、
         見た目上の「右（実際は下）」を「データ上の右」に変換します */
      if (typeof sendInput === 'function' && !window._inputHooked) {
          window._inputHooked = true;
          const _origSendInput = window.sendInput;
          window.sendInput = function() {
              const dx = inputState.dx;
              const dy = inputState.dy;
  
              /* 90度回転時のベクトル変換式 */
              /* 見た目の右(X+) -> データの下(Y+)
                 見た目の上(Y-) -> データの右(X+) */
              inputState.dx = -dy; 
              inputState.dy = dx;
  
              _origSendInput.apply(this, arguments);
  
              /* 他の描画ロジックに影響を与えないよう戻す */
              inputState.dx = dx;
              inputState.dy = dy;
          };
      }
  
      /* 3. 名前と絵文字の水平維持（首折れ防止） */
      if (!window._originalFillText) {
          window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
          CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
              /* プレイヤー周辺のテキスト(translate後)のみ回転を打ち消す */
              if (Math.abs(x) < 40 && Math.abs(y) < 40 && !text.includes('%') && !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);
              }
          };
      }
  
      alert('【比率維持・横画面】適用しました！\n操作方向も画面に合わせて補正済みです。');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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