パワーチャージで飛び越えろ！ハードル走ゲームを作ろう！クミタテ式プログラミングドリル(Processing / p5js)

この教材は期間限定で無料公開している教材です。

ためすぎ注意？！パワーチャージで飛び越えろ！

今回作るのはパワーをチャージして障害物を避けるゲームです。パワーメーターがついていることが特徴です。こういったゲームUIがプレイヤーについて回るとゲームっぽくなります。また、数値を0.0〜1.0の間で正規化する手法も学べます。

サンプルプログラムはこちらから。

Flappy Hurdle - OpenProcessing

クミタテ式プログラミングドリルとは？

初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。

■[ここからスタート！]setupで画面を表示する

起動時に最初の1回だけ実行するには、setupの枠組みを使いましょう。​

■drawで背景の色を変える

drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。

■プレイヤーとなる四角形を表示する

背景の色は変更できましたか？
続けて四角形を1つ表示してみましょう。

■変数を使ってプレイヤーを表示する

四角形を表示できましたか？
変数xとyを作りましょう。xは横の位置のこと、yは縦の位置のことです。

■プレイヤーを、とりあえず、落下させる

変数は作れましたか？
変数は足したり引いたりすることができます。ここでは、変数yに1を足してプレイヤーが下に落ちるようにしましょう。

■加速度をつけて、プレイヤーを自然に落下させる

プレイヤーが下にゆったり落ちましたか？
ゆったりしすぎていて爽快感がありませんね。爽快感を出すために、加速度をつけて自然にプレイヤーが落下するようにします。
ここでは変数dyを作って、変数yと組み合わせてみましょう。dyはディレクションワイ、方向を意味します。

■プレイヤーを着地させる

プレイヤーが自然に落下するようになりましたか？
しかしどこまでも落下してしまいますね。画面の下で着地できるようにしましょう。
変数は足し算引き算ができますが、完全に上書きすることもできます。

■プレイヤーをジャンプさせる

マウスクリックでジャンプさせましょう。
変数_rateは「_（アンダースコア）」をつけています。これは枠組みの中でしか使えない、使い捨て変数を意味しています。
変数_rateが1なら最大出力、_rateが0なら最低出力となるように正規化して準備しておきます。

■パワーメーターをつける

変数powerを用意して、パワーメーターを作ります。
パワーは60貯まったら最大出力とします。ただ、この段階では61以上になってしまうのでメーターを振り切ってしまいます。この問題は次の項で解決します。

■パワー率を計算するオリジナル命令「getRate」を作る

現在のpowerを引数パラメーターとして渡せば、パワー率を計算して返り値をくれるオリジナルの命令getRateを作って、制御します。
getRateの返り値が1を超えるようであれば、powerを初期化してあげます。

オリジナル命令の作り方はちょっと難しいのでヒントを出します。オリジナルの命令は新しい枠組みとして、setupやdrawの枠組みの外に書くことに注意してください。（初心者はよくdrawの中に書きます）

// Java
float getRate(float _power){
 return 自分で考えよう;
}

// JavaScript
function getRate(_power){
 return 自分で考えよう;
}

ここから先は応用課題として、クミタテ式の設計図はありません。自分でアルゴリズムを考えて、プログラムコードにしてみましょう。

応用課題1. マウスが押されている間だけパワーチャージ

マウスが押されたらパワーチャージ開始。マウスが離されたら、パワーを出力してジャンプします。

応用課題2. 障害となる壁を作ってハードル走にする

当たり判定のアルゴリズムを参考に置いておきます。

応用課題3. スコアによってランクや称号をつける

スコアに応じて、「ランクS」とか「プロゲーマー」などの称号をつけてあげましょう。このとき、getRankというオリジナル命令を作るようにしましょう。以下はサンプルとしてのgetRank命令です。

動画で復習する