もじならべクイズ✨

バラバラになったひらがなを、
正ただしいじゅんばんにならべて、ことばをつくろう！

🚀ゲームのあそびかた

✅スタートボタンをおしてね！
✅ひらがなをドラッグして、ならべかえよう👆
✅10問もんせいかいしたらおしまい！
✅はやくクリアして、さいたんきろくをめざそう✨

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

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

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

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

📦ダウンロードはこちら

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

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

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

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

① script.js を開く

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

ひらくときは👇

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

② quizDataを探す

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

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

const quizData = [
  { emoji: "🐟", answer: "さかな" },
  { emoji: "🐶", answer: "こいぬ" },
  { emoji: "🐱", answer: "こねこ" },
...

③ 問題を追加する

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

...
  { emoji: "⛄", answer: "ゆきだるま" },
  { emoji: "🍉", answer: "すいか" },
  { emoji: "🍊", answer: "みかん" },
  { emoji: "🚃", answer: "でんしゃ" }
];

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

④ 保存してゲームを開く

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

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

お子さまと一緒に「どんな問題にする？」と考えることで、
語彙力や発想力を育てることにもつながります。

ゲームを通して、
楽しく学んでもらえたらうれしいです✨

これからも、いろいろなミニゲームを
少しずつ増やしていく予定です。

ぜひ他のゲームにもチャレンジしてみてください！