Spark Dodge — 落ちてくるブロックを避けるだけのゲーム

どんなゲームか

画面上から落ちてくる青いブロックを避け続けるだけのゲームです。生き残っている 時間がそのままスコアになり、時間が経つほどブロックの落下速度と出現頻度が 上がっていきます。途中でオレンジ色のスパークが落ちてくるので、それを拾うと 一気に120点入ります。

ルールはこれだけです。説明を読む必要がないことを目標にして作りました。 起動して3秒で何をすればいいか分かり、1分以内に1回のプレイが終わる。 その代わり、もう一回やりたくなる。そこだけを狙っています。

操作方法

操作	キーボード	タッチ / マウス
左右移動	← → または A D	画面をドラッグ
スタート / リトライ	Space Enter R	画面をタップ

キーボードとタッチのどちらでも遊べます。タッチ操作は「指の位置に自機が 吸い寄せられる」方式にしました。指で自機を直接つかむ方式にすると、 自分の指で自機が隠れて見えなくなるからです。少し離れた場所を触っても ついてくるようにしてあります。

スコアを伸ばすコツ

画面の端に逃げない。これが一番大事です。端に追い詰められると、 次にブロックが降ってきたときに逃げ場が片側しかなくなります。 中央付近を維持して、左右どちらにも逃げられる状態を保つほうが、 結果的に長く生き残れます。

スパークは無理に取りに行かない。120点はおよそ12秒分のスコアに相当します。 つまり、スパークを取りに行って死ぬくらいなら、取らずに12秒生き延びたほうが 得です。安全に取れる位置に落ちてきたときだけ拾ってください。

ブロックの「隙間」を先に見る。落ちてくるブロックそのものを見るのではなく、 ブロックとブロックの間の空いている場所を探して、そこへ向かうように意識すると 急に上手くなります。避けるゲームではなく、空いている場所へ移動するゲームだと 考え方を切り替えるのがコツです。

40秒を超えると落下速度がかなり上がります。ここから先は反応ではなく、 先読みで動かないと厳しくなってきます。

実装メモ

このゲームは外部ライブラリを一切使わず、HTML1ファイルだけで作っています。 描画は Canvas 2D、ループは requestAnimationFrame です。ファイルサイズは 圧縮前で約7KBなので、読み込みは一瞬で終わります。

作るうえで気をつけたのは、フレームレートに依存しない動きにすることです。 移動量を「1フレームあたり何ピクセル」ではなく「1秒あたり何ピクセル」で定義し、 毎フレームの経過時間を掛けています。これをしないと、144Hzのモニターでは 60Hzのモニターの2倍以上の速さでゲームが進んでしまい、まったく別のゲームに なってしまいます。

あわせて、経過時間には上限を設けています。タブを裏に回して戻ってきたときなど、 前のフレームからの経過時間が極端に大きくなることがあり、そのまま計算すると 自機やブロックが1フレームで画面を突き抜けて当たり判定をすり抜けます。 上限を設けておけば、単に「一瞬カクつく」だけで済みます。

当たり判定は軸並行の矩形同士の判定で、中心座標同士の距離を幅と高さの和と 比べるだけの形にしています。左上座標で計算するより式が短くなり、 読み返したときに何をしているか分かりやすくなります。

ハイスコアはブラウザのローカルストレージに保存しています。ただしプライベート ウィンドウなどでは保存領域にアクセスした時点で例外が出ることがあるため、 読み書きの両方を例外処理で囲んであります。保存できなくてもゲーム自体は 問題なく動きます。