虫をつかまえよう！🐞

くさむらのなかにむしたちがかくれているよ🌿
おだいのむしをさがして、どんどんタッチしよう！

🚀ゲームのあそびかた

✅スタートボタンをおしてね！
✅おだいのむしをみつけてタッチしよう👆
✅20びょうで何匹なんびきつかまえられるかな？

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

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

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

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

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

📦ダウンロードはこちら

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

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

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

index.html
style.css
script.js
readme.txt
assets/bg.png
assets/batta.png
assets/bee.png
assets/cho.png
assets/kabutomushi.png
assets/tentoumushi.png

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

🎨 むしを追加してみよう

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

①画像を用意する。

まずは、追加したい虫の画像を用意します。

画像サイズは 512pxくらいの正方形がおすすめです。

拡張子は .png または .jpg を使いましょう。
背景を透明にしたい場合は .png がおすすめです。

② 画像をフォルダに入れる

ダウンロードしたゲームのフォルダの中にある
「assets」フォルダに画像を入れます。

③プログラムを修正する

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

以下のようなアプリでひらけます。👇

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

script.jsを開いたらbugDataListという配列を探してください。

画面に表示される虫は bugDataListという配列の中で管理されています。

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

const bugDataList = [
  { name: "カブトムシ", file: "kabutomushi.png" },
  { name: "テントウムシ", file: "tentoumushi.png" },
  { name: "ミツバチ", file: "bee.png" },
  { name: "チョウチョ", file: "cho.png" },
  { name: "バッタ", file: "batta.png" }
];

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

const bugDataList = [
  { name: "カブトムシ", file: "kabutomushi.png" },
  { name: "テントウムシ", file: "tentoumushi.png" },
  { name: "ミツバチ", file: "bee.png" },
  { name: "チョウチョ", file: "cho.png" },
  { name: "バッタ", file: "batta.png" },
  { name: "カマキリ", file: "kamakiri,png" }
];

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

④ 保存してゲームを開く

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

お子さまの好きな昆虫を追加して遊んでみてください😊