← ポータルに戻る 📝ソース・プロンプトを見る

キャッチ・ザ・ボックス!

スコア: 0
❤️❤️❤️

準備はいいですか?

青い箱をキャッチしてスコアを稼ごう!
3回逃すとゲームオーバーです。

操作方法: マウスを動かして赤い自機を操作してください。

キャッチ・ザ・ボックス(Catch the Box)について

「キャッチ・ザ・ボックス」は、上空から降ってくる各種アイテムを画面下のキャッチャー(プレイヤーボックス)を操作してキャッチする、直感型キャッチングWebアクションゲームです。アイテムの性質を見極め、プラスアイテムを獲得しながら障害物爆弾を回避して高得点を目指します。

詳しい操作方法とルール

操作方法

アイテムとスコアの仕組み

ハイスコア攻略のためのコツ

AIペアプログラミング開発エピソード&プロンプト

落下速度の異なる複数オブジェクトの非同期生成配列管理と、キャッチャーとアイテムの矩形交差判定(AABB Collision Detection)を最適化しました。

【使用した開発プロンプトの例】 「HTML5 CanvasとJavaScriptで落ち物キャッチアクションゲームを作成してください。 要件: 1. items配列にx, y, speed, type(score/star/bomb)属性を持たせて管理 2. requestAnimationFrame内で落下アニメーションとプレイヤーとの矩形交差判定を処理 3. マウス・キーボード・タッチイベントを共通の px 座標制御に一本化するレスポンシブコード」

おすすめの他のブラウザゲーム

🧱 ブロック崩し

ボールを打ち返して壁を破壊するネオン物理アクション!

🐦 フラッピーバード

タップ操作で隙間を飛び越えるスリリングゲーム!

モグラ叩きパズル

素早い反射神経で画面上のモグラを叩こう!

🧩 CYBER 2048

数字をスライドして合体させる頭脳パズル!