バネで飛び跳ねろ！ホッピングアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

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

- バネを使って障害物を乗り越えよう

今回作るのは、誰もが遊んだことがあるおもちゃ、ホッピングを使ったアクションゲームです。三角関数による回転、物理挙動が学べる教材になっています。

デモアプリはこちらから。https://openprocessing.org/sketch/1326311

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

クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。

 - 動画を見ながら学習する

動画で実況プログラミングしながら解説しています。このテキストを見ながら動画と一緒に学ぶのがおすすめです。

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

再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。

■drawで背景の色を変える

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

■プレイヤーとなる円を、とりあえず、1つ表示する

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

■変数を使って円を表示する

円を1つ表示できましたか？
続いて、変数xと変数yを用意して、変数を使って円の表示に変更します。
xは横のこと、yは縦を意味します。

■[ここから難易度アップ]三角関数を使ってホッピングを表示する

続いてホッピングを表示します。
ホッピングは回転させますので、三角関数sinとcosを使用しています。
三角関数と聞くと難しく感じますが、要は「角度に応じて-1から1の値を作っている」に過ぎません。
ここでは角度を管理するangleという変数を用意して、90度にした状態でホッピングの棒の部分を表示します。

■ホッピングの先端を表示する

ホッピングの棒部分は表示できましたか？
続いて、ホッピングの先端を表示しましょう。ちょっとホッピングに見えづらいかもしれませんが、ここでは簡略化して円形で表示します。

■ホッピングを回転させる

ホッピングの表示ができましたか？
続いて、キー操作でホッピングを傾けられるようにします。
キー操作で直接angleを編集してしまうと操作感が悪いので、回転方向を管理するangle_dirという変数を用意して、自動的に回転させます。

■ホッピングが着地したらジャンプする

ホッピングの回転はできましたか？
続いて、着地したときに真上にジャンプするようにしましょう。
ここでは、プレイヤーに移動量を管理するdxとdyという変数を用意しました。

■ホッピングの着地角度によって飛ぶ方向を決める

着地した時に真上にジャンプするようになりましたか？
続いて、着地したときに真上ではなく、角度に応じて移動量を計算するようにします。この計算にも、三角関数sinとcosが登場します。繰り返しますが、三角関数とは要は、角度に応じて-1から1の値を作るというものです。シンプルに考えましょう。
着地した時、着地したときの角度とは真逆に移動したいので、マイナスの値、ここではマイナス20をかけ算していることに注意してください。
また、横に飛び過ぎないようにdxに0.99を掛け算して速度を低下させている点にも注意してください。

■応用課題1. sinとcosを入れ替えて検証しよう

三角関数sinやcosは、頭で考えるより試して動きを見て検証した方がわかりやすいです。
例えば、sinとcosを入れ替えてみたらどうなるでしょうか？あるいは、どちらもsinにしたらどうなるでしょうか？
また、sinとcosの違いは波で覚えた方が覚えやすいです。

sin波は0、1、0、-1、0という波になります。
例えば、sin(radians(180))とすれば、戻り値は0になります。

一方cos波は、1、0、-1、0、1という波になります。
例えば、cos(radians(180))とすれば、戻り値は-1になります。

なお、Processingにおいては、画面下が数値が高くなるので、この波は逆転する点に注意してください。

■応用課題2. ゲームルールを追加してオリジナルゲームに仕上げよう

ここからは自由にやっちゃってください。