ゼロからはじめてみる日本語プログラミング「なでしこ」 第89回 画像で遊ぶ神経衰弱を作ろう

ゲームを作るのは楽しいものです。今回はカードゲームの定番「神経衰弱」を作ってみましょう。その際、数字ではなく画像を記憶するゲームにしてみましょう。10ペア合計20枚の画像を利用して位置を記憶するゲームです。
○画像で遊べる神経衰弱を作ろう
カードゲームの定番「神経衰弱」とは、テーブルにあるたくさんのカードから同じ数字のペアを探すカードゲームです。テーブルにあるカードの中から二枚のカードを選び、そのカードが同じペアならば、そのカードが獲得できます。全てのカードを獲得すればゲームクリアです。
今回作るゲームでは、数字の代わりに画像の絵柄のペアを探すというものにしてみましょう。10枚の画像カードを用意しておいて、同じ絵柄を当てていくものにします。また、一人で遊べるものとし、ゲームクリアまでの秒数を競うというものにしてみます。
何を作るのか確認するために、完成版のゲームを確認してみましょう。こちら(https://n3s.nadesi.com/widget.php?2991&run=1)で遊ぶことができるようになっています。「神経衰弱を開始する」のボタンを押すと、ゲームが始まります。カードに見立てたボタンが20個ありますので、ボタンを次々とクリックしていくことで、画像を確認できます。
○カード画像を作ろう
自作ゲームを作る上で最も楽しいのが、プログラミングに加えて素材集めでしょう。今回は、アニメ風の人物画像を画像の生成AI「Stable Diffusion」で作成してみました。「髪の色」と「どこに居るか」だけ指定して生成したものですが、綺麗な画像が作成できました。画像生成AIで作れば、手軽に画像素材を揃えることができて便利です。また、著作権フリーの画像を提供しているWebサイトもあるので利用できるでしょう。
○カード素材を貯蔵庫にアップロードしよう
Webブラウザ上で動く「なでしこ」で画像を扱うには、Web上に画像をアップロードする必要があります。そこで、生成した画像を、なでしこ3貯蔵庫の素材アップロードページ(https://n3s.nadesi.com/index.php?action=upload)からアップロードします。なお、貯蔵庫で画像をアップロードするためには、こちらからアカウントを作成する必要があります。
.