CONTENT
ここから
この章でやること
この章では、これから作る「タイムライン型の人生ゲームアプリ」の完成イメージを確認します。
まだコードを全部理解しなくて大丈夫です。
まずは、
どんな画面なのか
何を押すと何が起きるのか
どこを変えると自分用になるのか
をざっくり見ていきます。
今日のゴール
この章のゴールは、次の3つです。
1. 作るアプリの全体像が分かる
2. サイコロを振る流れが分かる
3. これから学ぶ内容の見通しが持てる
最初から完璧に理解しようとしなくて大丈夫です。
まずは「こんなものを作るんだ」と分かればOKです。
作るアプリの完成イメージ
今回作るのは、縦スクロールのタイムライン型人生ゲームです。
画面には、20歳から65歳までの人生マスが並びます。
20歳｜人生のはじまり
21歳｜準備の日々
23歳｜小さなカフェ
24歳｜ライフイベント
25歳｜初任給
...
65歳｜人生の集計
プレイヤーはサイコロを振って、人生のマスを進みます。
止まったマスによって、お金が増えたり減ったりします。
画面の主な構成
アプリ画面は、大きく4つに分かれています。
| 場所 | 役割 |
|---|---|
| 上部バー | 今のプレイヤー・現金・資産・残りマスを表示 |
| ランキングバー | 現在の順位を表示 |
| タイムライン | 人生のマスを縦に表示 |
| 下部ボタン | サイコロ・購入・リセットを操作 |
まずは、この4つが分かれば十分です。
実際の遊び方
アプリを動かすと、最初はこの状態です。
Player 1 のターン
現金 1500
資産 1500
残り 19
下にある「サイコロを振る」ボタンを押します。
すると、サイコロの数字が動いて、1〜6のどれかが出ます。
出た数だけプレイヤーが進みます。
サイコロを振ると起きること
流れはこのようになります。
サイコロを振る
↓
1〜6の数字が出る
↓
プレイヤーが進む
↓
止まったマスを見る
↓
イベントが発生する
↓
次のプレイヤーに交代する
ゲームの基本は、この繰り返しです。
マスの種類
今回の人生ゲームには、いくつかのマスがあります。
| マス | 起きること |
|---|---|
| スタート | ゲーム開始地点 |
| 通常マス | 大きな収支なし |
| 給料マス | 現金が増える |
| イベントマス | ランダムイベントが起きる |
| 物件マス | 購入できる |
| 税金マス | 現金が減る |
| ゴール | 最終資産を集計する |
人生ゲームらしく、良いことも悪いことも起きます。
イベントの例
イベントマスに止まると、ランダムでイベントが出ます。
例えば、
副業が大成功 → 現金 +300
急な出費 → 現金 -200
投資リターン → 現金 +450
スマホ紛失 → 現金 -300
動画がバズる → 現金 +600
このイベントは、あとから自分で増やせます。
たとえば、学校向けなら「テストで高得点」、ビジネス向けなら「新規契約を獲得」のように変えられます。
物件マスでできること
物件マスに止まると、購入するか選べます。
例です。
小さなカフェ
購入価格 300
通行料 80
購入すると、自分の資産になります。
他のプレイヤーがそのマスに止まると、通行料を受け取れます。
Player 2 が Player 1 の物件に止まる
↓
Player 2 の現金が減る
↓
Player 1 の現金が増える
ここで、ゲームらしい駆け引きが生まれます。
勝敗の決まり方
ゴールすると、最終資産を計算します。
計算するのは、この2つです。
現金
所有している物件の価格
合計が一番高いプレイヤーが勝ちです。
最終資産 = 現金 + 物件価格の合計
このアプリで学べること
この人生ゲームを作ると、Flutterアプリ開発で大事なことをまとめて学べます。
| 学ぶこと | 内容 |
|---|---|
| データ設計 | マス・プレイヤー・イベントをclassで作る |
| 状態管理 | 今のターン、所持金、現在地を管理する |
| サイコロ処理 | ランダムで1〜6を出す |
| イベント分岐 | 止まったマスによって処理を変える |
| アニメーション | サイコロや現在地を動かす |
| UI設計 | タイムライン形式でゲーム画面を作る |
遊びながら、実はかなり大事な技術に触れられます。
この教材の進め方
この教材では、最初から難しい説明はしません。
流れはこうです。
まずコピペして動かす
↓
画面を見て遊ぶ
↓
少しずつ中身を見る
↓
名前や色を変える
↓
マスやイベントを変える
↓
自分だけの人生ゲームにする
先に動かすことで、「このコードは何のためにあるのか」が分かりやすくなります。
最初に見るポイント
完成アプリを見たら、まず次の3つだけ確認してください。
1. サイコロを押すとコマが進む
2. 止まったマスでイベントが出る
3. 現金や順位が変わる
この3つが、このアプリの中心です。
細かいコードは、次の章から少しずつ見ます。
自分用に変えられる場所
このアプリは、あとから簡単にカスタマイズできます。
| 変えられるもの | 例 |
|---|---|
| アプリ名 | 人生ゲーム、キャリアゲーム、投資ゲーム |
| プレイヤー名 | Player 1 → 太郎、花子 |
| 初期資金 | 1500 → 3000 |
| マスの内容 | 初任給、副業、税金、投資 |
| イベント | 収入イベント、出費イベント |
| 色 | 赤ベース、青ベース、緑ベース |
特に最初に変えやすいのは、文字です。
この章ではコードを覚えなくてOK
この章では、コードを暗記しません。
大事なのは、完成後のイメージです。
画面の上に状態が出る
真ん中に人生の道がある
下に操作ボタンがある
サイコロで進む
イベントでお金が変わる
最後に資産で勝敗が決まる
これだけ分かれば十分です。
やる気を維持するコツ
プログラミングは、最初から全部理解しようとすると疲れます。
でも、ゲームアプリは少し変えるだけで楽しくなります。
例えば、
イベント名を変える
プレイヤー名を変える
所持金を増やす
物件価格を高くする
マスの年齢を変える
これだけでも、自分で作っている感覚が出ます。
まずは「動いた」「変わった」を大事にしましょう。
よくある不安
Q. コードが長すぎて読めません。
大丈夫です。
最初から全部読む必要はありません。
この教材では、触る場所を毎回しぼります。
Q. 数学が苦手でもできますか？
できます。
使う計算は、ほとんど足し算・引き算です。
現金 + 収入
現金 - 出費
現在地 + サイコロの数
Q. デザインが苦手でもできますか？
できます。
色や文字は、すでに用意されています。
最初は文字を変えるだけでOKです。
まずここだけ覚える
読むのが大変な人は、ここだけ見てください。
今回は、サイコロで進む人生ゲームを作ります。
止まったマスによって、お金が増えたり減ったりします。
物件を買うと、他の人から通行料をもらえます。
最後は、現金と物件を足した資産で勝敗が決まります。
チェックリスト
□ タイムライン型の人生ゲームを作ると分かった
□ サイコロでプレイヤーが進むと分かった
□ マスによってイベントが変わると分かった
□ お金が増えたり減ったりすると分かった
□ 物件を買えると分かった
□ 最後は資産で順位が決まると分かった
□ 次の章でコピペして動かすと分かった
まとめ
この章では、完成アプリのイメージを確認しました。
今回作るのは、サイコロを振って人生のマスを進むゲームです。
止まったマスによって、給料・税金・イベント・物件購入などが起きます。
ゲームを作りながら、Flutterのデータ設計、状態管理、イベント分岐、UI、アニメーションを学びます。
次の章では、実際にコードをコピペして、まずアプリを動かします。