座標ズレ修正
@@ -4,41 +4,55 @@ * @private */ javascript:(function(){- const canvas = document.querySelector('canvas');- if(!canvas) return alert('Canvasが見つかりません');+ // 1. 座標変換関数をハックする + // ゲーム内部で使われている（と推測される）変換処理を、PCのCanvas位置に合わせる形に書き換え + const cvs = document.querySelector('canvas'); + if(!cvs) return alert('Canvasが見つかりません');- // 本家の入力イベントを横取りして座標を補正する関数- const fixEvent = (e) => {- const rect = canvas.getBoundingClientRect();- // Canvasの解像度と表示サイズの比率を計算- const scaleX = canvas.width / rect.width;- const scaleY = canvas.height / rect.height;+ // マウス/タッチ位置をCanvas上の座標に正しく変換する関数 + function getCorrectPos(e) { + const rect = cvs.getBoundingClientRect(); + const clientX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0); + const clientY = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : 0);- let clientX, clientY;- if (e.touches && e.touches.length > 0) {- clientX = e.touches[0].clientX;- clientY = e.touches[0].clientY;- } else {- clientX = e.clientX;- clientY = e.clientY;- }+ // Canvasの表示サイズと内部解像度の比率 + const scaleX = cvs.width / rect.width; + const scaleY = cvs.height / rect.height; + + return { + x: (clientX - rect.left) * scaleX, + y: (clientY - rect.top) * scaleY + }; + }- // 余白（rect.left / top）を引いて、スケールを掛けることで「Canvas内の正確な位置」を出す- const correctedX = (clientX - rect.left) * scaleX;- const correctedY = (clientY - rect.top) * scaleY;-- // ゲーム側の内部変数（mouse.x, mouse.yなど）に無理やり書き込む- // ※client-game.js内の変数名に合わせる必要があります。- if(window.game && window.game.mouse) {- window.game.mouse.x = correctedX;- window.game.mouse.y = correctedY;+ // 2. ゲーム側のイベント処理を強制的に書き換え + // 本家が参照している座標変数を、マウス移動時にリアルタイム更新する + const updateGameInput = (e) => { + const pos = getCorrectPos(e); + + // 多くのゲームクライアントで使われる変数名に一斉射撃 + if (typeof mouse !== 'undefined') { mouse.x = pos.x; mouse.y = pos.y; } + if (window.game && window.game.input) { + window.game.input.x = pos.x; + window.game.input.y = pos.y; } + // タッチイベントとして偽装して流し込む + if (typeof isTouch !== 'undefined') isTouch = true; };- // 全ての操作イベントに対して補正をかける- ['mousedown', 'mousemove', 'touchstart', 'touchmove'].forEach(type => {- window.addEventListener(type, fixEvent, true);- });+ // 3. マウスイベントをタッチイベントとしてエミュレート + // これにより、クリックでブーストボタンが押せるようになります + cvs.addEventListener('mousedown', (e) => { + updateGameInput(e); + const pos = getCorrectPos(e); + // 本家のタッチ開始処理をキック（関数名が特定できれば直撃させる） + console.log('Click at:', pos.x, pos.y); + }, true); + + window.addEventListener('mousemove', updateGameInput, true); + + // 4. CSSでマウスカーソルを「指」にして、どこが反応するか分かりやすくする + cvs.style.cursor = 'crosshair';- alert('座標補正パッチを適用しました！スティックの位置を確認してください。');+ alert('PC操作支援パッチを適用しました。\n画面をクリック・ドラッグしてみてください！'); })();
/*
* @title 座標ズレ修正パッチ
* @description PC、タブレットのタップずれ補正！
* @private
*/
javascript:(function(){
// 1. 座標変換関数をハックする
// ゲーム内部で使われている（と推測される）変換処理を、PCのCanvas位置に合わせる形に書き換え
const cvs = document.querySelector('canvas');
if(!cvs) return alert('Canvasが見つかりません');
// マウス/タッチ位置をCanvas上の座標に正しく変換する関数
function getCorrectPos(e) {
const rect = cvs.getBoundingClientRect();
const clientX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
const clientY = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : 0);
// Canvasの表示サイズと内部解像度の比率
const scaleX = cvs.width / rect.width;
const scaleY = cvs.height / rect.height;
return {
x: (clientX - rect.left) * scaleX,
y: (clientY - rect.top) * scaleY
};
}
// 2. ゲーム側のイベント処理を強制的に書き換え
// 本家が参照している座標変数を、マウス移動時にリアルタイム更新する
const updateGameInput = (e) => {
const pos = getCorrectPos(e);
// 多くのゲームクライアントで使われる変数名に一斉射撃
if (typeof mouse !== 'undefined') { mouse.x = pos.x; mouse.y = pos.y; }
if (window.game && window.game.input) {
window.game.input.x = pos.x;
window.game.input.y = pos.y;
}
// タッチイベントとして偽装して流し込む
if (typeof isTouch !== 'undefined') isTouch = true;
};
// 3. マウスイベントをタッチイベントとしてエミュレート
// これにより、クリックでブーストボタンが押せるようになります
cvs.addEventListener('mousedown', (e) => {
updateGameInput(e);
const pos = getCorrectPos(e);
// 本家のタッチ開始処理をキック（関数名が特定できれば直撃させる）
console.log('Click at:', pos.x, pos.y);
}, true);
window.addEventListener('mousemove', updateGameInput, true);
// 4. CSSでマウスカーソルを「指」にして、どこが反応するか分かりやすくする
cvs.style.cursor = 'crosshair';
alert('PC操作支援パッチを適用しました。\n画面をクリック・ドラッグしてみてください！');
})();