【コピペで動く】福笑いゲームの作り方｜親子プログラミング

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

お正月、家族みんなで集まったときに、こんな経験はありませんか？

「福笑い、もう1回やりたい！」
「目がおでこに付いちゃった！　見て見て！」

目かくしで顔のパーツを置いて、できあがったヘンな顔にみんなで大笑いする福笑い。実はこの遊び、プログラミングで作るゲームにぴったりなんです。今回は、お正月の定番・福笑いを親子で作ってみましょう。

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

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

百聞は一見にしかず。まずは完成したゲームで遊んでみてください。「▶ スタート」を押すと、お手本の顔を3秒だけ見せます。よーく覚えてくださいね。お手本が消えたら、下のパーツをタップして選んで、顔の上にタップして置いていきます。目・まゆげ・鼻・口の6つ全部を置けたら終わりです。ぴったりの場所に置ければ100点、ズレるとだんだん点数が下がります。制限時間は60秒、全部置けたら残り時間もボーナスになります。600点満点＋ボーナスで、何点とれるか家族で競ってみてくださいね。

どうでしょう？　目がほっぺたに付いたり、口がおでこに行ったり、思わず笑っちゃう顔ができましたか？　このゲーム、実は3つの仕掛けだけでできています。次で種明かしをします。

今日つくるもの：福笑いゲーム

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

「▶ スタート」を押すと、お手本の顔が3秒だけ見える（覚えるのが勝負！）
下のパーツ（目・まゆげ・鼻・口の6つ）をタップして選び、顔の上にタップして置く
正しい場所に近いほど高得点。ぴったりなら100点、おしいと70点、ちょっとズレると40点、だいぶズレると10点
置いたパーツをタップすると拾い直して置き直せる
制限時間は60秒。全部置けたら残り時間1秒につき5点のボーナス

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

仕掛け1：住所（座標）。 目も鼻も口も、顔の中の「住所」を持っています。「左目は横が190番、縦が130番」というふうに、コンピュータは正しい住所を覚えているんです。置いた場所の住所と正しい住所を比べるから、点数が決まるんですね。

仕掛け2：「どれくらいズレた？」チェック（当たり判定）。 パーツを置くたびに、コンピュータが「正しい住所からどれくらい離れているか」を測っています。ズレが12ピクセル以内なら100点、25以内なら70点、45以内なら40点、それより遠ければ10点。定規で測るような計算を、コンピュータが一瞬でやっているんです。

仕掛け3：パーツの並びをシャッフル（ランダム）。 下に並ぶパーツの順番は、ゲームを始めるたびにバラバラに並び替わります。だから「左から順番に置けばいい」では済まないんです。毎回ちがう並びになるから、何度やっても新鮮なんですね。

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

コピペで動く完全コード

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

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

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

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

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

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

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

そのまま言えるセリフ集

「目や鼻がどこにあるかは、住所で決まってるんだ。住所が変わるから置く場所が変わるんだよ」（＝座標）
「コンピュータはね、置いた場所と正しい場所の距離をものさしで測ってるんだよ。近いほど点が高いんだ」（＝当たり判定・距離）
「パーツの並びが毎回バラバラなのは、コンピュータがくじ引きで並べ替えてるからだよ」（＝ランダム・シャッフル）
「お手本を3秒だけ見せるのは、頭の中の写真を試してるんだ。覚える力の勝負だね」（＝記憶）
「点数はね、コンピュータが頭の中のノートに書き足してるんだ」（＝変数・スコア）
「置き直しができるのは、消しゴムで消して書き直すのと同じだね」（＝やり直しができる設計）
「目がほっぺたに付いても大丈夫。ヘンな顔こそ福笑いのごちそうだよ」（＝失敗を楽しむ）

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

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

GAME_TIME = 60 … ゲームの長さ（秒）
PREVIEW_TIME = 3 … お手本を見せる秒数
PERFECT_DIST = 12 … ぴったり判定のズレ（ピクセル）。小さいほど厳しい
GOOD_DIST = 25 … おしい判定のズレ（ピクセル）
OK_DIST = 45 … ちょっとズレた判定のズレ（ピクセル）
PERFECT_SCORE = 100 … ぴったりのときの点数
GOOD_SCORE = 70 … おしいときの点数
OK_SCORE = 40 … ちょっとズレたときの点数
MISS_SCORE = 10 … だいぶズレたときの点数
BONUS_PER_SECOND = 5 … 全部置けたときの残り時間1秒あたりのボーナス

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

画面が真っ白 → ファイル名が game.html.txt になっていないか確認（Windowsは拡張子表示をオンに）
文字化けする → 保存するときの文字コードを「UTF-8」にする
パーツが置けない → まず下のパーツをタップして選んでから、顔の上をタップしてください。お手本が表示されている3秒間は置けません
お手本をもう一度見たい → 「▶ もう一度」を押すと、また3秒だけ見せてくれます

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

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

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

お手本を長く見せてやさしく → PREVIEW_TIME を 3 から 10 に（じっくり覚えられる）
お手本なしの超難問 → PREVIEW_TIME を 3 から 0 に（見たことのない顔を当てる勝負！）
短い勝負に → GAME_TIME を 60 から 30 に（30秒のスピード勝負）
甘めの採点に → PERFECT_DIST を 12 から 30 に（ちょっとズレても100点！）
鬼の厳しさに → PERFECT_DIST を 12 から 5 に（ほぼドンピシャじゃないと100点にならない）
点数をド派手に → PERFECT_SCORE を 100 から 1000 に（1000点ずつ増えて気持ちいい！）
ボーナス祭り → BONUS_PER_SECOND を 5 から 20 に（早く置けた人がもっとお得）

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

顔の色を変える → 顔を描く部分の "#ffecb3" を好きな色に変える（例："#ffcdd2" にするとピンクの顔）
背景の色を変える → background: #fff8e1 の色コードを変える（例：#fff8e1 を #e8f5e9 にすると若葉色）
口の色を変える → 口を描く部分の "#d32f2f" を "#1565c0" などに変える
ほっぺの色を変える → ほっぺの "rgba(255, 205, 210, 0.8)" の数字を変える（例：255, 205, 210 を 255, 224, 178 にするとオレンジほっぺ）

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

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

挑戦1：お手本を出さずに「記憶力ゼロ」から始める

お手本を見せる時間を0秒にするだけでも、ゲームはガラッと変わります。PREVIEW_TIME を 3 から 0 にしてみてください。お手本が一瞬も見えないので、「目って、顔のどのへんだっけ？」を頭の中のイメージだけで当てる勝負になります。家族でやると、意外な場所に目が付いて大笑いです。

挑戦2：制限時間を半分にして「スピード福笑い」にする

GAME_TIME を 60 から 30 にして、BONUS_PER_SECOND を 5 から 10 にしてみてください。30秒しかないのに、早く置けばボーナスが2倍。ゆっくり丁寧に置くか、スピード勝負でボーナスを狙うか、作戦が分かれます。おじいちゃん・おばあちゃんと対決すると盛り上がりますよ。

挑戦3：パーツの「正しい場所」を自分で変えて、オリジナルの顔を作る

コードの中に PART_DEFS という、パーツの正しい場所が書かれた表があります。たとえば左目の { type: "eye", label: "左目", x: 190, y: 130} の数字を変えると、「正しい場所」そのものが変わります。左目を x: 150, y: 180 にしたら、ほっぺたのあたりが正解のヘンな顔が「正解」になります。家族だけの「正解の顔」を作って、お正月にみんなで遊んでみてください。

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

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

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

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

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

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

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

まとめ

今日は、お正月の定番・福笑いを、コピペだけで作りました。おさらいすると、ゲームは「住所（座標）」「どれくらいズレたかチェック（当たり判定）」「パーツの並びをシャッフル（ランダム）」の3つの仕掛けでできています。この考え方は、ほかのどんなゲームにも応用できます。

お正月休み、家族みんなでヘンな顔を作って笑い合う時間は、きっと良い思い出になります。親子で「ああでもない、こうでもない」と言いながら改造する時間も、ぜひ楽しんでくださいね。

【コピペで動く】福笑いゲームの作り方｜子どもと作るはじめてのプログラミング