ジグソーパズルをそろえよう！
🚀ゲームのあそびかた
✅スタートボタンをおして ジグソーパズルを そろえよう！
✅ピースをドラッグして ただしいばしょに ならべよう！
✅はやくそろえて さいこうきろくをめざそう！
📦ダウンロードして動かしてみよう
このミニゲームは
HTML / CSS / JavaScript だけで作られています。
一式まとめてダウンロードすれば、
そのままブラウザで動かすことができます。
インストール不要。
特別な環境もいりません。
📦ダウンロードはこちら
ZIPを解凍して中身を確認しよう
ダウンロードしたZIPファイルを解凍してみましょう。
中には、次のようなファイルが入っています。
- index.html
- style.css
- script.js
- assets/画像ファイル（例：puzzle.png）
- readme.txt
まずは index.html をダブルクリックしてみましょう。
ブラウザが開いて、ゲームがそのまま動きます。
🎨 画像を変えてみよう
このゲームでは、ねずみの画像を使っていますが、
別な画像に変えることもできます。
たとえば、「kyoryu.png」という恐竜の画像を用意して、style.cssの
background-image:url("assets/puzzle.png");を
background-image: url("assets/kyoryu.png");に修正して保存します。
※129行目と151行目の2か所あるので、２つとも修正してください。
index.htmlをダブルクリックすると、恐竜の画像が表示されます🦕
🔧 プログラムを修正してみよう
プログラムに興味がでたら、テキストエディタ（メモ帳やVSCodeなど）でファイルを開いてみましょう。
コメント付きのプログラムを見ることができます。
最初は完全に理解しなくても大丈夫です。
「どんなことが書いてあるのかな？」と眺めるだけでOKです。
次に、少しだけ修正してみましょう。
たとえば、script.jsの
// 4×4 のパズル
let grid = 4;を
// 6×6 のパズル
let grid = 6;に変えると、
36ピースのパズルとして遊ぶこともできます💡
遊びながら楽しく学ぼう！
ゲームを通して、
楽しく学んでもらえたらうれしいです✨
これからも、いろいろなミニゲームを
少しずつ増やしていく予定です。
ぜひ他のゲームにもチャレンジしてみてください！
