カードをめくって、おなじ「ひらがな」をさがそう！
🚀ゲームのあそびかた
✅スタートボタンをおしてね！
✅カードをえらぶと、ひらがなが見れるよ👆
✅２枚えらんで、おなじ文字だったら「せいかい」だよ！
✅ぜんぶそろったらクリア！さいたんきろくをめざそう！
※ このゲームはパソコン・タブレットでのプレイをおすすめしています
※ 「さいたんきろく」はページをとじるとリセットされます
📦ダウンロードして動かしてみよう
このミニゲームは
HTML / CSS / JavaScript だけで作られています。
一式まとめてダウンロードすれば、
そのままブラウザで動かすことができます。
インストール不要。
特別な環境もいりません。
📦ダウンロードはこちら
ZIPを解凍して中身を確認しよう
ダウンロードしたZIPファイルを解凍してみましょう。
中には、次のようなファイルが入っています。
- index.html
- style.css
- script.js
- readme.txt
- assets/bg.png
- assets/card-back.png
まずは index.html をダブルクリックしてみましょう。
ブラウザが開いて、ゲームがそのまま動きます。
🎨 カードの模様を変えてみよう
このゲームでは、カードの模様を
じぶんのすきな画像にかえることができます✨
オリジナルのカードにして、楽しんでみてください！
①画像を用意する
まずは、カードにしたい画像を用意します。
画像サイズは 512px〜1024pxくらいの正方形 がおすすめです。
（このゲームでは1024pxの画像を使っています）
拡張子は .png または .jpg を使いましょう。
背景を透明にしたい場合は .png がおすすめです。
② 画像をフォルダに入れる
ダウンロードしたゲームのフォルダの中にある
「assets」フォルダに画像を入れます。
③プログラムを修正する
「style.css」というファイルをひらいて、
つぎの場所をさがしてください。
.card-back {
background-image: url("assets/card-back.png");
このゲームで使用している「card-back.png」を、用意した画像のファイル名に変更します。
.card-back {
background-image: url("assets/flower.png");補足：ファイルをひらくときは👇
- メモ帳（Windows）
- テキストエディット（Mac）
- VSCode（おすすめ✨）
などを使用してください。
④ 保存してゲームを開く
保存したあと、index.html をダブルクリックすると、
カードの模様が変わります🎉
例えばこんな感じです👇
お子さまの好きなキャラクターにすると、さらに楽しくあそべます😊
遊びながら楽しく学ぼう！
ひらがなをおぼえながら、
楽しくあそんでもらえたらうれしいです✨
これからも、いろいろなミニゲームを
少しずつ増やしていく予定です。
ぜひ他のゲームにもチャレンジしてみてください！
