ブラウザゲームの基本

HTML は構造、CSS は表示、JavaScript は操作を担います。カード・クイズ・メニューは HTML/CSS、スプライトや粒子は Canvas 2D、3D や高度な描画は WebGL が適しています。目的を満たすシンプルな方法を選びます。

アニメーションには requestAnimationFrame と経過時間を使います。

game-loop.js


let previousTime;
 
function frame(time) {
  const delta = previousTime === undefined
    ? 0
    : Math.min((time - previousTime) / 1000, 0.05);
 
  previousTime = time;
  update(delta);
  draw();
  requestAnimationFrame(frame);
}
 
requestAnimationFrame(frame);

update と draw はゲーム側で実装します。上限はバックグラウンドから復帰した際の大きな変化を抑えますが、完全な時間管理モデルではありません。

タッチしやすい大きさ、必要なキーボード操作、ホバーに依存しない重要操作を用意します。縦横表示を早めに試し、最初のシーンを優先読込、画像圧縮、意図ある音声と読込表示を整えます。次は構成です。