【親子×生成AI ゲーム開発】こども向け 釣りゲーム

釣りゲームを作りました。

こども(小学2年生)と、生成AIを使ってゲームを作った。

子供は要件をわたし(父)につたえるだけ!

わたし(父)は、生成AIに開発要望を具体的に伝えて、会話しながらデバッグするだけ!

未来に来た気分。すごい世界がおとずれました。(いまさらやっと気づいた)

Ver 6.0

エサの高さ再調整機能(巻き上げストップ)の搭載

最新アップデート

  • 「まきとり中」の再停止機能: 一度深く糸を垂らした後、「あ、通り過ぎちゃった!もうちょっと上で止めたい!」と思った時にいつでも調整できるよう、巻き上げている途中でボタンを押すとその深さでピタッと針を止められる機能を新規実装。
  • より快適なピンポイント狙い: レア魚が泳いでいる深さに合わせて微調整ができるようになり、本物のプロの釣り師のような駆け引きが楽しめるように。
  • ボタン表示の親切化: 巻き上げが始まると、ボタンが自動的に「ここで止める!」という文字に切り替わり、子供が視覚的に次のアクションを理解しやすく改善。
Ver 5.0

カウントダウン時のガタつき防止&見切れ対策

  • タイマーマスの横幅と高さの完全固定: 残り10秒で数字が大きくピコピコ動く際、文字の肥大化でマスの幅があふれて改行され、下のゲーム画面全体がズレてボタンが指から逃げていたバグを修正。マスの高さを絶対固定にして改行を完全防止。
  • 操作ボタンの見切れ防止(高さ数値の固定): 外部の余白設定(Margin/Padding)が干渉して最下部の「いとをたらす!」ボタンが外枠からはみ出して見切れていた問題を、CSSの高さを数値(44px)でがっちり固定して解決。
  • タイムアップモーダルの初期非表示化: ゲームが新しく始まった時にタイムアップの白いポップアップが最初から通せんぼする現象を、画面読み込み直後に「display: none」を強制実行することで徹底排除。
Ver 4.0

幽霊ループのデベロッパー強制終了&誤作動ロック

  • ゲームループの完全終了(cancelAnimationFrame): ステージ選択画面に戻った後も、裏で以前のゲーム描画タイマーが動き続け、新しいゲームが始まった瞬間に数値を破壊してタイムアップさせていたバグを修正。一意のループIDを割り振って息の根を止める処理を追加。
  • 初回ロード完了時の1回限定実行ロック: WordPress環境下で「ページ読み込み完了イベント」が繰り返し誤作動してフリーズを引き起こす問題を、最初の1回しか通さない「使い捨て実行ロック(フラグ)」の設置で解消。
  • Canvas準備完了時の座標計算ガード: ゲームが始まる前の段階で画面の幅(Canvas)を呼び出そうとしてフリーズしていた問題を、未定義時は標準幅を代入する安全コード(`canvas ? canvas.width : 480`)で解決。
Ver 3.0

絶対崩れない「強制テーブルレイアウト」への移行

  • Grid/Flexから「HTML table」への大手術: ブログテーマ独自のCSS干渉によって、横に2つ並ぶはずの「ステージ選択ボタン」や「ランキングタブ」が縦一列に押し潰されて枠線が消え去っていた表示崩れを解消。
  • どんな環境でも横並びを絶対死守: 横並び命令を打ち消されても強制的に幅を維持する「テーブル(table)構造」にレイアウトをリファクタリング。
  • 完全動的HTML生成化(画面分離): ゲーム画面以外の時は、海やボタンのHTMLデータ自体をページ内から物理的に消去して入れ替える再描画システムに変更。
Ver 2.0

テンションゲージ(駆け引き)のバランス大改革

  • ボタンを離した時の「大袈裟な減少」: 危ないと思ったらボタンから指を離せば、一気に安全圏まで冷え込むように減少スピードを約4倍に超強化。
  • 大人しい時の「巻き上げご褒美減少」: 魚がヘトヘトになって大人しいチャンスタイムの時は、連打して巻いていてもテンションゲージが自動的に減少するようにマイルド調整。
  • お魚ごとの「気まぐれスタミナ(個体差)」: かかった瞬間に魚のスタミナ(戻りやすさ)がランダム決定。「暴れたあともグググッと糸を張り続ける頑固な魚」や「すぐバテる素直な魚」など、1匹ごとの個性を再現。
Ver 1.0

ランキング機能の実装&文字化け防止パッチ

  • LocalStorage永久保存ランキング: 各自のパソコンやタブレット内にベスト10をサーバー不要で永久保存。お父さんとたこさんの熱いスコア競い合いの場を設置。
  • WordPress文字化け完全防止パッチ: 記事投稿時に絵文字(🐟や✨)を直接コードに書くとWordPressでエスケープされて表示されない問題を、JavaScriptから安全な文字コード(`String.fromCodePoint`)で動的に吐き出す設計で回避。
  • お邪魔サメ&巨大フグ襲撃: 確率16%で獲物を奪い去っていく凶悪なサメ(🦈)の乱入イベントや、レアな大物フグ(🐡)など、子供のワクワクを誘うキャラクターたち。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Xでフォローしよう

おすすめの記事