【コピペで動く】クリスマス神経衰弱の作り方｜親子プログラミング

こんにちは！プログラミング未経験パパのcospaoです。

クリスマスが近づくと、家の中がなんだかワクワクしませんか？

「サンタさん、どこにいるかな？」
「このカード、さっき見た気がする！　……あれ、どこだっけ？」

トランプの神経衰弱（しんけいすいじゃく）は、カードをめくって同じ絵柄をそろえる、昔ながらの遊び。実はこの遊び、プログラミングで作るゲームにぴったりなんです。今回は、サンタやツリーの絵柄で遊べるクリスマス神経衰弱を、親子で作ってみましょう。

むずかしい準備は一切ありません。ここにあるコードをコピーして、ファイルに貼り付けるだけ。パソコンでもスマホでも動きます。プログラミングが初めてのパパ・ママでも大丈夫です。クリスマスまでのお楽しみに、家族でワイワイ遊べますよ。

まずは完成品で遊んでみよう！

百聞は一見にしかず。まずは完成したゲームで遊んでみてください。「▶ スタート」を押すと、16枚のカードがシャッフルされて並びます。カードをタップしてめくり、同じ絵柄のペアをそろえましょう。ペア成立で100点、8ペア全部そろえればクリアです。制限時間は60秒、早くそろえるほど残り時間のボーナスが増えます。めくった回数も数えているので、「少ない回数でクリアできるか」も家族で競ってみてくださいね。

どうでしょう？　「さっきここにサンタがいたはず！」と頭の中を探す感じ、楽しめましたか？　このゲーム、実は3つの仕掛けだけでできています。次で種明かしをします。

今日つくるもの：クリスマス神経衰弱ゲーム

ルールはとても簡単です。

「▶ スタート」を押すと、16枚のカードがバラバラに並び替えられて登場します
カードをタップして2枚めくる。同じ絵柄ならペア成立で100点、そろったカードは表向きのまま残ります
ちがう絵柄なら、0.8秒後に2枚とも裏返しになります（だから「どこに何があったか」を覚えるのが勝負！）
8ペア全部そろえればクリア。残り時間1秒につき10点のボーナスが付きます
制限時間は60秒。時間切れになったら、そろったペアの数と点数で勝負です

なぜこのゲームが動くの？（3つの仕掛け）

仕掛け1：カードの並びは「表」（配列）。 16枚のカードは、コンピュータの中では「🎅、🎄、⛄……」という絵柄の表（リスト）になっています。プログラミングではこの表のことを「配列」と呼びます。ゲームが始まるたびに、この表をシャッフルして並び替えるから、毎回ちがう並びになるんです。カードをめくるたびに、コンピュータは「表の何番目のカードかな？」と番号で探しています。

仕掛け2：「いま、どうなっている？」の管理（状態管理）。 コンピュータは、カード1枚1枚について「裏向きか、表向きか、もうそろったか」をずっと覚えています。2枚めくったときだけ「同じ絵柄かな？」と比べるのも、このおかげです。ハズレのカードが裏返る0.8秒のあいだは「ちょっと待ってね」とめくれないようにするのも、状態を管理しているからできることなんです。

仕掛け3：残り時間を数えるタイマー。 1秒ごとに「あと何秒？」を数えて、0になったらゲーム終了。時間を数える仕組みは、シューティングゲームやもぐらたたきでも使ったのと同じものです。タイマーのおかげで「急がなきゃ！」というドキドキが生まれます。

この3つが分かればOK。あとはコードをコピペするだけです。

コピペで動く完全コード

では、ソースコードをお渡しします。やり方は3ステップです。

下のボックスのコードを全部コピーする（ボックスをクリックすると全選択されます）
Windowsならメモ帳、Macならテキストエディットに貼り付ける（Macは「標準テキスト」形式にしてください）
ファイル名を game.html として保存し、ブラウザで開く

▼ この下のコードを全選択してコピーしてください ▼

↑ ボックスの中をクリックすると全選択されます。

開いて「▶ スタート」を押せば、さっき遊んだゲームそのままが動きます。もし真っ白な画面になったら、ファイル名が game.html になっているか、文字化けしていないかを確認してみてください（直し方はチートシートにも書きました）。

親のチートシート（このまま言ってあげて）

お子さんに説明するとき、そのまま使えるセリフ集です。専門用語も、身近なものに言い換えてあります。

そのまま言えるセリフ集

「カードの並びはね、コンピュータの中の出席簿みたいな表に書いてあるんだ。表の順番を変えるから、毎回ちがう並びになるんだよ」（＝配列・シャッフル）
「コンピュータはね、カード1枚1枚のいまの様子をぜんぶ覚えてるんだ。裏向きか表向きか、もうそろったか。だから2枚めくったときに比べられるんだよ」（＝状態管理）
「ハズレのときにすぐ裏返らないのは、コンピュータが『ちょっと待ってね』って言ってるからだよ。0.8秒だけ待ってくれるんだ」（＝待ち時間）
「点数はね、コンピュータが頭の中のノートに書き足してるんだ」（＝変数・スコア）
「時間が減っていくのは、コンピュータが1秒ごとに数を数えてるからだよ」（＝タイマー）
「どこに何があったか覚えるのって、頭の中に写真を撮るのとおんなじだね」（＝記憶）
「めくった回数が少ないほどすごいのは、ムダなめくりが少ない＝よく覚えてたってことだからだよ」（＝めくった回数）

数字の意味だけ、こっそり確認

コードの一番上に、数字がまとめて書いてあります。ここが「ゲームのツマミ」です。

EMOJIS = ["🎅", "🎄", "⛄", "🎁", "🦌", "🔔", "❄️", "⭐"] … カードの絵柄（8種類）
PAIRS = 8 … ペアの数（絵柄の数と同じ）
GAME_TIME = 60 … ゲームの長さ（秒）
MATCH_SCORE = 100 … ペア成立でもらえる点数
FLIP_BACK_MS = 800 … ハズレのときに裏返すまでの時間（ミリ秒）。1000で1秒
BONUS_PER_SECOND = 10 … クリアしたときの残り時間1秒あたりのボーナス

困ったときのチェックリスト

画面が真っ白 → ファイル名が game.html.txt になっていないか確認（Windowsは拡張子表示をオンに）
文字化けする → 保存するときの文字コードを「UTF-8」にする
カードがめくれない → 「▶ スタート」を押しましたか？　ハズレのカードが裏返る0.8秒のあいだは、めくれません
絵文字が□になる → 古いパソコンやブラウザだと絵文字が出ないことがあります。新しいブラウザで開いてみてください

子どもとミニ改造してみよう！

動いたら、次は改造です。コードの一番上の「★ここを変えると改造できるよ」の場所だけを触るので、安心して挑戦してください。うまくいかなくなったら、もう一度コピペし直せば元通りです。

レベル1：数字を変えてみよう

やさしく・ゆっくり覚えたい → GAME_TIME を 60 から 120 に（2分あればじっくり覚えられる）
スピード勝負に → GAME_TIME を 60 から 30 に（30秒のドキドキ勝負）
ハズレをじっくり見たい → FLIP_BACK_MS を 800 から 2000 に（2秒間、絵柄を見て覚えられる）
記憶力勝負・一瞬だけ → FLIP_BACK_MS を 800 から 300 に（0.3秒しか見られない！）
点数をド派手に → MATCH_SCORE を 100 から 1000 に（1000点ずつ増えて気持ちいい！）
ボーナス祭り → BONUS_PER_SECOND を 10 から 50 に（早くそろえた人がもっとお得）

レベル2：見た目を変えてみよう

カードの絵柄を変える → EMOJIS の中の絵文字を好きなものに入れ替える（例："🎅" を "🐶" にすると犬のカード。8種類のまま数を変えないのがコツ）
お正月バージョンにする → EMOJIS を ["🎍", "🎌", "⛩️", "🍊", "🐍", "🎴", "🪁", "🍶"] にする（お正月の絵柄で福笑いの記事と合わせて遊べます）
カードの裏側の色を変える → #e53935 や #c62828 の色コードを変える（例：#e53935 を #1565c0 にすると青い裏側）
背景の色を変える → background: #fff8e1 の色コードを変える（例：#fff8e1 を #e3f2fd にすると冬の水色）

レベル3：物足りない人への挑戦状（ルールを自分で作る）

「簡単すぎる？？」「もっと難易度を上げたい？？」——大丈夫、全部この記事のコードで、自分で好きなように変えられます。やり方はこの3つ。ここからはコードの書き換えに挑戦する上級編です。

挑戦1：ペアの数を減らして「はじめての神経衰弱」にする

EMOJIS を4種類だけにして、PAIRS を 8 から 4 にしてみてください。たとえば ["🎅", "🎄", "⛄", "🎁"] の4つだけにすると、カードは8枚になります。小さい子や、はじめて遊ぶ人にはちょうどいいやさしさです。逆に「もっと多くしたい」と思ったら、絵柄を10種類に増やして PAIRS を 10 にする手もあります（カードは20枚になります）。

挑戦2：「めくった回数」で勝負するルールにする

画面には「めくった回数」が表示されています。家族で対決するときは、「時間」ではなく「めくった回数が少ないほうが勝ち」にしてみてください。8ペアそろうのに、最小で8回（1回2枚×8ペア）。無駄なく覚えてめくれば、回数はどんどん減ります。「何回でクリアできた？」を記録して、家族のベスト記録を競うのも楽しいですよ。

挑戦3：ハズレのときに「ペナルティ」を付ける

コードの中の、ハズレのときの場所（lock = true; のあたり）を探してみてください。そこに score = Math.max(0, score - 10); と scoreEl.textContent = score; の2行を足すと、ハズレのたびに10点引かれるルールになります（Math.max(0, ...) は「0より下がらないようにする」おまじないです）。

お子さんが考えたルールを、ぜひ数字や書き換えに落とし込んでみてください。「どうすればそうなる？」を考えるのが一番の勉強です

親御さんへのメッセージ：失敗こそが最高の先生

改造して画面が真っ白になっても、決して叱らないでください。むしろ「おめでとう！壊れる理由を見つけたね！」と声をかけてあげてほしいのです。プログラマーにとってエラーは敵ではなく、「コンピュータは言われた通りにしか動かない」ことを教えてくれる正直な先生です。「どこを変えたから動かなくなったのかな？」と一緒に探す時間こそが、論理的に考える力を育てます。

もっと「つくる遊び」を広げたいお子さんへ（PR）

※このセクションは広告（アフィリエイトリンク）を含みます。

今日みたいに「自分で作って動かす」遊びが好きなお子さんには、毎月届くSTEAM教材「ワンダーボックス」も相性がいいです。プログラミングや数理パズル、アート、理科実験など、作って考える教材がセットで届きます。まずは体験教材から試せます。

プログラミングやアートで感性が育つ

まとめ

今日は、クリスマスの絵柄で神経衰弱を、コピペだけで作りました。おさらいすると、ゲームは「カードの並びは表（配列）」「いま、どうなっている？の管理（状態管理）」「残り時間を数えるタイマー」の3つの仕掛けでできています。この考え方は、ほかのどんなゲームにも応用できます。

クリスマスまであと少し。家族みんなで「どこにサンタがいたっけ？」とワイワイ言いながら遊ぶ時間は、きっと良い思い出になります。親子で「ああでもない、こうでもない」と言いながら改造する時間も、ぜひ楽しんでくださいね。

【コピペで動く】クリスマス神経衰弱ゲームの作り方｜子どもと作るはじめてのプログラミング