かげをみて、どのいきものか、あてるクイズゲームです✨
🚀ゲームのあそびかた
✅スタートボタンを おしてね！
✅どうぶつの「かげ」が出てくるよ
✅３つのボタンから、 こたえをえらぼう👆
✅ぜんぶせいかいできるかな？
※ このゲームはパソコン・タブレットでのプレイをおすすめしています
※ 「さいこうきろく」はページをとじるとリセットされます
📦ダウンロードして動かしてみよう
このミニゲームは
HTML / CSS / JavaScript だけで作られています。
一式まとめてダウンロードすれば、
そのままブラウザで動かすことができます。
インストール不要。
特別な環境もいりません。
📦ダウンロードはこちら
ZIPを解凍して中身を確認しよう
ダウンロードしたZIPファイルを解凍してみましょう。
中には、次のようなファイルが入っています。
- index.html
- style.css
- script.js
- readme.txt
- assets/saru.png（他9ファイル）
まずは index.html をダブルクリックしてみましょう。
ブラウザが開いて、ゲームがそのまま動きます。
🎨 問題をかえてみよう
このゲームでは、
出てくる生き物をじぶんでかえることができます✨
すきな画像でオリジナルのもんだいにして
もっとたのしくあそんでみよう😊
① 画像を用意する
問題にしたい画像を用意しましょう。
以下のような画像にしてください👇
- サイズは512pxの正方形
- png形式
- 背景は透過
作成したら「assets」フォルダの中に、入れます。
② script.jsをひらく
ダウンロードしたファイルの中にある
「script.js」というファイルをひらきましょう💡
※メモ帳やVSCode（おすすめ✨）などのソフトで開きます📝
③ プログラムを修正する
script.jsを開いたらquizDataという配列を探してください。
ここに問題を追加（または修正）します。
たとえば「いぬ」を追加するなら👇
…
{ name: "ペンギン", img: "assets/pengin.png" },
{ name: "カンガルー", img: "assets/kangaru.png" },
{ name: "いぬ", img: "assets/inu.png" }
];⚠️ 大事なポイント（カンマを忘れずに！）
カンマ（ , ）で区切って設定してください。
④ 保存してゲームを開く
保存したあと、index.html をダブルクリックすると、
追加した問題が出題されます👍
好きな生き物で試してみてください✨
遊びながら楽しく学ぼう！
いろいろなもんだいをつくって、
オリジナルのゲームを作ってみてください😊
これからも、いろいろなミニゲームを
少しずつ増やしていく予定です。
よかったら、ほかのゲームにもチャレンジしてみてください！
