キャッチ・ザ・ボックス(Catch the Box)について
「キャッチ・ザ・ボックス」は、上空から降ってくる各種アイテムを画面下のキャッチャー(プレイヤーボックス)を操作してキャッチする、直感型キャッチングWebアクションゲームです。アイテムの性質を見極め、プラスアイテムを獲得しながら障害物爆弾を回避して高得点を目指します。
詳しい操作方法とルール
操作方法
- マウス操作: 画面上でマウスカーソルを左右に移動させるとキャッチャーが追従します。
- キーボード操作: 「← / → 矢印キー」でキャッチャーを左右へスムーズに操作できます。
- タッチ操作: スマートフォンの画面上を左右スワイプ操作して移動します。
アイテムとスコアの仕組み
- ノーマルボックス(青/緑): +10点。確実にゲットしましょう。
- スターアイテム(黄): +50点!落下スピードが速い高得点アイテム。
- デンジャー爆弾(黒/赤): ライフが1減少!見送るか回避してください。
ハイスコア攻略のためのコツ
- 画面上部の出現ラインに目線を配る: キャッチャーの手元ばかり見ていると、上から落ちてくるアイテムの移動軌跡を見失います。画面上部に視点を置きましょう。
- 危険アイテムは迷わず見送る: プラスアイテムを取るよりも「爆弾を避けて生き残る」ことがスコア倍率を伸ばす絶対条件です。
AIペアプログラミング開発エピソード&プロンプト
落下速度の異なる複数オブジェクトの非同期生成配列管理と、キャッチャーとアイテムの矩形交差判定(AABB Collision Detection)を最適化しました。
【使用した開発プロンプトの例】
「HTML5 CanvasとJavaScriptで落ち物キャッチアクションゲームを作成してください。
要件:
1. items配列にx, y, speed, type(score/star/bomb)属性を持たせて管理
2. requestAnimationFrame内で落下アニメーションとプレイヤーとの矩形交差判定を処理
3. マウス・キーボード・タッチイベントを共通の px 座標制御に一本化するレスポンシブコード」
おすすめの他のブラウザゲーム