JavaScript、Canvasサイズ管理

一般的な方法①（おすすめ）

仮想解像度方式

ゲーム業界ではこれが一番多いです。

例えば

const GAME_W = 420;
const GAME_H = 720;

を決めます。

ゲーム内部は常に

x = 210
y = 360

のような固定座標で動きます。

描画時だけ

scale = Math.min(
    canvas.width  / GAME_W,
    canvas.height / GAME_H
);

を計算。

描画前に

ctx.save();

ctx.scale(scale, scale);

します。

すると

ball.x = 210;
ball.y = 360;

のままで

• iPhone
• Android
• iPad
• PC

全部表示できます。

一般的な方法②

初めから割合管理

ball.x = 0.5;
ball.y = 0.8;

みたいな方式。

描画時

drawX = ball.x * CW;
drawY = ball.y * CH;

これは

• UI
• HUD
• ボタン

には向いています

しかし

衝突判定
物理演算

には向いていません。

ピンボールではあまり使われません。

後から固定値を関数で置き直す