【コピペで動く】もぐらたたきゲームの作り方|子どもと作るはじめてのプログラミング

もぐらたたきゲーム 親子プログラミング ゲーム

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

お子さんとゲームセンターやお祭りで、こんな経験はありませんか?

「もぐらたたき、もう1回やりたい!」
「こんどはおうちでもやりたいな」

その「もう1回!」の気持ち、実はプログラミングで作るゲームでも味わえるんです。今回は、穴からひょっこり出てくるもぐらをタップして得点を競う、昔からみんなに愛される「もぐらたたき」を親子で作ってみましょう。

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

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

百聞は一見にしかず。まずは完成したゲームで遊んでみてください。「▶ スタート」を押すと、9つの穴からもぐらが飛び出します。出てきたもぐらをマウスや指でタップしましょう。普通のもぐらは10点、キラキラの金のもぐらは30点。ただし、たまに💣爆弾も顔を出します。たたくとその場でゲームオーバー!🍄どくキノコをたたくと15点マイナス、何も出ていない穴をたたく「空振り」も5点マイナスです。金のもぐらは30点とお得な反面、一瞬で引っ込む激ムズ仕様。よく見て、すばやくたたいてくださいね。制限時間は30秒、だんだん速くなりますよ。

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

今日つくるもの:もぐらたたきゲーム

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

  • 9つの穴から、もぐらがランダムにひょっこり出てくる
  • 出てきたもぐらをタップすると10点
  • たまに出る金のもぐらは30点とお得。ただし一瞬で引っ込む激ムズ
  • たまに💣爆弾も出てくる。たたくとゲームオーバー!
  • 🍄どくキノコをたたくと15点マイナス
  • 何も出ていない穴をたたくと「空振り」で5点マイナス
  • 制限時間は30秒。時間が進むほど、もぐらが速く出てくる

なぜこのゲームが動くの?(3つの仕掛け)

仕掛け1:サイコロ(ランダム)。 もぐらが「どの穴から」「金のもぐらかどうか」は、コンピュータがサイコロを振って決めています。だから毎回ちがう展開になります。

仕掛け2:砂時計(タイマー)。 30秒を1秒ずつ数えて、0になったらゲーム終了。コンピュータは「1秒たったら、残りを1つ減らす」をくり返しています。

仕掛け3:「当たった?」チェック(タップ判定)。 穴をタップした瞬間、「その穴にもぐらが出ていたか」をチェックして、出ていたら点数を増やしています。ゲームの気持ちよさは、このチェックが作っているんです。

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

コピペで動く完全コード

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

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

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

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

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

親のチートシート(このまま言ってあげて)

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

そのまま言えるセリフ集

  • 「もぐらがどの穴から出るかは、サイコロで決めてるんだ。だから毎回ちがうんだよ」(=ランダム)
  • 「30秒たったら終わるのは、砂時計が落ちきるのと同じだね」(=タイマー)
  • 「タップした瞬間に、コンピュータが『その穴にもぐらいた?』って見張ってるんだよ」(=タップ判定)
  • 「点数はね、コンピュータが頭の中のノートに書き足してるんだ」(=変数・スコア)
  • 「金のもぐらがたまにしか出ないのは、当たりくじが少ないのと同じだね」(=確率)
  • 「爆弾はたたいたらダメだよ。たたくのは、点が増えるものだけだね」(=見分ける力)
  • 「金のもぐらは一瞬しか出ないよ。出るのをスタンバイして待つのがコツだね」(=集中力)
  • 「あわてて連打すると、空振りで点が減っちゃう。よく見てからたたくんだよ」(=落ち着く力)

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

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

  • GAME_TIME = 30 … ゲームの長さ(秒)
  • MOLE_SCORE = 10 … 普通のもぐら1匹の点数
  • GOLD_SCORE = 30 … 金のもぐら1匹の点数
  • GOLD_RATE = 0.15 … 金のもぐらの割合(0.15は「だいたい7匹に1匹」)
  • BOMB_RATE = 0.15 … 爆弾の割合(0.15は「だいたい7回に1回」)
  • BOMB_END = true … 爆弾ルール。trueはゲームオーバー、falseにすると減点方式になる
  • BOMB_PENALTY = 20 … 減点方式のときの、爆弾のマイナス点
  • POISON_RATE = 0.12 … どくキノコの割合(0.12は「だいたい8回に1回」)
  • POISON_PENALTY = 15 … どくキノコのマイナス点
  • MISS_PENALTY = 5 … 空振りのマイナス点(0にすると空振り減点なし)
  • SPAWN_MS = 800 … もぐらが出てくる間隔。小さいほどたくさん出る
  • SHOW_MS = 900 … もぐらが顔を出している時間。小さいほどすぐ引っ込む
  • GOLD_SHOW_MS = 350 … 金のもぐらが出ている時間。ふつう(900)よりずっと短い激ムズ設定

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

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

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

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

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

  • 長く遊びたい → GAME_TIME を 30 から 60 に(60秒モード)
  • 点数をド派手に → MOLE_SCORE を 10 から 100 に(100点ずつ増えて気持ちいい!)
  • もぐら大発生モード → SPAWN_MS を 800 から 400 に(2倍出てくる)
  • ゆっくり練習モード → SHOW_MS を 900 から 1500 に(もぐらが長く顔を出す)

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

  • もぐらを変える → コードの中の "🐹" を "🐰" や "🐱"、"🍓" に変えると、別の生き物や食べ物のゲームに変身
  • 金のもぐらを変える → "⭐" を "💎" に変えると、ダイヤモンド探しゲームに
  • 背景の色を変える → background: #e8f5d8 の色コードを変える(例:#e8f5d8 を #ffe0b2 にすると夕方色)

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

  • 金のもぐら祭り → GOLD_RATE を 0.15 から 0.5 に(2匹に1匹が金のもぐら)
  • 爆弾ラッシュ → BOMB_RATE を 0.15 から 0.4 に(爆弾だらけでドキドキ)
  • やさしい減点方式 → BOMB_END を true から false に(爆弾は20点マイナスで、ゲームは続く)
  • 爆弾こわいモード → 減点方式のときに BOMB_PENALTY を 20 から 50 に(1回で大逆転されちゃう)
  • 空振り減点をなくす → MISS_PENALTY を 5 から 0 に(小さい子向けのやさしい設定)
  • どくキノコ祭り → POISON_RATE を 0.12 から 0.3 に(見分けるのが大変!)
  • 金のもぐらを少しだけやさしく → GOLD_SHOW_MS を 350 から 600 に(それでも速い!)
  • 鬼モード → SPAWN_MS を 400 に、SHOW_MS を 600 に(速くてすぐ引っ込む、反射神経勝負)
  • お子さんが考えたルールを、ぜひ数字に落とし込んでみてください。「どうすればそうなる?」を考えるのが一番の勉強です

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

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

「もっと本格的にゲームを作りたい」と言い出したら(PR)

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

コピペで作る楽しさに目覚めたお子さんには、オンライン教材「デジタネ」という次のステップもあります。マイクラやRobloxを使いながら、ゲーム作りを通してプログラミングを学べる小中学生向けの教材です。無料トライアルがあるので、合うかどうかは試してから判断できます。

オンラインで学ぶ!小中学生向けプログラミング「デジタネ」

まとめ

今日は、穴から飛び出すもぐらをタップするゲームを、コピペだけで作りました。おさらいすると、ゲームは「サイコロ(ランダム)」「砂時計(タイマー)」「当たった?チェック(タップ判定)」の3つの仕掛けでできています。この考え方は、ほかのどんなゲームにも応用できます。

家族でスコアを競うと、もっと盛り上がりますよ。親子で「ああでもない、こうでもない」と言いながら改造する時間が、きっと良い思い出になります。

あわせて読みたい

[ad_kids_tech]

コメント

タイトルとURLをコピーしました