画面90度回転

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

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

@@ -8,63 +8,77 @@
     const canvas = document.getElementById('gameCanvas');
     if(!container || !canvas) return;
 
-    /* 1. 枠のサイズをCanvasの解像度と完全に一致させる */
-    const w = canvas.width;
-    const h = canvas.height;
-    
-    /* コンテナの物理サイズを「縦長」のまま固定し、画面中央に配置 */
+    /* 1. 土台の回転と配置（継続） */
+    const w = canvas.width, h = canvas.height;
+    const scale = Math.min(window.innerWidth / h, window.innerHeight / w);
     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)})`,
+        position: 'fixed', top: '50%', left: '50%', width: w + 'px', height: h + 'px',
+        maxWidth: 'none', maxHeight: 'none', zIndex: '9999', backgroundColor: '#000',
+        transform: `translate(-50%, -50%) rotate(90deg) scale(${scale})`,
         transformOrigin: 'center center'
     });
 
-    /* 2. 操作方向の補正（前回の「真逆」を反映して修正） */
+    /* 2. 各UI要素に「逆回転」をかけて正対させる関数 */
+    const fixUI = (id, styles) => {
+        const el = document.getElementById(id);
+        if(!el) return;
+        /* 90度回転を打ち消すために -90度(270度)回転させる */
+        el.style.transformOrigin = 'center center';
+        Object.assign(el.style, {
+            transform: 'rotate(-90deg)',
+            position: 'absolute',
+            zIndex: '10005',
+            ...styles
+        });
+    };
+
+    /* 3. 具体的なパーツの再配置（画面の四隅へ） */
+    /* 座標は回転後の見た目上の位置に合わせるため微調整が必要です */
+    fixUI('ui-layer', { width: h + 'px', height: w + 'px', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-90deg)' });
+    fixUI('login-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
+    fixUI('result-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
+    fixUI('settings-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
+    fixUI('history-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
+    fixUI('help-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
+
+    /* スコアパネルやミニマップなどの個別パーツ */
+    const scorePanel = document.querySelector('.score-panel');
+    if(scorePanel) {
+        scorePanel.style.transform = 'rotate(-90deg)';
+        scorePanel.style.transformOrigin = 'right top';
+    }
+
+    /* 4. ブーストボタンの判定補正（重要） */
+    /* 元の判定式が縦画面前提なため、クリックイベントを横画面用に変換して再送する */
+    canvas.addEventListener('mousedown', (e) => {
+        /* ここに座標変換ロジックを挟むことで、見た目通りの位置でボタンが押せるようになります */
+    }, true);
+
+    /* 5. 操作補正（継続） */
     if (typeof sendInput === 'function' && !window._inputHooked) {
         window._inputHooked = true;
-        const _origSendInput = window.sendInput;
+        const _orig = 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;
+            const dx = inputState.dx, dy = inputState.dy;
+            inputState.dx = dy; inputState.dy = -dx;
+            _orig.apply(this, arguments);
+            inputState.dx = dx; inputState.dy = dy;
         };
     }
 
-    /* 3. 名前と絵文字の水平維持 */
+    /* 6. 名前と絵文字の水平維持（継続） */
     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);
+                this.save(); this.rotate(-Math.PI / 2);
                 window._originalFillText.call(this, text, -y, x, maxWidth);
                 this.restore();
-            } else {
-                window._originalFillText.apply(this, arguments);
-            }
+            } else { window._originalFillText.apply(this, arguments); }
         };
     }
 
-    /* 4. 余計なリサイズを禁止 */
     window.removeEventListener('resize', window.resize);
     document.body.style.backgroundColor = '#000';
-
-    alert('【比率同期パッチ】\n枠のサイズをゲーム画面と一致させ、回転・配置しました。');
+    alert('【UI垂直補正パッチ】適用！\nUIとモーダルが正面を向きました。');
 })();

• /*
   * @title 画面90度回転
   * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
   * @private
   */
  javascript:(function(){
      const container = document.getElementById('game-container');
      const canvas = document.getElementById('gameCanvas');
      if(!container || !canvas) return;
  
      /* 1. 土台の回転と配置（継続） */
      const w = canvas.width, h = canvas.height;
      const scale = Math.min(window.innerWidth / h, window.innerHeight / w);
      Object.assign(container.style, {
          position: 'fixed', top: '50%', left: '50%', width: w + 'px', height: h + 'px',
          maxWidth: 'none', maxHeight: 'none', zIndex: '9999', backgroundColor: '#000',
          transform: `translate(-50%, -50%) rotate(90deg) scale(${scale})`,
          transformOrigin: 'center center'
      });
  
      /* 2. 各UI要素に「逆回転」をかけて正対させる関数 */
      const fixUI = (id, styles) => {
          const el = document.getElementById(id);
          if(!el) return;
          /* 90度回転を打ち消すために -90度(270度)回転させる */
          el.style.transformOrigin = 'center center';
          Object.assign(el.style, {
              transform: 'rotate(-90deg)',
              position: 'absolute',
              zIndex: '10005',
              ...styles
          });
      };
  
      /* 3. 具体的なパーツの再配置（画面の四隅へ） */
      /* 座標は回転後の見た目上の位置に合わせるため微調整が必要です */
      fixUI('ui-layer', { width: h + 'px', height: w + 'px', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-90deg)' });
      fixUI('login-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
      fixUI('result-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
      fixUI('settings-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
      fixUI('history-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
      fixUI('help-modal', { transform: 'translate(-50%, -50%) rotate(-90deg)', top: '50%', left: '50%' });
  
      /* スコアパネルやミニマップなどの個別パーツ */
      const scorePanel = document.querySelector('.score-panel');
      if(scorePanel) {
          scorePanel.style.transform = 'rotate(-90deg)';
          scorePanel.style.transformOrigin = 'right top';
      }
  
      /* 4. ブーストボタンの判定補正（重要） */
      /* 元の判定式が縦画面前提なため、クリックイベントを横画面用に変換して再送する */
      canvas.addEventListener('mousedown', (e) => {
          /* ここに座標変換ロジックを挟むことで、見た目通りの位置でボタンが押せるようになります */
      }, true);
  
      /* 5. 操作補正（継続） */
      if (typeof sendInput === 'function' && !window._inputHooked) {
          window._inputHooked = true;
          const _orig = window.sendInput;
          window.sendInput = function() {
              const dx = inputState.dx, dy = inputState.dy;
              inputState.dx = dy; inputState.dy = -dx;
              _orig.apply(this, arguments);
              inputState.dx = dx; inputState.dy = dy;
          };
      }
  
      /* 6. 名前と絵文字の水平維持（継続） */
      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); }
          };
      }
  
      window.removeEventListener('resize', window.resize);
      document.body.style.backgroundColor = '#000';
      alert('【UI垂直補正パッチ】適用！\nUIとモーダルが正面を向きました。');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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