画面90度回転

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

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

@@ -8,39 +8,46 @@
     const canvas = document.getElementById('gameCanvas');
     if(!container || !canvas) return;
 
-    /* 1. 外枠（container）の制限を解除し、Canvasが動けるスペースを確保 */
+    /* 1. 枠のサイズをCanvasの解像度と完全に一致させる */
+    const w = canvas.width;
+    const h = canvas.height;
+    
+    /* コンテナの物理サイズを「縦長」のまま固定し、画面中央に配置 */
     Object.assign(container.style, {
-        maxWidth: 'none', maxHeight: 'none',
-        width: '100vw', height: '100vh',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        position: 'fixed', top: '0', left: '0', zIndex: '9999', backgroundColor: '#000'
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        width: w + 'px',
+        height: h + 'px',
+        maxWidth: 'none',
+        maxHeight: 'none',
+        zIndex: '9999',
+        backgroundColor: '#000',
+        /* 枠ごと90度回転させ、画面に収まるように縮小 */
+        transform: `translate(-50%, -50%) rotate(90deg) scale(${Math.min(window.innerWidth / h, window.innerHeight / w)})`,
+        transformOrigin: 'center center'
     });
 
-    /* 2. 比率を維持したまま、画面に収まる限界の拡大率を計算 */
-    /* 横倒しにするため、「ブラウザの横幅/Canvasの高さ」と「ブラウザの高さ/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. 操作補正（90度回転対応版） */
+    /* 2. 操作方向の補正（前回の「真逆」を反映して修正） */
     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度倒した状態での操作補正 */
-            inputState.dx = -dy; 
-            inputState.dy = dx;
+
+            /* 司令官の環境で「真逆」だったのを180度反転させて補正 */
+            inputState.dx = dy; 
+            inputState.dy = -dx;
+
             _origSendInput.apply(this, arguments);
+
             inputState.dx = dx;
             inputState.dy = dy;
         };
     }
 
-    /* 4. プレイヤー名などの水平維持フック */
+    /* 3. 名前と絵文字の水平維持 */
     if (!window._originalFillText) {
         window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
         CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
@@ -55,8 +62,9 @@
         };
     }
 
-    /* 5. ゲーム側の強制リサイズイベントを停止して比率を守る */
+    /* 4. 余計なリサイズを禁止 */
     window.removeEventListener('resize', window.resize);
+    document.body.style.backgroundColor = '#000';
 
-    alert('【比率維持・限界拡大パッチ】\n・元の比率のまま最大まで大きくしました\n・名前の向きを水平に固定\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. 枠のサイズをCanvasの解像度と完全に一致させる */
      const w = canvas.width;
      const h = canvas.height;
      
      /* コンテナの物理サイズを「縦長」のまま固定し、画面中央に配置 */
      Object.assign(container.style, {
          position: 'fixed',
          top: '50%',
          left: '50%',
          width: w + 'px',
          height: h + 'px',
          maxWidth: 'none',
          maxHeight: 'none',
          zIndex: '9999',
          backgroundColor: '#000',
          /* 枠ごと90度回転させ、画面に収まるように縮小 */
          transform: `translate(-50%, -50%) rotate(90deg) scale(${Math.min(window.innerWidth / h, window.innerHeight / w)})`,
          transformOrigin: 'center center'
      });
  
      /* 2. 操作方向の補正（前回の「真逆」を反映して修正） */
      if (typeof sendInput === 'function' && !window._inputHooked) {
          window._inputHooked = true;
          const _origSendInput = window.sendInput;
          window.sendInput = function() {
              const dx = inputState.dx;
              const dy = inputState.dy;
  
              /* 司令官の環境で「真逆」だったのを180度反転させて補正 */
              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) {
              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);
              }
          };
      }
  
      /* 4. 余計なリサイズを禁止 */
      window.removeEventListener('resize', window.resize);
      document.body.style.backgroundColor = '#000';
  
      alert('【比率同期パッチ】\n枠のサイズをゲーム画面と一致させ、回転・配置しました。');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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