更新:2026年10月22日。旧記事の「静止時は描画停止」「CPU・GPU負荷80%以上削減」は、現行コードと比較測定記録で裏付けられないため取り下げました。

現在の描画は毎フレーム更新

main.jsの末尾ではrequestAnimationFrame(loop)でrenderer.updateを呼びます。game-renderer.jsの更新処理はタイルの移動、出現、合体、粒子、カメラの演出を更新し、最後にrenderer.renderを呼びます。静止したら描画ループを止める構成ではありません。

このコードから分かるのは呼び出しの構造です。実際の電池消費や発熱は端末、ブラウザ、画面サイズ、フレームレートで変わります。特定の削減率や「熱くならない」という結果までは説明できません。

負荷が気になる場合の確認方法

  1. 同じ端末・ブラウザ・盤面サイズで比較します。
  2. タイルが静止する時間と、カメラ回転や合体演出が続く時間を分けて記録します。
  3. ブラウザのPerformance記録で描画回数とフレーム時間を確認します。
  4. 電力の改善を述べるときは、実際の測定条件と記録を併記します。

今後描画を停止する仕組みを入れるなら、タイマー、カメラ操作、粒子、リプレイで再描画が必要になる条件も扱う必要があります。ループを止めるだけでは、演出や表示の更新が止まるためです。

終了後に、同じ局面で練習する

本編の終了画面から、角固定と空きマスの確保を練習する教材へ進めます。自分の負けた盤面を自動診断した結果ではなく、ルールを確認するために用意した固定局面です。

最大タイルを角に残す例では、X+とX−のどちらも1組合体しますが、512の残る位置が変わります。空きマスの確保では、2組の合体と1個の新規出現を差し引いて考えます。

教材の操作は記録やランキングへ送信せず、自己ベストや設定も変更しません。仕組みを確認したら、時間制限なしのCLASSICで試せます。

実装の参照先:画面と描画ループ、3D描画、局面教材。