画面90度回転

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

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

@@ -4,49 +4,40 @@
  * @private
  */
 javascript:(function(){
+    const container = document.getElementById('game-container');
     const canvas = document.getElementById('gameCanvas');
-    if(!canvas) return alert('ゲーム画面が見つかりません');
+    if(!container || !canvas) return;
 
-    /* 1. 見た目だけを90度回転（比率を維持） */
-    /* rotate(90deg) だけだと画面からはみ出す場合があるため、
-       現在の親要素に収まるように自動スケール調整します */
-    const parent = canvas.parentElement;
-    const scale = Math.min(parent.clientWidth / canvas.height, parent.clientHeight / canvas.width);
+    /* 1. 外枠（container）の「細い制限」を解除する */
+    /* これにより、中央の細いエリアからCanvasがはみ出せるようになります */
+    Object.assign(container.style, {
+        maxWidth: 'none',
+        maxHeight: 'none',
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'transparent' /* 背景はそのまま */
+    });
+
+    /* 2. Canvasを回転させ、画面に収まる最大サイズにする */
+    /* 縦横比を維持したまま、タブレットの画面幅いっぱいに広げます */
+    const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
     
     canvas.style.transformOrigin = 'center center';
     canvas.style.transform = `rotate(90deg) scale(${scale})`;
-    canvas.style.transition = 'transform 0.3s ease'; /* 滑らかに回転 */
+    canvas.style.position = 'absolute';
 
-    /* 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. 名前と絵文字の水平維持（首折れ防止） */
+    /* 3. 操作補正は一切行わない */
+    /* 司令官の直感通り、あえて「何もしない」ことで、
+       タブレットを物理的に横持ちした際の入力をそのまま通します */
+    
+    /* 4. 名前と絵文字の「水平維持」だけは残しておきます（読みやすさのため） */
     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(':')) {
+            if (Math.abs(x) < 40 && Math.abs(y) < 40 && !text.includes('%')) {
                 this.save();
                 this.rotate(-Math.PI / 2);
                 window._originalFillText.call(this, text, -y, x, maxWidth);
@@ -57,5 +48,5 @@
         };
     }
 
-    alert('【比率維持・横画面】適用しました！\n操作方向も画面に合わせて補正済みです。');
+    alert('【枠制限解除】を適用しました！\n操作補正は行っていません。タブレットを横向きにしてお試しください。');
 })();

• /*
   * @title 画面90度回転
   * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
   * @private
   */
  javascript:(function(){
      const container = document.getElementById('game-container');
      const canvas = document.getElementById('gameCanvas');
      if(!container || !canvas) return;
  
      /* 1. 外枠（container）の「細い制限」を解除する */
      /* これにより、中央の細いエリアからCanvasがはみ出せるようになります */
      Object.assign(container.style, {
          maxWidth: 'none',
          maxHeight: 'none',
          width: '100vw',
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'transparent' /* 背景はそのまま */
      });
  
      /* 2. Canvasを回転させ、画面に収まる最大サイズにする */
      /* 縦横比を維持したまま、タブレットの画面幅いっぱいに広げます */
      const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
      
      canvas.style.transformOrigin = 'center center';
      canvas.style.transform = `rotate(90deg) scale(${scale})`;
      canvas.style.position = 'absolute';
  
      /* 3. 操作補正は一切行わない */
      /* 司令官の直感通り、あえて「何もしない」ことで、
         タブレットを物理的に横持ちした際の入力をそのまま通します */
      
      /* 4. 名前と絵文字の「水平維持」だけは残しておきます（読みやすさのため） */
      if (!window._originalFillText) {
          window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
          CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
              if (Math.abs(x) < 40 && Math.abs(y) < 40 && !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 です。