ゲームの王道！連射シューティングゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

- ゲームの王道シューティング

今回作るのがゲームの王道シューティングです。
王道ではありますが、弾をたくさん出したり、敵をたくさん出したり、とにかく演出でどうにかしないと面白くなりづらいのが連射シューティングの欠点でもあります。
今回はそんな王道連射シューティングを、連射にリスクのある手軽なゲームルールに落とし込んでみました。

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

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

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

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

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

- 開発環境

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

---

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

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

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

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

---

■四角形の弾を1つ固定表示する

固定の位置座標（300, 350)に四角形を表示します。

---

■弾の位置情報を変数で管理する

弾を動かすには変数で位置を管理する必要があります。ここではまずは変数xとyを使って座標を管理してみます。

---

■弾を動かす

弾を上方向に動かしてみましょう。

---

■マウスクリックで弾を発射する

マウスクリックでマウスの位置から弾を発射しましょう。
ゲームルールに落とし込みやすいように、y座標は固定にします。

---

■配列を使って、弾を5個にする

弾は1つしかありません。
そこで弾の位置座標を配列で管理し、5つの弾を発射できるようにしましょう。
弾が5個になったので、繰り返し処理forを使って弾の位置情報にアクセスします。
配列はサンプルとして以下をお使いください。

//p5.js
let xList = [
  -999, -999, -999, -999, -999,
];
let yList = [
  -999, -999, -999, -999, -999,
];

// Processing Java
int[] xList = new int[]{
  -999, -999, -999, -999, -999,
};
int[] yList = new int[]{
  -999, -999, -999, -999, -999,
};

---

■1つずつ連射する

弾が5つになったものの連射してくれません。
それは5つの弾を同時に発射しているからです。
1つずつ発射させるために、使い終わった弾を1つ取得して再利用するようにします。

-ヒント-
breakすることで繰り返し処理を終わらせることができます。
breakしないと、使い終わった弾全てを発射してしまうので要注意です。breakして1つだけ発射するようにしましょう。

---

■画面の確認

以下のように連射ができていますか？
連射ができていない人はコードを見直しましょう。

---

■敵を上部から出現させる

連射ができましたか？
では敵を1体出現させてみましょう。敵(Enemy)の変数e_xとe_yを使って敵の位置座標を管理します。

---

■isHit関数を作る

弾と敵との当たり判定をするために、当たり判定を担うオリジナル命令「isHit関数」を作りましょう。
isHit関数は、8つの情報を渡して、当たっていれば1を、当たっていなければ0を返します。
作り方が難しい人は以下のサンプルを使いましょう。

-ヒント-
四角形同士の当たり判定は、
1. 左が、相手の右側より、左にある
2. 右が、相手の左側より、右にある
3. 上が、相手の下側より、上にある
4. 下が、相手の上側より、下にある
の4つの条件を全て満たすときに当たっているとみなせます。 

// 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;
}

---

■isHit関数で当たり判定をする

isHit関数を使って敵と弾との当たり判定をしましょう。
1つの敵に対して、5つの弾全てと当たり判定をする必要があります。そのため繰り返し処理で5つの弾すべてと、1体の敵との当たり判定をしています。
当たったときは、敵と弾を初期化します。

---

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

■（★☆☆）課題1. 敵の出現場所をランダムにしよう

敵の再出現場所はいつも同じです。ランダムにしましょう。

■（★☆☆）課題2.敵にHPを持たせましょう

せっかく連射できるのに敵を1撃で倒せてしまいます。
敵にHPを持たせて、HPが0になったら再出現させましょう。

■（★★★）課題3.敵ウェーブを作りましょう

連射ができるのに対して敵が1体なのは強すぎますね。
敵を複数体、まとめて出現させましょう。複数体まとまって出てくる敵のことを「ウェーブ」という単位で表現したりします。

-ヒント-
敵が複数体になったということは、複数の弾と、複数の敵、全ての総当たりチェックが必要になることに注意してください。
弾の繰り返し処理の中で、さらに敵の繰り返し処理をして、総当たりをします。

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

今回のデモゲームでは、ダメージを与えすぎた敵は回復してしまうというルールを追加することで、強すぎる連射に対してデメリットを与えてみました。
連射はシューティングの醍醐味ではありますが、連射できるが故に、ゲームが簡単になり、ボスなどの複雑な敵を出すという世界観重視のアセット型のゲームになりやすい傾向があります。
アセット型ゲームは大量のイラストや演出で楽しませることが前提になってしまい、工数がふくらんでいきます。なるべくルールで楽しくさせましょう。
アセット型は大人数でのチーム制作向きであり、個人制作向きではありませんし、何よりも工夫が生まれづらいです。

（有料）完成コード