カタカナどっち？えらんでクイズ🎮

えを見みて、ただしいカタカナをえらぶゲームだよ✨
にていることばの中なかから、正ただしいほうをえらぼう！

🚀ゲームのあそびかた

✅スタートボタンをおしてね！
✅えにあうカタカナをえらぼう👆
✅30びょうで何問なんもんせいかいできるかな？

※ このゲームはパソコン・タブレットでのプレイをおすすめしています
※ 「さいたんきろく」はページをとじるとリセットされます

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

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

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

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

📦ダウンロードはこちら

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

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

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

index.html
style.css
script.js
readme.txt
assets/bg.png

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

🎨 問題を追加してみよう

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

① script.js を開く

ダウンロードしたファイルの中にある
「script.js」というファイルをひらきましょう💡

ひらくときは👇

メモ帳（Windows）
テキストエディット（Mac）
VSCode（おすすめ✨）

などを使用してください。

② quizDataを探す

問題は quizDataという配列の中で管理されています。

配列には次のようなデータが用意されています👇

const quizData = [
  { emoji: "🍦", correct: "アイスクリーム", dummy: "マイスクリーム" },
  { emoji: "🍎", correct: "リンゴ", dummy: "リソゴ" },
  { emoji: "🍌", correct: "バナナ", dummy: "パナナ" },
...

③ 問題を追加する

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

...
  { emoji: "🥪", correct: "サンドイッチ", dummy: "サソドイッチ" },
  { emoji: "🚕", correct: "タクシー", dummy: "タクンー" },
  { emoji: "📺", correct: "テレビ", dummy: "テヘビ" },
  { emoji: "💻", correct: "パソコン", dummy: "パソコソ" },
  { emoji: "🛏️", correct: "ベッド", dummy: "ベツド" }
];

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

④ 保存してゲームを開く

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

このゲームはJavaScriptの配列を書き換えることで、
簡単に問題を追加できます。

お子さまに合った問題を作って遊んでみてください😊