解像度による違い
世の中のディスプレイはスマホまで含めると様々な解像度があります。ゲーム画面のCanvasサイズは固定値(640×480)を指定しているため、解像度の違うディスプレイでは見え方が変わってしまいます。
解像度に合わせてゲーム画面も変動するようにします。
2つのサイズ
Canvasのサイズは表示サイズと描画サイズが存在します。表示サイズは表示されるサイズで描画サイズはCanvaに描画する時のサイズです。
表示サイズの指定はCSSや次のようにstype属性で指定します。描画サイズはcanvasタグ内(width,height)で指定します。
上記の例だと表示サイズは768×576ですが、描画サイズは640×480です。従って描画する際には横幅最大が640、縦が480になります。
対応方法
既にゲームロジックは作成済みなので描画サイズを変えるのは大変な作業になります。そこで描画サイズはそのままで表示サイズを解像度に合わせて変更します。
