画像で遊ぶ神経衰弱を作ろう

• 

  画像を使った神経衰弱を作ってみよう

画像で遊べる神経衰弱を作ろう

カードゲームの定番「神経衰弱」とは、テーブルにあるたくさんのカードから同じ数字のペアを探すカードゲームです。テーブルにあるカードの中から二枚のカードを選び、そのカードが同じペアならば、そのカードが獲得できます。全てのカードを獲得すればゲームクリアです。 今回作るゲームでは、数字の代わりに画像の絵柄のペアを探すというものにしてみましょう。10枚の画像カードを用意しておいて、同じ絵柄を当てていくものにします。また、一人で遊べるものとし、ゲームクリアまでの秒数を競うというものにしてみます。

何を作るのか確認するために、完成版のゲームを確認してみましょう。こちら(https://n3s.nadesi.com/widget.php?2991&run=1)で遊ぶことができるようになっています。「神経衰弱を開始する」のボタンを押すと、ゲームが始まります。カードに見立てたボタンが20個ありますので、ボタンを次々とクリックしていくことで、画像を確認できます。

• 

  ゲームを遊んでいるところ - 同じ絵柄のカードを見つけよう

カード画像を作ろう

自作ゲームを作る上で最も楽しいのが、プログラミングに加えて素材集めでしょう。今回は、アニメ風の人物画像を画像の生成AI「Stable Diffusion」で作成してみました。「髪の色」と「どこに居るか」だけ指定して生成したものですが、綺麗な画像が作成できました。画像生成AIで作れば、手軽に画像素材を揃えることができて便利です。また、著作権フリーの画像を提供しているWebサイトもあるので利用できるでしょう。

• 

  画像生成AIで画像を作成したところ

カード素材を貯蔵庫にアップロードしよう

Webブラウザ上で動く「なでしこ」で画像を扱うには、Web上に画像をアップロードする必要があります。そこで、生成した画像を、なでしこ3貯蔵庫の素材アップロードページ(https://n3s.nadesi.com/index.php?action=upload)からアップロードします。なお、貯蔵庫で画像をアップロードするためには、こちらからアカウントを作成する必要があります。

ログインした後、上部にある「私の素材」をクリックすると、アップロードした素材の一覧を確認できます。それぞれの画像に、素材IDが振られているのを確認できます。連続でアップロードすれば連続のIDが得られます。

• 

  アップロードした画像を確認しているところ

カードを準備しよう

画像素材が用意できたら、いよいよプログラムを作りましょう。カードゲームを作る場合には、ゲーム内で扱うカードの一覧を配列変数で用意すると便利です。

例えば、画像神経衰弱の画面上に表示するカード20枚(10ペア)を作成してシャッフルしてみましょう。次のようなプログラムになります。

画像枚数=10
カードデッキ=[]
●カード配布とは：
　　カードデッキ=[]
　　Iを0から(画像枚数-1)まで繰り返す：
　　　　カードデッキにIを配列追加。# 1つ目
　　　　カードデッキにIを配列追加。# 2つ目
　　カードデッキを配列シャッフル。
カード配布して、カードデッキを表示。

簡易エディタ(https://nadesi.com/v3/start)で上記のプログラムを実行すると、次のように表示されます。0から9までの数字が2つずつあることを確認できるでしょう。実際のゲームでは、この0から9までの数字に画像を割り当てます。

• 

  10ペア20枚のカードをシャッフルして表示

なお、プログラムですが、配列変数「カードデッキ」に「配列追加」命令を使ってカード番号を2つずつ追加しておいて、最後に「配列シャッフル」命令でランダムに並び替えるという流れになっています。

プログラムを完成させよう

それでは、プログラムを完成させましょう。今回、画像素材としては、15枚の画像を用意したのですが、ゲームが難しくなってしまったので、10枚の画像を使うように難易度を調整しました。

以下が実際のプログラム全体です。こちらにもアップロードしてあります。コメントを含めて85行です。実際に遊べるゲームとしては短い方なので、少しずつ見ていきましょう。

# --------------------------------------------------
# 画像で当てる神経衰弱
# --------------------------------------------------
画像枚数=10
画像ID=548
画像URL=「https://n3s.nadesi.com/image.php?f=」
開始時間＝0
ボタン一覧=[]
選択ボタン=-1
有効ボタン=[]
カードデッキ=[]
出力エリア＝空
残りカード=0

開始ボタン＝「神経衰弱を開始する」のボタン作成。
開始ボタンをクリックした時には：
　　開始ボタン＄有効＝オフ。
　　ボタン一括作成。
　　ゲーム開始。

●ゲーム開始とは：
　　カード配布。
　　開始時間＝今
　　ボタン一覧を反復：
　　　　対象$有効=オン

●カード配布とは：
　　# カードの初期化処理 --- (*1)
　　カードデッキ=[]
　　Iを0から(画像枚数-1)まで繰り返す：
　　　　カードデッキにIを配列追加。# 1つ目
　　　　カードデッキにIを配列追加。# 2つ目
　　カードデッキを配列シャッフル。
　　残りカード=画像枚数*2

●ボタン一括作成とは：
　　# ボタンの一括作成 --- (*2)
　　もし、(ボタン一覧の要素数) > 0ならば、戻る。
　　改行作成。改行作成。
　　Iで0から(画像枚数＊2-1)まで繰り返す：
　　　　B=「{(I+1)を2でゼロ埋め}」のボタン作成。
　　　　B$ポケット=I
　　　　B$幅=4em; B$高さ=3em
　　　　Bをクリックした時には：
　　　　　　対象をカード選択処理。
　　　　ボタン一覧[I] = B
　　　　もし、(I % 5) = 4ならば、改行作成。
　　出力エリア＝「1枚目を選択してください」のラベル作成。

●(Bを)カード選択処理とは：
　　# カードを選択した時の処理 --- (*3)
　　NO=対象$ポケット
　　C=カードデッキ[NO]
　　対象$有効＝オフ
　　もし、選択ボタン<0ならば：
　　　　# 1枚目の選択
　　　　選択ボタン=NO
　　　　Cと「2枚目を選択してください」を画像表示処理。
　　違えば：
　　　　# 2枚目の選択
　　　　C2=カードデッキ[選択ボタン]
　　　　もし、C2＝Cならば：
　　　　　　結果＝「当たり⭐」
　　　　　　残りカード＝残りカード-2
　　　　　　もし、残りカード=0ならば：
　　　　　　　　SEC=開始時間と今の秒差
　　　　　　　　結果＝結果＆「{SEC}秒でゲームクリア！！！！」
　　　　　　　　開始ボタン＄有効＝オン
　　　　　　違えば：
　　　　　　　　結果＝結果＆「次のカードを選んでください。」
　　　　　　　　ボタン一覧[選択ボタン]にオフをDOM有効設定。
　　　　違えば：
　　　　　　結果＝「はずれ😿 1枚目のカードを選んでください。」
　　　　　　有効ボタン=[選択ボタン, NO]
　　　　　　1秒後には：
　　　　　　　　有効ボタンを反復：
　　　　　　　　　　ボタン一覧[対象]にオンをDOM有効設定。
　　　　選択ボタン=-1
　　　　Cと結果を画像表示処理。

●(CNOとMSGを)画像表示処理とは：
　　# 画像を表示する処理 --- (*4)
　　URL=「{画像URL}{画像ID+CNO}.png」
　　出力エリア$HTML=「<h3>{MSG}</h3>
　　<img src="{URL}" style="width:19em">」

プログラムを確認しましょう。(＊1)の部分は、先ほど確認したカードを配列として作成して、シャッフルする処理です。(＊2)ではカードに見立てた20個のボタンを連続で作成する処理です。5回に1回は「改行作成」命令を実行して、ボタンを改行するようにしています。

(＊3)ではカードをクリックした時の処理を記述します。変数「選択ボタン」によって、1枚目の選択か、2枚目の選択かを判別します。1枚目なら単に画像を表示して、2枚目なら同じ絵柄(実際にはカード番号)のカードかどうかを判定します。また、残りカードが0になったなら、ゲームクリアです。

(＊4)では画像を表示する処理を記述します。なでしこにも画像を表示する命令があるのですが、今回はHTMLの<img>タグを直接記述することにしました。

まとめ

以上、今回は、カードゲームの定番「神経衰弱」を少しアレンジして、画像の絵柄を揃えるゲームを作ってみました。画像の絵柄や画面レイアウトを工夫することで、もっと面白いゲームに改良することができるでしょう。ルールをアレンジしてみるのも良いでしょう。自作ゲーム作成は楽しいものなので、挑戦してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。