![見出し画像](https://assets.st-note.com/production/uploads/images/85356887/rectangle_large_type_2_f02955b03d403b75bbf275551d23c6c6.png?width=800)
連打でスピードアップ!白熱レースゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)
-単純な連打ゲーでも見せ方で活かす
今回作るのは連打するだけで加速するシンプルなレースゲームです。
シンプルな連打ゲーでも、見せ方を変えるだけでプレイヤーの気持ちよさを増幅させることができます。
また今回は基本的な配列を使っていますので配列が苦手な初心者にもおすすめな教材となっています。
![](https://assets.st-note.com/production/uploads/images/85356767/picture_pc_d3ee84abed7cb812d9d6f97db1bb5a48.gif?width=800)
デモアプリはこちらから。https://openprocessing.org/sketch/1630426
- クミタテ式プログラミングドリルとは?
クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解(通称、図解くん)を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、テキスト教材型のプログラミング教材です。
![](https://assets.st-note.com/img/1661191957152-tqIWKgdilb.png?width=800)
- 動画を見ながら学習する
テキスト教材の補助として動画を作成しています。クミタテ式が初めての方は動画と一緒に学習すると良いでしょう。
動画とこのテキスト教材は期間限定で無料公開しています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。
- 開発環境
OpenProcessingを使ったp5js、Processingを環境を前提としています。
■[ここからスタート!]画面のサイズを決める
画面サイズを600x400の固定サイズにしましょう。
![](https://assets.st-note.com/img/1661191812911-EfBFggEWRG.png?width=800)
■背景を黄色で塗りつぶし続ける
drawの中で背景を黄色で塗りつぶし続けましょう。drawの中で毎回背景を塗りつぶすことでアニメーションが実現できます。
![](https://assets.st-note.com/img/1661191800976-zQdFNviDHe.png?width=800)
■レース選手を1体だけ表示する
6体の選手を登場させていきますが、とりあえず1体だけ表示してみます。
赤色の四角形で表現します。
![](https://assets.st-note.com/img/1661191800896-VJ28hBHcxd.png?width=800)
■選手を6体並べる
繰り返し処理forを使って、縦一列に選手を6体表示してみましょう。
![](https://assets.st-note.com/img/1661191800911-FmCEBVicE9.png?width=800)
■0番目の選手はプレイヤーとする
0番目の選手はプレイヤーとして白色にしておきます。
配列の番号は0からスタートするため、0番目としています。
![](https://assets.st-note.com/img/1661191801111-YprYmeYH4b.png?width=800)
■選手たちのx座標を配列で管理する
選手たちを動かす前に、選手それぞれの横の座標(x座標)を配列で管理しましょう。
配列サンプルは以下をお使いください。
// p5.js
let xList = [
50, 50, 50, 50, 50, 50,
];
// Processing Java
float[] xList = new int[]{
50, 50, 50, 50, 50, 50,
};
![](https://assets.st-note.com/img/1661191801601-kLCjK0To20.png?width=800)
■選手たちの移動量を配列で管理し、動かす
選手たちの走る速度はバラバラです。バラバラな速度を配列で管理しましょう。
速度が決まれば、後は座標配列に足していくだけです。
移動量の配列サンプルは以下をお使いください。方向(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,
};
![](https://assets.st-note.com/img/1661191802356-sMbJRlGmBG.png?width=800)
■マウスクリックで0番目の選手を加速させる
プレイヤーとなる0番目の選手の移動量は0のままです。
マウスクリックで速度を少しずつアップさせて加速させましょう。
![](https://assets.st-note.com/img/1661191801332-CCCO11F346.png?width=800)
■バーチャルカメラでプレイヤーに追尾スクロールする
プレイヤーが画面から消えてしまわないように、画面をプレイヤーに追尾するようにスクロールしてあげます。
ここで使えるのが擬似的なカメラの概念、バーチャルカメラの考え方です。
表示座標からカメラの座標分を差し引いてあげるだけで簡単に画面のスクロールが実現できます。
![](https://assets.st-note.com/img/1661286081238-FLZDMmgND6.png?width=800)
■ゴールさせる
好みですが、ここでは4000を超えたらゴールとしてみます。
順位を保持する変数rankをマイナス1で初期値を持たせ、ゴール時に順位を確定させます。
一旦、順位は1位として固定しておきます。
![](https://assets.st-note.com/img/1661286018717-WKFMFvpI5s.png?width=800)
■順位を表示する
ゴールしたら順位が確定します。確定した順位を表示しましょう。
引き続き順位は仮に1位としておきます。
![](https://assets.st-note.com/img/1661287342706-JP57qA76yz.png?width=800)
■順位を計算する関数getRankを作る
順位が仮で1位になってしまっているので、まずは順位を計算する関数を作りましょう。
自分より前にいる選手の人数をカウントすることで順位を割り出します。
![](https://assets.st-note.com/img/1661191802599-1fPXBmYhX9.png?width=800)
ここから先は図解くんはありません。
自分で頭を整理して課題に取り組んでみてください。
■(★☆☆)課題1.順位を表示しましょう
getRank関数を使って、ゴール時に順位を確定させ、順位を表示しましょう。
■(★★☆)課題2. 伝わる演出を考えましょう
プレイヤーが進んでいるのか止まっているのか、
プレイヤーがゴールしたのか、ゴールはどこなのか、
今のままではほとんどよくわかりません。
さらに言えば、連打するということすら遊び手に伝わりません。
どうしたら伝わるでしょうか?
■オリジナルゲームに仕上げよう
今回は連打というだけのシンプルな操作にとどめましたが、レースゲームはパラメーターなども付けやすく、成長要素なども付けやすいジャンルだったりします。
例えば、加速は速いが最高速度が遅い。最高速度は速いがスタミナが少ない、など発想次第で深みのあるゲームが作れるはずです。
■完成コード
このラインより上のエリアが無料で表示されます。
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか?