![見出し画像](https://assets.st-note.com/production/uploads/images/61840065/rectangle_large_type_2_01b8f30cd34e77e6ae35a088578a97fd.png?width=1200)
パワーチャージで飛び越えろ!ハードル走ゲームを作ろう!クミタテ式プログラミングドリル(Processing / p5js)
この教材は期間限定で無料公開している教材です。
ためすぎ注意?!パワーチャージで飛び越えろ!
今回作るのはパワーをチャージして障害物を避けるゲームです。パワーメーターがついていることが特徴です。こういったゲームUIがプレイヤーについて回るとゲームっぽくなります。また、数値を0.0〜1.0の間で正規化する手法も学べます。
サンプルプログラムはこちらから。
クミタテ式プログラミングドリルとは?
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。
■[ここからスタート!]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命令です。
動画で復習する
この記事が気に入ったらサポートをしてみませんか?