頭が良くなる（かもしれない）、脳トレアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

- 単純だけどなぜか間違えちゃう悔しさ

今回作るのは脳トレアクションゲームです。単純な2択問題を素早く解いていきます。
今回の教材のポイントは、配列です。問題を配列で管理し、アニメーションしながら問題を出題していきます。

デモアプリはこちらから。https://openprocessing.org/sketch/1454529
AキーとBキーだけの2択ですが、逆さまのときは押すキーが逆になります。わかっちゃいるけどなぜか間違えちゃう、ちょうど良い難易度に落とし込めたと思います。

今回の教材では、AのときはAキー、BのときはBキーを押すだけのシンプルな状態で留めます。皆さんの工夫次第で、オリジナリティのある脳トレが作れる余地を残しておきます。

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

クミタテ式は英語のコードを、日本語で書かれた図解を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、プログラミング教材です。
プログラミング的思考を学ぶよりも、コードの書き方を優先的に学習することを目的としています。

（OpenProcessingのサンプルコードの図解）

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

動画と並行しながら学習するとより効率的に学習できるようになっています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。

---

■[ここからスタート！]画面を表示する

ゲーム画面のベースを作っていきましょう。

■問題となる文字「A」を表示する

Aという文字を表示しましょう。

■問題の表示を調整する

文字を大きくし、センタリングで中央寄せしてあげましょう。

■繰り返し処理で、とりあえず問題を5つ重ねて表示する

繰り返し処理forを使って5回繰り返し、文字を5つ表示します。
このままでは文字が同じ箇所に重ねて表示されてしまいますが、まずは良いでしょう。

■問題が重ならないようにスペースを空ける

問題文字をどうしたら重ならないようにできるでしょうか？
繰り返し処理の枠組みの中では、0〜4の間で1ずつ増え続ける変数「i」が使えます。この1ずつ増える性質を利用して、問題の間にスペースを空けていきましょう。

■出題リストを配列で用意する

問題の出題リストを管理する配列「qList」を用意しましょう。
配列の中身は「A」や「B」ではなく、1や2といった数字で管理します。データと表示は切り分けて管理した方が都合が良いことが多いためです。
まずは配列を使って、データとなる1や2といった数字を表示しましょう。
配列は以下のテキストを使用してください。

// p5js
let qList = [
  1, 2, 1, 2, 1
];

// Processing java
int[] qList = new int[]{
  1, 2, 1, 2, 1
};

■数字データを表示に変えるオリジナル命令を作る

配列「qList」の中身は1や2といった数字です。この数字データをAやBといった文字の表示に変換する役割を持ったオリジナル命令を作りましょう。
ここではdrawQuizという名前のオリジナル命令を作ります。drawQuizには引数パラメーターが3つ、p1〜p3まで指定できるようにしていきます。

p1には数字データが、
p2には表示したいx座標が、
p3には表示したいy座標を指定する設計にします。

■問題がスクロールするようにする

問題がスクロールしていくようにします。
擬似的にカメラで撮影していると仮定して、カメラの座標が変われば画面も変わるといった具合に、表現していきます。
ここでは一旦、自動的に強制スクロールするようにします。

■キーで回答されたら次の問題までアニメーションスクロールするようにする

現在の問題番号を変数「bango」で管理し、どれかのキーが押されたら回答とし問題番号を1増やします。
camera_xは、アニメーションアルゴリズムにより、問題の位置までスクロールさせます。

[アニメーションアルゴリズム]
新しい場所 = 現在の場所 + (行きたい場所 - 現在の場所) * 0.1;

■正しいキーで正答したら次の問題に移る

問題が「A」のときはAキーを、「B」のときはBキーを押したときだけ正答として次の問題に移るようにしましょう。

---

クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。

■課題1. 画面の表示を整えよう

全体的に左に寄ってしまっているので、現在の問題を画面中央にドカンと表示して、問題同士のスペースをもっと空けてあげましょう。
以下のような画面を目指してみてください。

問題が中央、間隔スペース大

■課題2. 間違えたときはゲームオーバーにしよう

AのときにBキー、BのときにAキーなど、間違えた時はゲームオーバーにしよう。

■課題3.全て回答し終わったらゲームクリアにしよう

5つの問題全てを正答できたらゲームクリアにしよう。

■課題4. オリジナル脳トレに仕上げよう

今のままではただのA or Bのタイピングゲームになってしまいます。みなさんのオリジナル脳トレに仕上げましょう。
例えば、デモゲームのように逆さまのABを作っても良いでしょう。色を使った脳トレもよく見かけますね。
数字データをそのまま表示に使って、「足して10にしろ」で数字キーを押させても良さそうです。
脳トレに絞らず、マルバツクイズに発展させることもできそうですね。問題文を長くして、「お好み焼きはおかず？」で左右キーでマルバツ回答など。なお、個人的にはバツです。

■宿題. 関数を学習しよう

今回作ったdrawQuizのようなオリジナル命令を「関数」と呼びます。
関数がわかるようになると、プログラミングスキルが爆上がりします。
この機会にこの動画で関数をマスターしておきましょう。
1.5倍速くらいでみれば、10分くらいで終わります。

（有料エリア）課題3までのプログラムコード

課題3まで、逆さまABまでのプログラムコードを掲載しています。