スタート画面を表示しよう1
これまでは、ゲームを起動した瞬間からゲームが動き出していました。
そこで、ゲーム起動時にスタート画面を表示し、マウスクリックしたらゲームが動き出すようにしましょう。
「スタート画面かどうか」「ゲーム開始中かどうか」 といった状態は 変数で表現し、 条件分岐によって処理を切り替えます。
まずは、ゲームの状態を管理するための変数を定義します。
一番上の行に、以下のコードを追加してください。
let gameState = "start";
stateとは英語で状態を意味します。
初期状態は "start"
、つまりスタート画面です。
次に、updateGame
関数の部分を次のように変更してください。
function updateGame() { if (gameState === "start") { return; } updatePlayer(); updateBlock(); }
ゲームの状態が "start"
のときは、return
をして処理を終了しています。
(return
を実行すると、その関数の処理はそこで終了になります)
updatePlayer
関数と updateBlock
関数が呼ばれなくなるので、ゲーム画面は動かないようになります。
ここまでできたら、一度ゲームを起動してみましょう。
ゲームが動かないことが確認できると思います。
次回のレッスンでは、スタート画面を表示していきます!