どっちかな？-名前にあう いきものをえらぼう-🦁

名前なまえにあう生いき物ものの画像がぞうをえらぼう👆

🚀ゲームのあそびかた

✅スタートボタンをおしてね！
✅おだいの名前なまえにあう生いき物ものをえらぼう！

※ このゲームはパソコン・タブレットでのプレイをおすすめしています

📦ダウンロードして動かしてみよう

このミニゲームは
HTML / CSS / JavaScript だけで作られています。

一式まとめてダウンロードすれば、
そのままブラウザで動かすことができます。

インストール不要。
特別な環境もいりません。

📦ダウンロードはこちら

ZIPを解凍して中身を確認しよう

ダウンロードしたZIPファイルを解凍してみましょう。

中には、次のようなファイルが入っています。

index.html
style.css
script.js
assets/画像ファイル（例：lion.png）
readme.txt

まずは index.html をダブルクリックしてみましょう。
ブラウザが開いて、ゲームがそのまま動きます。

🎨 問題を追加してみよう

このゲームでは、あらかじめいくつかの問題が用意されていますが、
自分で問題を追加して遊ぶこともできます✨

①画像を用意する。

たとえば、ティラノサウルスとトリケラトプスの問題を作りたい場合は、
tyranno.pngとtricera.pngという2つの画像を用意して、assetsフォルダに入れます

assets/tyranno.png
assets/tricera.png

② script.js を開く

問題は script.js の中で管理されています。

pairMasterという配列の中に、次のようなデータがあります👇

const pairMaster = [
  {
    pairId: "tako_ika",
    correctId: "tako",
    prompt: "たこはどっち？",
    left: { id: "tako", label: "たこ", file: "assets/tako.png" },
    right: { id: "ika", label: "いか", file: "assets/ika.png" }
  },
...

③ 問題を追加する

配列の一番最後に、以下のように新しい問題を追加できます👇

...
  {
    pairId: "kabutomushi_kuwagata",
    correctId: "kabutomushi",
    prompt: "かぶとむしはどっち？",
    left: { id: "kabutomushi", label: "かぶとむし", file: "assets/kabutomushi.png" },
    right: { id: "kuwagata", label: "くわがた", file: "assets/kuwagata.png" }
  },
  {
    pairId: "tyranno_tricera",
    correctId: "tyranno",
    prompt: "ティラノサウルスはどっち？",
    left: { id: "tyranno", label: "きょうりゅう", file: "assets/tyranno.png" },
    right: { id: "tricera", label: "とら", file: "assets/tricera.png" }
  }
];

⚠️ 大事なポイント（カンマを忘れずに！）
問題を追加するときは、前の問題の最後にカンマ「,」をつける必要があります。

④ 保存してゲームを開く

保存したあと、index.html をダブルクリックすると、
新しく追加した問題がランダムで出てくるようになります🦕

💡 ポイント