2026年9月28日 · @Hideyoshi Namba
結論から言うと、各マスにお金のイベントと所持金を入れただけで、サイコロを振って進むだけだったすごろくが「お金をどう増やし、どう減らさずにゴールするか」を考えるゲームに変わりました。
途中でバグも出ました。でも、それも含めて学びの多い回でした。
前回のおさらい
前回は、プログラミング未経験の僕がGPTに教わりながら、30マスの簡単なWebすごろくを作りました。
できたのは、盤面、サイコロ、コマ移動、ゴール判定だけです。それでも、自分で作ったゲームがブラウザで動く体験はかなり新鮮でした。
今回は、この土台に少しずつ機能を足していきます。
Version 0.2：30マスすべてにイベントを入れた
最初に取り組んだのは、各マスにイベントを持たせることでした。
それまでは、どのマスに止まってもコマが動くだけでした。そこで「給料日」「コンビニで予定外の買い物」「生活防衛資金について勉強」「NISAについて勉強」「副業に挑戦」「家電が突然壊れた」といった、お金に関係するイベントを30マス分設定しました。
止まったマスによって、画面下に違う文章が表示されます。これだけで、数字の上を進むだけのゲームから、少しすごろくらしくなりました。
「進む・戻る・1回休み」も追加
ただ、イベントが文章だけでは物足りません。そこで、昔ながらのすごろくらしい特殊マスも加えました。
- 固定費を見直した → 2マス進む
- 怪しい投資話に引っかかった → 3マス戻る
- 不用品を売った → 3マス進む
- 勉強を後回しにした → 1回休み
- 仕事が忙しかった → 1回休み
ポイントは、進む・戻るの理由をお金の行動に結びつけたことです。良いお金の行動をすれば前に進み、良くない判断をすれば戻る。この形なら、ゲーム性とお金の勉強を自然に組み合わせられると感じました。
ゴール後に「もう一度遊ぶ」ボタン
実際にテストしていると、不便な点がすぐに見つかりました。
最初の仕様では、ゴールするとそこでゲームが終わります。イベントが正しく動くか確かめるには何度も遊びたいのに、そのたびにブラウザを再読み込みするのは面倒でした。
そこで、ゴールすると「🎲 サイコロを振る」ボタンが「🔄 もう一度遊ぶ」に変わるようにしました。押すと、コマがSTARTに戻り、サイコロ表示と1回休みの状態もリセットされ、最初から遊べます。
プレイヤー向けの機能ですが、作る側にとっては「テストしやすくなった」効果の方が大きかったです。
GPTとの進め方を変えた：コードを全部書き換えない
今回の途中で、GPTとの進め方も変えました。
Version 0.1までは「このコードを全部コピーして置き換えてください」という方法で作っていました。初心者にはミスが少なく、最初はこれが分かりやすかったです。
ただ、土台ができた後も毎回全部置き換えていると、どこが変わったのかが見えません。
そこで今後は、「この1行を追加」「この関数だけ変更」「HTMLに表示欄を1つ追加」のように、必要な部分だけ直していくことにしました。
これは学習の面で大きな変化でした。コードをただコピーするのではなく、「このコードは何のためにあるのか」が少しずつ見えてきたからです。
Version 0.3：所持金10万円を追加
次に入れたのが「お金」です。
ゲーム開始時の所持金は100,000円。画面には「💰 所持金：100,000円」と常に表示されます。
そして、30マスのイベントそれぞれに金額を設定しました。たとえばこんな具合です。
- 給料日 → ＋30,000円
- コンビニで予定外の買い物 → −500円
- スマホ料金見直し → ＋5,000円
- 家電故障 → −20,000円
- 怪しい投資話 → −10,000円
- 不用品販売 → ＋5,000円
- 副業初収入 → ＋10,000円
- 家族で外食 → −5,000円
所持金100,000円で給料日に止まれば130,000円。家電故障なら80,000円です。
これで初めて、ただゴールを目指すだけではなく、「お金をどう増やし、どう減らさずにゴールするか」というゲームになってきました。
バグ発生：イベントが全部出なくなった
途中で一度、イベントがまったく表示されなくなりました。
サイコロは振れる。コマも進む。でも、止まったマスのイベントが出ない。最初は原因が分かりませんでした。
コードをGPTに見せて確認すると、原因はイベントを実行する処理「executeEvent()」でした。所持金を増減させる処理を追加したときに、次のような状態になっていたのです。
- executeEvent() が2つ存在していた
- 新しい方が、別の処理の中に入り込んでいた
- イベントを実行する命令が、正しい位置になかった
コードを整理すると、再び正常に動きました。
このトラブルは、むしろかなり勉強になりました。プログラミングでは、コードが正しいかだけでなく、どこに書いてあるかも重要らしい。その意味を、初めて少しだけ理解できた気がします。
Version 0.3までにできたこと
今の時点で、次の機能が動いています。
- 30マスの盤面、サイコロ、コマ移動
- 30種類のイベント
- 進む・戻る・1回休み
- 所持金と、収入・支出のイベント
- ゴール判定と「もう一度遊ぶ」（所持金も10万円にリセット）
Version 0.1と比べると、かなりゲームらしくなりました。
バージョンごとにフォルダも分けて、Ver0.1、Ver0.2、Ver0.3として保存しています。途中で壊してしまっても、前のバージョンに戻せます。
次はクイズと選択肢：「考えて選ぶ」ゲームへ
次のVersion 0.4では、クイズや選択イベントを入れたいと考えています。
たとえば「生活防衛資金は何のために準備する？」という問題を出し、正解するとボーナスがもらえる仕組みです。
さらに将来的には、「スマホ料金を見直しますか？」と聞いて、「見直す」なら支出が減り、「そのまま使う」なら変化なし、というようにプレイヤー自身が選べるようにしたい。
文章を読むだけでなく、考えて、選んで、結果が変わる。そういうゲームにしていくつもりです。クイズの問題文も、オリジナルで作っていく予定です。
やってみて感じたこと
前回は「本当にゲームが作れた」という驚きが大きかった。今回は少し違いました。
機能を一つ足すと、「じゃあ次はこれもできそう」とアイデアが次々に出てくる。バグが出れば、GPTと一緒に原因を探す。
まだ一人でJavaScriptは書けません。それでも、どこを変えるとゲームの何が変わるのかは、少しずつ分かってきました。
プログラミングを勉強してからゲームを作るのではなく、作りたいものを作りながら、必要なことをその都度覚えていく。僕にはこのやり方が合っているようです。
この白い30マスのゲームが、最終的にどこまで変わるのか。自分でも楽しみになってきました。
コメント