パズルを自動生成して、ステージ数無限のパズルゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
この教材は期間限定で無料公開している教材です。
- ステージ数は無限！
今回作るのは、ステージ制パズルゲームです。ステージは全て自動生成し、ステージ番号に応じて難易度を上げていきます。ステージ制にすることで、プレイヤーにやる気と目的意識、継続して遊んでもらいやすくなります。
また、今回の教材では、関数と呼ばれるオリジナル命令を多用します。関数や引数について理解できるようになりますので、プログラミングスキルの向上にもおすすめです。
デモアプリはこちらから。https://openprocessing.org/sketch/1381929
- クミタテ式プログラミングドリルとは？
クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。
- 動画を見ながら学習する
動画と並行しながら学習するとより効率的に学習できるようになっています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。
■[ここからスタート]初期プログラムコードを動作させる
まずは通常のナンバーパズルが動作する、初期コードを取得しましょう。
お使いのプログラミング言語に合わせて取得してください。
- p5.jsでの初期コード
https://openprocessing.org/sketch/1381911
- Processing Javaでの初期コード
https://openprocessing.org/sketch/1381910
また、初期コードの解説は前回のクミタテ式をご覧ください。
■オリジナル命令autoMoveOneで自動的に動かす
少しずつ問題を自動生成するプログラムに仕上げていきます。
まずは17番目の「8」のマスを右に動かしてみます。
ここではautoMoveOneというオリジナル命令を作ります。setupで命令を呼び出すことに注意してください。
■動かすマスをランダムにする
「8」のマスではなく、ランダムで右に動かしてみます。
使い捨て変数「r」は、intの整数型にしないといけないことに注意してください。
■数字のマス以外は動かさない
ランダムで動かしてしまうと、壁や関係のないマスまで動いてしまいます。
数字マス以外は動かさないようにしましょう。
■数字マスを上下左右に動かしましょう
ランダムで決めたマスの、上下左右に空白スペースがないか探して動かします。
■動かせるまで何度もトライさせる
ランダムな値によっては上下左右に空白がないため動かせない場合があります。
そこで、この一連の処理を999回繰り返して動かせるまで何度もトライさせます。
動かせたら、breakして繰り返し処理を終了します。
これで、1つだけマスを動かす「autoMoveOne」命令が完成しました。
■autoMoveOne命令を実行する、shufflePuzzle命令を作る
autoMoveOneは文字通り、1つのマスしか動かしてくれません。
複数のマスを動かすために、autoMoveOneを3回実行して、パズルをシャッフルしてくれるshufflePuzzle命令を作ります。
■繰り返し処理を使って命令する
3回autoMoveOneを呼び出すのではなく、繰り返し処理を使って3回autoMoveOneを実行します。
■shufflePuzzleに引数パラメーターを渡せるようにする
3回動かすだけでは大してパズルがシャッフルされませんね。
shufflePuzzle命令に、引数パラメータを渡せるようにして、外部から回数を指定できるようにします。
■ここまでのまとめ
おそらく混乱してきていることでしょう。
一旦ここでまとめます。
autoMoveOneは、ランダムでどれか1つを入れ替える命令です。1つだけです。
shufflePuzzleは、指定された回数分autoMoveOneを呼び出す命令です。シャッフルする回数は引数パラメーター「p1」で伝達されます。
setupがshufflePuzzleを回数を指定して呼び出し、
shufflePuzzleは指定された回数分autoMoveOneを実行します。
これにより、setupはshufflePuzzle命令を介して、どの程度シャッフルするかを決められるようになりました。
■ステージを生成するcreateStage命令を作る
shufflePuzzleに回数を指定できるようになりました。
では、どのステージでどの程度シャッフルすれば良いかを管理する、createStage命令をさらに作ります。
createStage命令では、ステージ番号（stage_id）に応じてシャッフルする回数を決定し、shufflePuzzle命令を呼び出します。
■ステージ番号が同じなら、同じステージを生成するようにする
ステージIDが同じなのに、毎回違うステージがランダムに作られるのはちょっとおかしいですね。
そこで、ランダムの値を制御してしまう、ランダムシードを使います。
ランダムシードが同じなら、random命令も同じ乱数を順に生成します。
乱数が同じなので動かす順番も同じなため、全く同じステージが作れるという考え方です。
ここまでがクミタテ式の設計図ありの基本編です。
以下からは応用編として設計図はありません。自分でアルゴリズムを考えてプログラミングしてみましょう。
■応用課題1. 頭を整理しよう
オリジナル命令（関数と呼びます）がたくさん出てきて混乱したと思います。
現場のプログラミングでは関数は多用され、小さなプログラムを関数にわけて作っていくことがとても多いです。
プログラミングスキルを一歩前進するために避けて通れないのが関数です。ここでもう一度頭を整理してみましょう。
■応用課題2. 現在のステージ番号を表示しよう
プレイヤーがどのステージにいるか迷子にならないように、ステージ番号をゲーム画面に表示してあげましょう。
■応用課題3. クリアしたら次のステージを生成しよう
クリアフラグの0か1を返す、isClear命令が初期コードに含まれていますので、利用しましょう。