連打でスピードアップ！白熱レースゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

2022年8月24日 17:42

-単純な連打ゲーでも見せ方で活かす

今回作るのは連打するだけで加速するシンプルなレースゲームです。
シンプルな連打ゲーでも、見せ方を変えるだけでプレイヤーの気持ちよさを増幅させることができます。
また今回は基本的な配列を使っていますので配列が苦手な初心者にもおすすめな教材となっています。

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

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

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

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

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

6体の選手を登場させていきますが、とりあえず1体だけ表示してみます。
赤色の四角形で表現します。

繰り返し処理forを使って、縦一列に選手を6体表示してみましょう。

0番目の選手はプレイヤーとして白色にしておきます。
配列の番号は0からスタートするため、0番目としています。

選手たちを動かす前に、選手それぞれの横の座標（x座標）を配列で管理しましょう。
配列サンプルは以下をお使いください。

// p5.js
let xList = [
  50, 50, 50, 50, 50, 50,
];

// Processing Java
float[] xList = new int[]{
  50, 50, 50, 50, 50, 50,
};

選手たちの走る速度はバラバラです。バラバラな速度を配列で管理しましょう。
速度が決まれば、後は座標配列に足していくだけです。
移動量の配列サンプルは以下をお使いください。方向（Direction）を管理する配列のでdxListとしています。

// p5.js
let dxList = [
  0, 5, 1, 3, 1, 2, 3.5, 
];

// Processing Java
float[] dxList = new float[]{
  0, 5, 1, 3, 1, 2, 3.5, 
};

プレイヤーとなる0番目の選手の移動量は0のままです。
マウスクリックで速度を少しずつアップさせて加速させましょう。

プレイヤーが画面から消えてしまわないように、画面をプレイヤーに追尾するようにスクロールしてあげます。
ここで使えるのが擬似的なカメラの概念、バーチャルカメラの考え方です。
表示座標からカメラの座標分を差し引いてあげるだけで簡単に画面のスクロールが実現できます。

好みですが、ここでは4000を超えたらゴールとしてみます。
順位を保持する変数rankをマイナス1で初期値を持たせ、ゴール時に順位を確定させます。
一旦、順位は1位として固定しておきます。

ゴールしたら順位が確定します。確定した順位を表示しましょう。
引き続き順位は仮に1位としておきます。

順位が仮で1位になってしまっているので、まずは順位を計算する関数を作りましょう。
自分より前にいる選手の人数をカウントすることで順位を割り出します。

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

getRank関数を使って、ゴール時に順位を確定させ、順位を表示しましょう。

プレイヤーが進んでいるのか止まっているのか、
プレイヤーがゴールしたのか、ゴールはどこなのか、
今のままではほとんどよくわかりません。
さらに言えば、連打するということすら遊び手に伝わりません。
どうしたら伝わるでしょうか？

今回は連打というだけのシンプルな操作にとどめましたが、レースゲームはパラメーターなども付けやすく、成長要素なども付けやすいジャンルだったりします。
例えば、加速は速いが最高速度が遅い。最高速度は速いがスタミナが少ない、など発想次第で深みのあるゲームが作れるはずです。

このラインより上のエリアが無料で表示されます。

1,004字

¥ 100

この記事が気に入ったらサポートをしてみませんか？