【コピペで動く】5分で作れるプレゼントキャッチゲーム！子どもにドヤ顔で教えるプログラミング

こんにちは！「世界一わかりやすいプログラミング解説」へようこそ！

突然ですが、お父さん、お母さん。クリスマスが近づくと、こんな会話が聞こえてきませんか？

「サンタさん、今年も来てくれるかな？」
「ぼくもプレゼント配る側になってみたい！」

その「配る側」のワクワク、実はプログラミングで作るゲームでも味わえるんです。今回は、空から落ちてくるプレゼントをカゴで受け止める、シンプルで盛り上がるゲームを親子で作ってみましょう。

むずかしい準備は一切ありません。ここにあるコードをコピーして、ファイルに貼り付けるだけ。パソコンでもスマホでも動きます。プログラミング未経験のパパ・ママでも、お子さんにドヤ顔で教えられますよ。

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

百聞は一見にしかず。まずは完成したゲームで遊んでみてください。「▶ スタート」を押すと、プレゼントが落ちてきます。カゴをマウスや指で動かして受け止めましょう。⭐は高得点、💣を受けると減点です。

どうでしょう？たった30秒のゲームですが、「あと1回！」と言いたくなる面白さがありますよね。このゲーム、実は3つの仕掛けだけでできています。次で種明かしをします。

1. 今日つくるもの：プレゼントキャッチゲーム

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

空からプレゼント🎁が落ちてくる（たまに⭐と💣も混ざっている）
カゴ🧺を左右に動かして、プレゼントを受け止めると10点
⭐はレアもので30点。💣を受けると10点マイナス
制限時間は30秒。時間が経つほど落ちるスピードが上がる

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

仕掛け1：パラパラ漫画。 ゲーム画面は、実は静止画を1秒間に何十枚も描き替えているだけです。少しずつ位置をずらして描くから、物が落ちて見えるんですね。

仕掛け2：サイコロ（ランダム）。 プレゼントが「どこに」「どれくらいの速さで」落ちるかは、コンピュータがサイコロを振って決めています。だから毎回ちがう展開になります。

仕掛け3：「重なった？」チェック（当たり判定）。 プレゼントとカゴの位置が重なった瞬間に「キャッチ！」と判定して、点数を増やしています。ゲームの気持ちよさは、このチェックが作っているんです。

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

2. コピペで完成！完全コード

では、魔法の呪文（ソースコード）をお渡しします。やり方は3ステップです。

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

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

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

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

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

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

そのまま言えるセリフ集

「コンピュータはね、絵をすごい速さで描き替えて、物が落ちてるように見せてるんだよ」（＝パラパラ漫画／アニメーション）
「プレゼントが出てくる場所は、サイコロで決めてるんだ。だから毎回ちがうんだよ」（＝ランダム）
「カゴとプレゼントがピタッと重なった瞬間に、『取れた！』ってコンピュータが数えてるんだよ」（＝当たり判定）
「点数はね、コンピュータが頭の中のノートに書き足してるんだ」（＝変数・スコア）
「30秒たったら終わるのは、砂時計が落ちきるのと同じだね」（＝タイマー）

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

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

GAME_TIME = 30 … ゲームの長さ（秒）
PRESENT_SCORE = 10 … プレゼント1個の点数
SPAWN_MS = 800 … 物が落ちてくる間隔。小さいほどたくさん落ちる
BASE_SPEED = 170 … 落ちる速さの基本。大きいほど速い
BOMB_RATE = 0.18 … 爆弾の割合（0.18は「だいたい5個に1個」）

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

画面が真っ白 → ファイル名が game.html.txt になっていないか確認（Windowsは拡張子表示をオンに）
文字化けする → 保存するときの文字コードを「UTF-8」にする
絵文字が出ない → 古いパソコンでは絵文字フォントがない場合があります。そのときは改造編の「絵文字を変える」で別の文字に

4. 子どもとミニ改造（ハッキング）してみよう！

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

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

長く遊びたい → GAME_TIME を 30 から 60 に（60秒モード）
点数をド派手に → PRESENT_SCORE を 10 から 100 に（100点ずつ増えて気持ちいい！）
プレゼント大雨モード → SPAWN_MS を 800 から 400 に（2倍落ちてくる）
ゆっくり練習モード → BASE_SPEED を 170 から 100 に

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

落ちてくる物を変える → コードの中の "🎁" を "🍎" や "🍓"、"⚽" に変えると、くだもの狩りゲームに変身
カゴを変える → "🧺" を "🐶" に変えると、ワンちゃんが受け止めるゲームに
背景の色を変える → #gameCanvas の近くの色コードを変える（例：#0b2a4a を #4a0b2a にすると夕焼け色）

レベル3：ルールを変えてみよう

やさしいモード → BOMB_RATE を 0.18 から 0 に（爆弾が出なくなる）
鬼モード → BOMB_RATE を 0.4 に、STAR_SCORE を 30 から 500 に（爆弾だらけ、でも星が超お宝）
お子さんが考えたルールを、ぜひ数字に落とし込んでみてください。「どうすればそうなる？」を考えるのが一番の勉強です

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

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

5. まとめ

今日は、落ちてくるプレゼントを受け止めるゲームを、コピペだけで作りました。おさらいすると、ゲームは「パラパラ漫画」「サイコロ（ランダム）」「重なった？チェック（当たり判定）」の3つの仕掛けでできています。この考え方は、ほかのどんなゲームにも応用できます。

次回は、反射神経が勝負のあのゲームを作る予定です。お楽しみに。親子で「ああでもない、こうでもない」と言いながら改造する時間が、きっと良い思い出になりますよ。