どこまでも高く登れ！スクロールするジャンパーアクションゲーム！クミタテ式プログラミングドリル(Processing / p5js)

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

無限スクロールするジャンプアクション

今回作るゲームはどんどん高く登っていくジャンプアクションです。高くジャンプすることで爽快感が得られるゲームになっています。
無限にジャンプできるよう、画面をスクロールできるようにしていきます。
実際に動作するサンプルゲームは以下のOpenProcessingのリンクから。

Space Jumper - OpenProcessing

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

クミタテ式プログラミングドリルとは、筆者が開発した、設計図を元にプログラミングコードを組み立てていくことでゲームプログラミングを学習できるコーディングドリル教材です。
クミタテ式はプログラミング初心者だけでなく、小学生にも最適化したプログラミング教材ですので、学校教育機関などでもお使いいただけるよう考慮しています。
この教材の最大の特徴はサンプルコードが登場しないことです。ブロックで構成された設計図を見ながら、自分でプログラミングコードに置き換えていくことで自分で考えながらプログラミングするスキルが身に付きます。
なお、プログラミング環境はProcessing、p5.jsを想定して設計されています。

クミタテ式を使った学習の進め方

1ブロックにつき、コード1行と考えてください。
課題を1つ完了するたびに実行して動作の確認をしてください。
プログラミング環境はOpenProcessingを利用すると良いでしょう。
https://openprocessing.org/sketch/create

■画面の大きさを決める​

最初の1回だけ実行するsetupという枠組みを使います。​

■画面の背景に色をつける

1秒間に60回、停止ボタンを押すまでずっと繰り返すにはdrawという枠組みを使います。

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

プレイヤーとなる四角形を、横300、縦200の位置に表示してみましょう。

■変数を使って四角形を表示する

プレイヤーを動かす前に、プレイヤーの位置を変数にしておきます。
横の位置をx、縦の位置をyとします。

■移動方向を変数にしてプレイヤーがゆっくり下に落ちるようにする

移動方向（direction）を管理する変数、dxとdyを作り、プレイヤーの位置情報に足し算するようにします。

■プレイヤーが加速度的に下に落ちるようにする

落ち方を自然な動きにするため、徐々に加速して落ちるようにします。

■プレイヤーが一番下まで落ちたら着地するようにする

画面の外まで落ちてしまうのを防ぎます。

■上矢印キーでジャンプできるようにする

■左右の矢印キーで、左右に動かせるようにする

■ジャンプ台を作って表示する

画面の上部に、ジャンプ台を設置します。
このジャンプ台を使ってプレイヤーは登っていくことになります。

■ジャンプ台との当たり判定のために、まずは、当たり判定の関数を定義する

当たり判定の関数を作りましょう。

■ジャンプ台と当たったのなら、自動的にジャンプする

前項で作った当たり判定の関数を使って、プレイヤーとジャンプ台との当たり判定を実行します。

■ゲームカメラがプレイヤーに追尾するようにする

プレイヤーがさらに高く登れるよう、ゲームカメラの概念を導入して、画面スクロールできるようにします。四角形などを表示する際に、カメラの位置を引いてあげることでスクロールが実現します。

チャレンジ課題1. ジャンプ台を踏んだらジャンプするようにする

「ジャンプ台に当たったら」ではなく、「ジャンプ台を踏んだら」にしましょう。
この二つの違い、わかりますか？
踏むということは、上から下に落ちたときということです。下に落ちているのか、上にジャンプしているのか、チェックしてあげましょう。

チャレンジ課題2. ジャンプ台を踏んだら、次のジャンプ台を作る

一度踏んだジャンプ台を使い回して、さらに高いところにジャンプ台を移動させましょう。このとき、ジャンプ台の横の位置をランダムにすることでゲーム性を向上させましょう。

チャレンジ課題3. 画面酔いしないように、カメラの追尾を工夫する

ゲームカメラの追尾が酔いますね・・・。どうしたらいいでしょうか？他のゲームなどを参考に、酔わない制御方法を研究してみましょう。

スーパーチャレンジ課題. ジャンプしてスクロールしていることが伝わるように工夫する

背景が真っ暗だとスクロールしているのかよくわかりません。プレイヤーにジャンプしていることを伝えるためにはどうしたらいいのか、研究して実装してみましょう。