ひとりぼっちは誰だ！？瞬間的に見分ける、仕分けゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

2022年11月11日 18:07

- 正解をどう作るか

今回作るのはペアになっていない、1人ぼっちを探す反射神経ゲームです。
複数のパネルの中で1つだけ正解を作るというゲームルールを作ろうとした結果、ペアになっていないひとりぼっちを探すというゲームルールを思いついたので作ってみました。
技術的にはオリジナル命令を作るポイントがいくつか登場します。関数が苦手な人にもおすすめな教材に落とし込んでみました。

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

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

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

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

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

- 開発環境

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

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

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

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

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

■四角形マスを1つだけ表示しよう

このゲームでは9つの四角形マスを描いていきますが、まずは1つだけ四角形を表示してみましょう。
(160, 60)の位置座標に80サイズの四角形を描きます。

■繰り返し処理で9つの四角形を並べよう

この辺りから難しくなってきます。
9つの四角形を一気に描くために、繰り返し処理forを使います。
四角形の位置座標は変数iを上手に使って、計算で導き出していきます。ですが、初心者にはこの計算ロジックは難しいと思いますのでなんとなくの理解でOKです。

■マスの上に「A」という文字を表示しよう

四角形のマスの上に「A」という文字をとりあえず表示していきます。

■配列を使ってマス情報を管理する

マスの情報にA〜Eまでのアルファベットを割り当てて表示していきます。
複数の情報を管理するには配列が便利です。
配列は以下のサンプルをお使いください。

// p5.js
let slotList = [
  "A", "B", "C",
  "D", "E", "A",
  "B", "C", "D",
];

// Processing Java
String[] slotList = new String[]{
  "A", "B", "C",
  "D", "E", "A",
  "B", "C", "D",
};

■アルファベットを任意の文字に変換する

アルファベットA〜Eを任意の文字に変換してみましょう。
ここではオリジナル命令toAnimalを使い、「いぬ」「ねこ」などに変換して表示します。
配列自体に「いぬ」「ねこ」を入れても構いませんが、プログラミングにおいてデータと表示は分離し、データは数値やシンプルなアルファベットで管理する方が応用が効きやすいです。
例えば、サンプルゲームでは「いぬ」「ねこ」ではなく、「🐶」「🐱」といった具合に絵文字を使っています。こういった具合に、データと表示を切り分けておくと見せ方や演出の部分で応用が効きます。表示を画像にするのも良いですね。

■クリックされたマス番号を特定する

マウスがクリックされた時、マウスの位置座標と、マスの位置座標を照らし合わせていき、マス番号を特定を特定します。
ここではとりあえず、マス番号に相応するアルファベット情報をログに出力します。

-ヒント-
ログに出力するには、
p5.jsであれば、JavaScriptのconsole.log()
Processing Javaであれば、println()
を使うと良いでしょう。

■クリックされたら問題をシャッフルする

問題をシャッフルするオリジナル命令「shuffleSlotList」関数を作ります。
ここでは「A, A, B, B・・・E, E」の10個のアルファベット配列を適当に100回シャッフルして、上から9個のアルファベットを抜き出してslotListに代入しています。10枚の山札を用意してシャッフルし、上から9枚のカードを取って手札にする感覚です。こうすればどれかのペアだけが必ず不成立になるはずです。

// p5.js
let targetList = [
  "A", "A", "B", "B", "C", "C", "D", "D", "E", "E",
];


// Processing Java
String[] targetList = new String[]{
  "A", "A", "B", "B", "C", "C", "D", "D", "E", "E",
};

■クリックされたマスがひとりぼっちならシャッフルする

クリックされたマス情報（アルファベット）が、ひとつしかない情報なのかをチェックし、ひとりぼっちであればシャッフルさせます。
ここでもオリジナル命令を作っていきます。「getCount」関数を作り、指定したアルファベットが配列にいくつ入っているのかを計算させます。

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

■（★★☆）課題1.時間制限を追加しよう

時間制限をつけ、ゲーム性をアップしましょう。
一定時間経過したらゲームオーバーとします。
また、間違えた時はペナルティとして時間を進ませるのも良いでしょう。

■（★★★）課題2.間違えたマスは色を変えよう

間違えたらマスの色を変えましょう。プレイヤーへのヒントにもなります。
マスの色を管理する配列を用意すると良いでしょう。

■（★★★★）課題3. アニマルの数を増やしましょう

A〜Eだけでなく、続けてF,G,Hと複数用意してみましょう。
マスの数を増やすとプレイヤーへの負担が大きいのでマスの数は変えない方が良いかと思います。

■オリジナルゲームにカスタマイズしてみよう

今回のこのゲームのキモは、複数のマスのうち、正解は1つしかないということです。
複数の絵柄、情報の内、明確に1つしか存在しない情報というのを考え出せれば新しいゲーム性へと転換できるでしょう。

■完成コード

せっかちな人のための完成コードを掲載しておきます。

ここから先は

2,355字

¥ 100

ログイン

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