ねこタワー / ゲームループ

ねこタワーの描画、入力、状態更新を継続的に回すための基本構造。p5.jsでゲームを作るときの中心になる考え方。

作成日: 2026-07-12 / 更新日: 2026-07-14

キーワード: p5.js / draw / update / render / input / state / collision / animation / frame / game state

概要

ゲームループは、ゲームの状態更新と描画を繰り返す仕組みです。ねこタワーでは、p5.js の draw がこの役割を持ちます。

ゲームは、画面を一度描いて終わりではありません。入力を受け取り、状態を更新し、画面を描画する処理を何度も繰り返します。

基本的な流れは次の通りです。

この流れを毎フレーム繰り返すことで、プレイヤーからはゲームが動いているように見えます。

ねこタワーのようなゲームでは、特に次の観点が重要になります。

ゲームループを整理すると、単に動くゲームから、読みやすく直しやすいゲームに近づきます。バグ修正、オンライン対戦、演出追加、難易度調整などをしやすくするためにも、状態更新と描画の責務を分けて考えることが重要です。

p5.jsでは draw に多くの処理を書き込みやすいですが、処理が増えると見通しが悪くなります。入力、状態更新、描画、通信を分けて整理すると、あとから改善しやすくなります。