画面90度回転

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

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

@@ -7,35 +7,32 @@
     const d=document, g=d.getElementById('game-container'), v=d.getElementById('gameCanvas'), a=(e,s)=>e&&Object.assign(e.style,s);
     if(!g||!v)return;
 
-    /* 1. 枠の回転と配置 */
+    /* 1. 枠の回転配置 */
     const w=v.width, h=v.height, s=Math.min(window.innerWidth/h, window.innerHeight/w)*0.96;
     a(g, {position:'fixed',top:'50%',left:'50%',width:w+'px',height:h+'px',maxWidth:'none',maxHeight:'none',zIndex:'9999',transform:`translate(-50%,-50%) rotate(90deg) scale(${s})`});
 
-    /* 2. UIを「右上」に正対させて配置 (逆回転 -90deg) */
+    /* 2. UI逆回転・再配置 */
     const r=(id,st)=>a(d.getElementById(id)||d.querySelector(id), {position:'absolute',transform:'rotate(-90deg)',transformOrigin:'center',...st});
     
-    /* ミニマップ：サイズ調整して右上に */
-    r('minimap', {width:'130px',height:'130px',top:'80px',right:'80px',bottom:'auto',left:'auto',zIndex:'10010'});
-
-    /* スコアパネル・参加人数・面積などを右上にまとめる */
-    const sp=d.querySelector('.score-panel');
-    if(sp){
-        r('.score-panel', {top:'50px',right:'-50px',width:'auto',scale:'0.8',bottom:'auto',left:'auto'});
-        /* パネル内の文字が重ならないよう調整 */
-        sp.style.display='flex'; sp.style.flexDirection='column';
-    }
+    /* ミニマップ・スコア類を見た目上の右上に集約 */
+    /* 司令官の仰る通り、座標を左上(top/left)へ寄せることで右上へ移動させます */
+    r('minimap', {width:'130px',height:'130px',top:'20px',left:'20px',bottom:'auto',zIndex:'10010'});
+    r('.score-panel', {top:'20px',left:'160px',right:'auto',scale:'0.7',display:'flex',flexDirection:'column'});
+    r('leaderboard', {top:'20px',left:'280px',right:'auto',scale:'0.8'});
     
-    /* 3. モード表示やモーダル */
-    r('mode-display', {top:'50%',left:'20px',width:h+'px',transform:'translate(-50%,0) rotate(-90deg)'});
+    /* モード表示を画面上部中央へ */
+    r('mode-display', {top:'50%',left:'15px',width:h+'px',transform:'translate(-50%,0) rotate(-90deg)'});
+
+    /* 3. モーダル類 */
     ['login-modal','result-modal','settings-modal','help-modal'].forEach(id=>r(id,{top:'50%',left:'50%',transform:'translate(-50%,-50%) rotate(-90deg)',width:'85vw',height:'85vh'}));
 
-    /* 4. 操作補正(90度) */
+    /* 4. 操作補正 */
     if(typeof sendInput==='function'&&!window._inH){
         window._inH=1; const o=window.sendInput;
         window.sendInput=()=>{const x=inputState.dx,y=inputState.dy; inputState.dx=y; inputState.dy=-x; o(); inputState.dx=x; inputState.dy=y;};
     }
 
-    /* 5. プレイヤー名の水平維持とブースト判定 */
+    /* 5. 名前水平維持 + 画面下タップでブースト */
     if(!window._fT){
         window._fT=CanvasRenderingContext2D.prototype.fillText;
         CanvasRenderingContext2D.prototype.fillText=function(t,x,y,m){

• /*
   * @title 画面90度回転
   * @description ゲーム画面を90度回転させるぞ　配信とかでも見えやすくなるはずだっ
   * @private
   */
  javascript:(function(){
      const d=document, g=d.getElementById('game-container'), v=d.getElementById('gameCanvas'), a=(e,s)=>e&&Object.assign(e.style,s);
      if(!g||!v)return;
  
      /* 1. 枠の回転配置 */
      const w=v.width, h=v.height, s=Math.min(window.innerWidth/h, window.innerHeight/w)*0.96;
      a(g, {position:'fixed',top:'50%',left:'50%',width:w+'px',height:h+'px',maxWidth:'none',maxHeight:'none',zIndex:'9999',transform:`translate(-50%,-50%) rotate(90deg) scale(${s})`});
  
      /* 2. UI逆回転・再配置 */
      const r=(id,st)=>a(d.getElementById(id)||d.querySelector(id), {position:'absolute',transform:'rotate(-90deg)',transformOrigin:'center',...st});
      
      /* ミニマップ・スコア類を見た目上の右上に集約 */
      /* 司令官の仰る通り、座標を左上(top/left)へ寄せることで右上へ移動させます */
      r('minimap', {width:'130px',height:'130px',top:'20px',left:'20px',bottom:'auto',zIndex:'10010'});
      r('.score-panel', {top:'20px',left:'160px',right:'auto',scale:'0.7',display:'flex',flexDirection:'column'});
      r('leaderboard', {top:'20px',left:'280px',right:'auto',scale:'0.8'});
      
      /* モード表示を画面上部中央へ */
      r('mode-display', {top:'50%',left:'15px',width:h+'px',transform:'translate(-50%,0) rotate(-90deg)'});
  
      /* 3. モーダル類 */
      ['login-modal','result-modal','settings-modal','help-modal'].forEach(id=>r(id,{top:'50%',left:'50%',transform:'translate(-50%,-50%) rotate(-90deg)',width:'85vw',height:'85vh'}));
  
      /* 4. 操作補正 */
      if(typeof sendInput==='function'&&!window._inH){
          window._inH=1; const o=window.sendInput;
          window.sendInput=()=>{const x=inputState.dx,y=inputState.dy; inputState.dx=y; inputState.dy=-x; o(); inputState.dx=x; inputState.dy=y;};
      }
  
      /* 5. 名前水平維持 + 画面下タップでブースト */
      if(!window._fT){
          window._fT=CanvasRenderingContext2D.prototype.fillText;
          CanvasRenderingContext2D.prototype.fillText=function(t,x,y,m){
              if(Math.abs(x)<45&&Math.abs(y)<45&&!t.includes('%')){this.save();this.rotate(-Math.PI/2);window._fT.call(this,t,-y,x,m);this.restore();}
              else window._fT.apply(this,arguments);
          };
          v.addEventListener('mousedown',e=>{if(e.clientY>window.innerHeight*0.7)triggerBoost();},true);
      }
      window.removeEventListener('resize', window.resize);
      d.body.style.backgroundColor='#000';
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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