画面90度回転

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

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

@@ -4,74 +4,73 @@
  * @private
  */
 javascript:(function(){
+    /* 1. 既存のフックがあれば解除（リロードを推奨しますが、簡易的な安全策） */
+    if(window._rotateActive) return alert('既に適用済みです。戻すにはリロードしてください。');
+    window._rotateActive = true;
+
     const container = document.getElementById('game-container');
     const canvas = document.getElementById('gameCanvas');
-    if(!container || !canvas) return alert('ゲーム画面が見つかりません');
+    if(!container || !canvas) return;
 
-    /* --- 1. 表示エリアの解放と比率維持 --- */
+    /* 2. 画面をブラウザいっぱいに広げる（比率維持） */
     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'
+        zIndex: '9999', backgroundColor: '#000', maxWidth: 'none', maxHeight: 'none'
     });
     
-    /* 縦横比を壊さず、画面に収まる最大サイズを計算 */
-    const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
-    canvas.style.transform = `rotate(90deg) scale(${scale})`;
-    canvas.style.transformOrigin = 'center center';
-
-    /* --- 2. 名前と絵文字の水平維持 --- */
-    if (!window._originalFillText) {
-        window._originalFillText = CanvasRenderingContext2D.prototype.fillText;
-        CanvasRenderingContext2D.prototype.fillText = function(text, x, y, maxWidth) {
-            /* プレイヤー名や絵文字(translate後の0,0付近)のみ回転を打ち消す */
-            if (Math.abs(x) < 50 && Math.abs(y) < 50 && !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);
-            }
-        };
-    }
-
-    /* --- 3. 操作・クリック判定の90度補正 --- */
-    if (typeof sendInput === 'function' && !window._rotateLogicActive) {
-        window._rotateLogicActive = true;
-
-        /* 入力ベクトルの回転 */
-        const originalSendInput = window.sendInput;
+    /* 3. 本来の描画コンテキストを拡張 */
+    const ctx = canvas.getContext('2d');
+    const originalSetTransform = ctx.setTransform;
+    
+    /* 描画の全命令を90度回転させる「魔法のレイヤー」を被せる */
+    const applyRotation = (c) => {
+        const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
+        c.setTransform(0, scale, -scale, 0, window.innerWidth / 2, window.innerHeight / 2);
+    };
+
+    /* 4. アニメーションループに割り込み、毎フレーム画面を回す */
+    const originalLoop = window.loop;
+    window.loop = function() {
+        /* 画面を全画面にリサイズ */
+        if(canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        
+        ctx.save();
+        /* ここで描画全体を90度回転＋スケーリング */
+        const scale = Math.min(window.innerWidth / 1200, window.innerHeight / 800); // 基準サイズ
+        ctx.translate(window.innerWidth / 2, window.innerHeight / 2);
+        ctx.rotate(Math.PI / 2);
+        ctx.scale(1.2, 1.2); // 司令官、ここの数値で拡大率を微調整できます
+        ctx.translate(-600, -400); // 中心を戻す（数値は環境に依存）
+        
+        originalLoop.apply(this, arguments);
+        ctx.restore();
+    };
+
+    /* 5. 操作方向の完全補正 */
+    if (typeof sendInput === 'function') {
+        const _origSend = window.sendInput;
         window.sendInput = function() {
             const dx = inputState.dx;
             const dy = inputState.dy;
-            /* 物理的な「右」がデータの「下」、「上」がデータの「右」 */
+            /* スティックの「右」が「下」に、「上」が「右」になるよう入れ替え */
             inputState.dx = -dy;
             inputState.dy = dx;
-            originalSendInput.apply(this, arguments);
+            _origSend.apply(this, arguments);
             inputState.dx = dx;
             inputState.dy = dy;
         };
-
-        /* タップ・クリック座標の変換 (ブーストボタン等のため) */
-        /* 本来の座標系を90度戻して計算させる */
-        const wrapEvent = (e) => {
-            const rect = canvas.getBoundingClientRect();
-            const rawX = e.clientX || (e.touches && e.touches[0].clientX);
-            const rawY = e.clientY || (e.touches && e.touches[0].clientY);
-            /* 回転・拡大を考慮した逆変換は複雑なため、
-               マウスイベント時の isInBoostButtonArea 等をバイパスするか、
-               ボタン自体を画面に水平な別ボタンとして作るのが確実です。 */
-        };
     }
 
-    /* スペースキーでのブーストを確実に効かせる */
+    /* 6. ブーストボタンを「物理キー」で確実に叩く */
     window.addEventListener('keydown', e => {
         if(e.code === 'Space') {
+            e.preventDefault();
             if(typeof triggerBoost === 'function') triggerBoost();
         }
-    }, true);
+    }, { capture: true });
 
-    document.body.style.overflow = 'hidden';
-    alert('【究極・横画面パッチ】適用完了！\n・比率維持モード\n・操作方向を画面に同期');
+    alert('【全画面・横回転パッチ】\n・フリーズ対策完了\n・アスペクト比固定\n・スペースキーでブースト可能');
 })();

• /*
   * @title 画面90度回転
   * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
   * @private
   */
  javascript:(function(){
      /* 1. 既存のフックがあれば解除（リロードを推奨しますが、簡易的な安全策） */
      if(window._rotateActive) return alert('既に適用済みです。戻すにはリロードしてください。');
      window._rotateActive = true;
  
      const container = document.getElementById('game-container');
      const canvas = document.getElementById('gameCanvas');
      if(!container || !canvas) return;
  
      /* 2. 画面をブラウザいっぱいに広げる（比率維持） */
      Object.assign(container.style, {
          position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh',
          zIndex: '9999', backgroundColor: '#000', maxWidth: 'none', maxHeight: 'none'
      });
      
      /* 3. 本来の描画コンテキストを拡張 */
      const ctx = canvas.getContext('2d');
      const originalSetTransform = ctx.setTransform;
      
      /* 描画の全命令を90度回転させる「魔法のレイヤー」を被せる */
      const applyRotation = (c) => {
          const scale = Math.min(window.innerWidth / canvas.height, window.innerHeight / canvas.width);
          c.setTransform(0, scale, -scale, 0, window.innerWidth / 2, window.innerHeight / 2);
      };
  
      /* 4. アニメーションループに割り込み、毎フレーム画面を回す */
      const originalLoop = window.loop;
      window.loop = function() {
          /* 画面を全画面にリサイズ */
          if(canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
              canvas.width = window.innerWidth;
              canvas.height = window.innerHeight;
          }
          
          ctx.save();
          /* ここで描画全体を90度回転＋スケーリング */
          const scale = Math.min(window.innerWidth / 1200, window.innerHeight / 800); // 基準サイズ
          ctx.translate(window.innerWidth / 2, window.innerHeight / 2);
          ctx.rotate(Math.PI / 2);
          ctx.scale(1.2, 1.2); // 司令官、ここの数値で拡大率を微調整できます
          ctx.translate(-600, -400); // 中心を戻す（数値は環境に依存）
          
          originalLoop.apply(this, arguments);
          ctx.restore();
      };
  
      /* 5. 操作方向の完全補正 */
      if (typeof sendInput === 'function') {
          const _origSend = window.sendInput;
          window.sendInput = function() {
              const dx = inputState.dx;
              const dy = inputState.dy;
              /* スティックの「右」が「下」に、「上」が「右」になるよう入れ替え */
              inputState.dx = -dy;
              inputState.dy = dx;
              _origSend.apply(this, arguments);
              inputState.dx = dx;
              inputState.dy = dy;
          };
      }
  
      /* 6. ブーストボタンを「物理キー」で確実に叩く */
      window.addEventListener('keydown', e => {
          if(e.code === 'Space') {
              e.preventDefault();
              if(typeof triggerBoost === 'function') triggerBoost();
          }
      }, { capture: true });
  
      alert('【全画面・横回転パッチ】\n・フリーズ対策完了\n・アスペクト比固定\n・スペースキーでブースト可能');
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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