画面90度回転

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

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

@@ -8,36 +8,43 @@
     const canvas = document.getElementById('gameCanvas');
     if(!container || !canvas) return;
 
-    /* 1. 外枠（container）の「細い制限」を解除する */
-    /* これにより、中央の細いエリアからCanvasがはみ出せるようになります */
+    /* 1. 外枠（container）の制限を解除し、Canvasが動けるスペースを確保 */
     Object.assign(container.style, {
-        maxWidth: 'none',
-        maxHeight: 'none',
-        width: '100vw',
-        height: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'transparent' /* 背景はそのまま */
+        maxWidth: 'none', maxHeight: 'none',
+        width: '100vw', height: '100vh',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        position: 'fixed', top: '0', left: '0', zIndex: '9999', backgroundColor: '#000'
     });
 
-    /* 2. Canvasを回転させ、画面に収まる最大サイズにする */
-    /* 縦横比を維持したまま、タブレットの画面幅いっぱいに広げます */
+    /* 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. 操作補正は一切行わない */
-    /* 司令官の直感通り、あえて「何もしない」ことで、
-       タブレットを物理的に横持ちした際の入力をそのまま通します */
-    
-    /* 4. 名前と絵文字の「水平維持」だけは残しておきます（読みやすさのため） */
+    /* 3. 操作補正（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度倒した状態での操作補正 */
+            inputState.dx = -dy; 
+            inputState.dy = dx;
+            _origSendInput.apply(this, arguments);
+            inputState.dx = dx;
+            inputState.dy = dy;
+        };
+    }
+
+    /* 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('%')) {
+            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);
@@ -48,5 +55,8 @@
         };
     }
 
-    alert('【枠制限解除】を適用しました！\n操作補正は行っていません。タブレットを横向きにしてお試しください。');
+    /* 5. ゲーム側の強制リサイズイベントを停止して比率を守る */
+    window.removeEventListener('resize', window.resize);
+
+    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;
  
      /* 1. 外枠（container）の制限を解除し、Canvasが動けるスペースを確保 */
      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'
      });
  
      /* 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度回転対応版） */
      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;
              _origSendInput.apply(this, arguments);
              inputState.dx = dx;
              inputState.dy = dy;
          };
      }
  
      /* 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('%') && !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);
              }
          };
      }
  
      /* 5. ゲーム側の強制リサイズイベントを停止して比率を守る */
      window.removeEventListener('resize', window.resize);
  
      alert('【比率維持・限界拡大パッチ】\n・元の比率のまま最大まで大きくしました\n・名前の向きを水平に固定\n・操作方向を画面に同期');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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