時間を止めろ！タイムロッカー系弾幕ゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

-アクションゲームなのにターン制

今回作るのは弾幕ゲームです。
シューティングの名作タイムロッカーをヒントに、時間を停止（スロー）しながら弾幕を避けてアイテムをGETしていきます。
時間が止まるため、長考型のターン制のようなパズル感覚で楽しめる、アクションゲームが苦手な人でも遊べるゲームに仕上げてみました。

デモアプリはこちらから。https://openprocessing.org/sketch/1620924
(unityroom版：https://unityroom.com/games/timeman）

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

クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解（通称、図解くん）を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、テキスト教材型のプログラミング教材です。

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

テキスト教材の補助として動画を作成しています。クミタテ式が初めての方は動画と一緒に学習すると良いでしょう。
動画とこのテキスト教材は期間限定で無料公開しています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。

- 開発環境

OpenProcessingを使ったp5js、Processingを環境を前提としています。

---

■[ここからスタート！]画面のサイズを決める

画面サイズを600x400の固定サイズにしましょう。

---

■背景を黄色で塗りつぶし続ける

drawの中で背景を黄色で塗りつぶし続けましょう。drawの中で毎回背景を塗りつぶすことでアニメーションが実現できます。

---

■プレイヤーを固定表示する

プレイヤーとなる四角形を固定の位置座標(300, 200)に表示してみます。

---

■変数で位置座標を管理する

プレイヤーが動き回れるように、位置座標を変数にしておきます。

---

■プレイヤーを動かす

プレイヤーを右下に動かしてみます。

---

■進む方向も変数にする

プレイヤーが進む方向（Direction）も変数にしてみましょう。

---

■上下左右キー操作でプレイヤーを動かす

上下左右キーでDirection変数を操作し、プレイヤーを操作しましょう。

---

■プレイヤーを止める

キーが離されたらDirectionを初期化して移動量をゼロにしましょう。

---

■弾幕を5体、同じところに重ねて表示する

弾幕を5体表示します。
繰り返し処理forを使って5回繰り返す枠組みの中で四角形を描くことで5体表示していきますが、とりあえず同じ場所に5体、重ねて表示します。

---

■弾幕の位置座標、移動方向を配列で管理する

弾幕をそれぞれ個別に動かすために、位置座標と移動方向を配列で管理します。
まずは表示位置を反映してみましょう。
なお、配列サンプルは以下をお使いください。

// p5.js
let xList = [
  100, 200, 300, 400, 500
];
let yList = [
  100, 100, 100, 100, 100
];
let dxList = [
  1, 2, -1, -2, 1
];
let dyList = [
  -2, -1, 2, 1, 1
];

// Processing Java
int[] xList = new int[]{
  100, 200, 300, 400, 500
};
int[] yList = new int[]{
  100, 100, 100, 100, 100
};
int[] dxList = new int[]{
  1, 2, -1, -2, 1
};
int[] dyList = new int[]{
  -2, -1, 2, 1, 1
};

■弾幕を動かす

配列の移動方向をもとに弾幕を動かしていきます。

---

■弾幕が画面の端で跳ね返るようにする

画面の外に出そうになったら、移動方向にマイナス1をかけて移動方向を逆転させて、跳ね返るようにします。

---

■弾幕の動きをスローモーションにする

弾幕の速度を調整するローカル変数spを用意し、弾幕に移動量に掛け算することでスローモーションを実現します。

---

■プレイヤーが動いたらスローモーションを解除

プレイヤーが動いている最中はスローモーションを解除し、ローカル変数spを1にして正常な速度とします。
プレイヤーが動いているかのチェックは、プレイヤーの移動量dx, dyから判定しましょう。
dx, dyはプラス方向とは限りません。マイナス方向もあります。そのため絶対値で判定しています。

---

ここから先は図解くんはありません。
自分で頭を整理して課題に取り組んでみてください。

■（★☆☆）課題1.弾幕の数を増やす

弾幕が5体だけでは楽勝すぎますね。弾幕の数を10倍の50個くらいに増やしてみましょう。

- ヒント -
50個も配列を作っているのは面倒ですよね。
そういうときは何が使えたでしょうか？

■（★★☆）課題2.当たり判定をする

全ての弾幕と当たり判定をしましょう。
当たってしまったらとりあえずプレイヤーを-999の位置などに飛ばして非表示にしておきましょう。
なお、当たり判定は以下のアルゴリズムを使ってください。

少し難しいのでコードを置いておきます。

// p5.js
function isHit(px, py, pw, ph, ex, ey, ew, eh){
  if(px < ex + ew && px + pw > ex){
    if(py < ey + eh && py + ph > ey){
      return 1;
    }
  }
  return 0;
}

// Processing Java
int isHit(float px, float py, float pw, float ph, float ex, float ey, float ew, float eh){
  if(px < ex + ew && px + pw > ex){
    if(py < ey + eh && py + ph > ey){
      return 1;
    }
  }
  return 0;
}

■（★★☆）課題3.1つだけアイテムにする

弾幕の内、1つだけをアイテムにしてみましょう。
アイテムを取った場合はスコアをアップさせましょう。

■（★★★）課題4.スローモーションを演出する

「プレイヤーが止まっている間はスローモーションになる」という仕様を演出で伝えましょう。
どういう演出であれば、遊び手に伝わるでしょうか？考えてみましょう。

■オリジナルゲームに仕上げる

デモゲームでは、弾幕を避けながらアイテムをGETする仕様にしました。
避けるだけでは遊び手にゲームの目的が伝わりづらいため、目的となるアイテムを配置しています。ゲームの主目的を工夫してみましょう。

また、プレイヤーが止まっている時は時間停止ではなくスローモーションにしてみました。全く何も動かなくなるとバグや処理落ちに見えてしまったりすることを避ける意味と、微々だが弾幕の方向性が見えるようにする意味と、そして、止まっている間は無敵にはしない意味があります。

完成コード