画面90度回転
by
cutfloss
4 hours ago [2026/05/07 21:37:28]
ゲーム画面を90度回転させるぞ 配信とかでも見えやすくなるはずだっ
@@ -4,40 +4,41 @@
* @private
*/
javascript:(function(){
- const d=document, c=d.getElementById('game-container'), v=d.getElementById('gameCanvas');
- if(!c || !v) return;
+ 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.95;
- Object.assign(c.style, {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})`});
+ /* 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 adj = (id, st) => { const e=d.getElementById(id)||d.querySelector(id); if(e) Object.assign(e.style, {position:'absolute', transform:'rotate(-90deg)', transformOrigin:'center center', ...st}); };
+ /* 2. 各UIパーツを個別に「逆回転」させて正対化 */
+ const r=(id,st)=>a(d.getElementById(id)||d.querySelector(id), {position:'absolute',transform:'rotate(-90deg)',transformOrigin:'center',...st});
- adj('minimap', {width:'140px', height:'140px', bottom:'60px', left:'60px', zIndex:'10010'});
- adj('.score-panel', {top:'20px', right:'-30px', scale:'0.7'});
- adj('leaderboard', {top:'20px', right:'20px', scale:'0.8'});
-
- /* 3. モーダル類の一括正対化 */
- ['login-modal','result-modal','settings-modal','help-modal','history-modal'].forEach(id=>adj(id, {top:'50%', left:'50%', transform:'translate(-50%,-50%) rotate(-90deg)', width:'85vw', height:'85vh'}));
-
- /* 4. 操作方向の90度補正 */
- 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; };
+ /* ミニマップ・モード表示・スコアを一括補正 */
+ r('minimap', {width:'130px',height:'130px',bottom:'60px',left:'60px',zIndex:'10010'});
+ r('mode-display', {top:'50%',left:'20px',width:h+'px',transform:'translate(-50%,0) rotate(-90deg)'});
+ r('.score-panel', {top:'20px',right:'-30px',scale:'0.7'});
+ r('leaderboard', {top:'20px',right:'20px',scale:'0.8'});
+
+ /* 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度) */
+ 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)<40 && Math.abs(y)<40 && !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);
+ /* 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);
+ /* 画面下部(見た目)のタップでブースト */
+ v.addEventListener('mousedown',e=>{if(e.clientY>window.innerHeight*0.7)triggerBoost();},true);
}
-
window.removeEventListener('resize', window.resize);
d.body.style.backgroundColor='#000';
})();
/*
* @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});
/* ミニマップ・モード表示・スコアを一括補正 */
r('minimap', {width:'130px',height:'130px',bottom:'60px',left:'60px',zIndex:'10010'});
r('mode-display', {top:'50%',left:'20px',width:h+'px',transform:'translate(-50%,0) rotate(-90deg)'});
r('.score-panel', {top:'20px',right:'-30px',scale:'0.7'});
r('leaderboard', {top:'20px',right:'20px',scale:'0.8'});
/* 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度) */
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
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。