ビスケットで作る宝石消しゲーム
しっかり遊べるパズルゲームもビスケットで作れます。同じ絵柄をそろえて消すパズルゲームだよ。
自分のアイデアで自分オリジナルのパズルゲームを作ってみよう！
※北川先生の著作物だということをご理解のうえ、閲覧ください。
みちしるべ
- かたはまに戻る
- 設定をしよう
- 絵を描こう
- 絵を配置しよう
- 宝石を出そう
- 宝石を落とそう
- 宝石を消そう
- 宝石を動かそう
- コインをスコアに
- 高得点のチャンス
- 制限時間を測る
- むずかしさを調整
- PCKids秘密基地に戻る
案内人
北川先生(Ч)です。よろしく
年齢：朱夏のど真ん中
二児の父(2歳後半と0歳後半)
※2019年前半時点
経歴：工学部→エンジニア
(エンジン制御系・20年弱)
→子供向けPC講師をしつつ育児メインの生活
興味：人間と科学
好きな言葉：「明日できることは今日するな」
(いつやるべきか見極める力)
⇒もっと詳しい人物評
⇒⇒連絡手段
静岡県沼津市、千本浜のそばにある学習施設です。
児童向けプログラミングの他、算数・数学・科学実験と、大人向けに数学や英語のやり直し、老後の趣味に孫と遊べるプログラミングなど、だれもが学べる施設です。
全体の設計図
何を作るのか、ざっくりイメージしよう
このような流れを作っていきます。イメージしてください。
準備１．設定をしよう。
準備２．絵を描こう。今回は１８個だから頑張れ！
準備３．絵を配置しよう。画面全体に置くよ。
１．宝石を宝石箱から出そう
２．宝石を落とそう。下の星と入れ替えだ。
３．宝石を３つそろえて消そう
４．宝石を動かそう
５．コインを動かしてスコアに変えよう
６．宝石を十字にそろえてコイン３倍
７．制限時間を付けてみよう
８．むずかしさを調整してみよう
一気に作らず、一つの区切りで動きが間違っていないか確認しながら進めよう。
間違ったまま進めると直すのが大変になります。
どのくらい進んだか、チェックを入れながら進めよう！
宝石消しゲーム進捗管理表も用意してあります。
（pdfファイル）
プリントアウトして確認しながら進めよう。
ページの先頭へ戻る
戻る
設定をしよう
まずは設定を決めておく
背景の色を変えてみよう。どんなゲームにするか？イメージしてそれにあった色にすると楽しいよ。
必ず設定してほしいのはマス目の細かさで、いちばん粗くしましょう。
右上の四角で囲われた下段のスライダーをいちばん右にします。
中央右側上段のループ設定は、左右のループを許可、上下のループも許可とします。
右上上段のウサギとカメはプログラムの進行速度です。カメ側で遅くなり、ウサギ側で早くなります。
なお、これら設定は後からでも変更できます。
確認しよう
マス目はいちばん粗くなっているか？左右にループするようになっているか？
ページの先頭へ戻る
戻る
絵を描こう
とりあえず用意するのはこれら18個の絵
すべての絵は１マスの中に納まる大きさで描こう
勝ちアイコンだけは派手でもいいけどね
４種類の宝石はゲーム中に消そう！宝石を消すと星になるよ。
星の所に宝石が下りてくるよ。
宝石は宝石箱から出てきて、宝石箱は時間が来るとタイル２に変わるよ。
コインは宝石を消したときのごほうびだ。
タイル１はタイマーの通り道としても使います。タイマーは制限時間用に動き回るよ。
スコア０と１は点数を２進数でカウントし、スコアボード上に表示されます。時計０と１は制限時間用に使い、これも２進数でカウントするよ。
アイコンは自分のマークを描こう。これは区切りにも使います。
勝ちアイコンはスコアがいっぱいになったときに表示され、 ゲームオーバーは制限時間がいっぱいになったときに表示されるよ。
少し解説
宝石類：消すものなので、何か好きなものを４種類描いてみよう。
動物、植物、魚類、乗り物、食べ物、スイーツ、アクセサリー、武器、文房具、
等々なんでもいいよ。
星：宝石を消したときに、次の宝石を受け入れるための印なのであまり重要ではないです。
宝石箱：宝石が出てくるところなので、動物なら巣、植物なら花びん、食べ物ならお皿、
のように出てくるものが元々いるところ、であればいいよ。
タイル：壁用タイルと、宝石箱が替わるタイルの２種類。どちらもタイマーの通り道としての
役目があるよ。
確認しよう
18種類の絵が描けているか？それぞれの絵は１マスの範囲からはみ出ていないか？（勝ちアイコン以外）
ページの先頭へ戻る
戻る
絵を配置しよう
少し大変だけど、絵を並べよう
上の図のように配置しよう。特に理由が無ければこの通りに配置してほしい。
左の列の時計、スコアボードの上にタイル１と左端にアイコン、右上にもアイコンを配置すること。
左から２列目にタイル１、右から２列目に宝石箱を並べる。このように並べないとコインやタイマーの動きがおかしくなってしまうので注意が必要だ。
確認しよう
画面上、いちばん左にタイル２、横一列に宝石箱、いちばん右にアイコンを並べたか？画面左、左から２列目の一番上に宝石箱、その下にタイル１を並べたか？
画面右、右から２列目は上から宝石箱を並べ、一番下にスコアボードを配置したか？
ページの先頭へ戻る
戻る
①宝石を降らせよう
宝石が出てくる仕掛けを作ろう
まずはメガネを４つ用意しよう。
左レンズはメガネ４つとも同じだよ。
右レンズは４種類の宝石で星を置き換えよう。
メガネの作り方
４つのメガネとも、左レンズは同じ。右レンズは左レンズの星が宝石に置き換わったもの。
左レンズ：宝石箱と星を縦に並べる
右レンズ：宝石箱と宝石１～４を縦に並べる
メガネのはたらき
最初の配置でゲームのプレイエリア（８ｘ６マス）を星で埋めつくしてあるので、宝石箱の下に星があります。
メガネの左レンズの状態と一致するので、宝石箱の真下の星が宝石に変わります。
ビスケットは、同じ条件（左レンズ）のメガネが複数あった場合、どれが適用されるかはランダムです。なので、毎回違う宝石が出てきます。
動きを確認しよう
宝石箱から宝石が出てきたか？宝石箱から出てくる宝石は毎回バラバラか？
ページの先頭へ戻る
戻る
②宝石で画面を埋めつくそう
宝石が下りてくる仕掛けを作ろう
これは、宝石をそろえて消したあと、その上の宝石を下におろす役割もあります。
まずはメガネを４つ用意しよう。
左レンズは上に宝石、下に星。
右レンズは上に星で、下に宝石。
左レンズを上下反対にした形だよ。
メガネの作り方
４つのメガネ共に左レンズは上に宝石、下に星。右レンズは左レンズの上下反対。
左レンズ：宝石と星を縦に並べる
右レンズ：星と宝石を縦に並べる
メガネのはたらき
下に星があれば宝石が１マス下がります。元の宝石の位置が星に置き換わります。
置き換わった後、その星の上に宝石があればその宝石が１マス下がります。星の上が宝石箱なら新しい宝石が出てきます。
動きを確認しよう
宝石４種類とも下に星があれば１マス下に移動するか？宝石が下に移動したとき、元の位置には星が置かれるか？
ページの先頭へ戻る
戻る
③宝石を消す仕掛けを作ろう
３つ揃ったら、その真ん中をタッチして消えるようにしよう
揃った宝石を星に変えるメガネを作るんだ。
ヨコと同じように、タテも作ろう。
メガネの作り方
ヨコ３個を消すメガネは、宝石の種類違いのメガネを４個作ります。
左レンズ：宝石をヨコに３個並べ、真ん中にタッチボタンをのせる
右レンズ：星をヨコに３個並べ、真ん中にコインを重ねる。宝石があった位置に星を置きましょう。
タテ３個を消すメガネは、宝石の種類違いのメガネを４個作ります。
左レンズ：宝石をタテに３個並べ、真ん中にタッチボタンをのせる
右レンズ：星をタテに３個並べ、真ん中にコインを重ねる。宝石があった位置に星を置きましょう。
メガネのはたらき
宝石が３つ揃って、真ん中の宝石をタッチするとその宝石が星に変わります。
ごほうびにコインを一枚のせておきましょう。
左のレンズに並べたパターンで消せるので、やろうと思えば４つ並んだ時なども作れます、やりだしたら大変ですけど。 なお、十字に消すと３倍もらえる仕掛けを⑥項で追加します。
動きを確認しよう
宝石がヨコに３個そろい、その真ん中をタッチしたら宝石が星に換わったか？↑これを４種類とも確認したか？
宝石を消したあと、コインが出てきたか？
ページの先頭へ戻る
戻る
④宝石を動かせるようにしよう
宝石を左右入れ替える仕掛けを作ろう
ビスケットには残念ながらドラッグの機能がありません。「動かしたい方向」を指示できないので、「右の宝石と入れ替える」という限定した動かし方で我慢しましょう。
ですが、操作に制限がある方がゲームとしては楽しかったりします。
それでは、４種類の宝石を全て入れ替えるパターンの数だけメガネを用意します。
１⇔２、１⇔３、１⇔４、２⇔３、２⇔４、３⇔４、宝石の組み合わせはこの６パターンで、左右違いで×２、全部で１２個のメガネが必要だよ。
宝石１と宝石２を入れ換える仕掛けだよ。
宝石２と宝石１を入れ換える仕掛けだよ。
宝石１と宝石３を入れ換える仕掛けだよ。
宝石３と宝石１を入れ換える仕掛けだよ。
宝石１と宝石４を入れ換える仕掛けだよ。
宝石４と宝石１を入れ換える仕掛けだよ。
宝石２と宝石３を入れ換える仕掛けだよ。
宝石３と宝石２を入れ換える仕掛けだよ。
宝石２と宝石４を入れ換える仕掛けだよ。
宝石４と宝石２を入れ換える仕掛けだよ。
宝石３と宝石４を入れ換える仕掛けだよ。
宝石４と宝石３を入れ換える仕掛けだよ。
メガネの作り方
宝石２個を入れ換えるメガネを２個作り、それを宝石の組み合わせ違いで６組作ります。左レンズ：宝石を２個並べ、左の宝石にタッチボタンをのせる
右レンズ：左レンズと宝石の並べ方を反対にする
メガネのはたらき
タッチした宝石とその右隣りの宝石が入れ替わります。すべての組み合わせを作ることでプレイエリアのどの宝石も動かせるようになります。
動きを確認しよう
宝石１と宝石２が並んでいるとき、宝石１をクリックすると宝石２と入れ替わるか？宝石２と宝石１が並んでいるとき、宝石２をクリックすると宝石１と入れ替わるか？
宝石１と宝石３が並んでいるとき、宝石１をクリックすると宝石３と入れ替わるか？
宝石３と宝石１が並んでいるとき、宝石３をクリックすると宝石１と入れ替わるか？
宝石１と宝石４が並んでいるとき、宝石１をクリックすると宝石４と入れ替わるか？
宝石４と宝石１が並んでいるとき、宝石４をクリックすると宝石１と入れ替わるか？
宝石２と宝石３が並んでいるとき、宝石２をクリックすると宝石３と入れ替わるか？
宝石３と宝石２が並んでいるとき、宝石３をクリックすると宝石２と入れ替わるか？
宝石２と宝石４が並んでいるとき、宝石２をクリックすると宝石４と入れ替わるか？
宝石４と宝石２が並んでいるとき、宝石４をクリックすると宝石２と入れ替わるか？
宝石３と宝石４が並んでいるとき、宝石３をクリックすると宝石４と入れ替わるか？
宝石４と宝石３が並んでいるとき、宝石４をクリックすると宝石３と入れ替わるか？
ページの先頭へ戻る
戻る
⑤コインが出たらスコアに加算
コインをスコアにする仕掛けを作ろう
宝石をそろえて消して出てきたコインは、この時点では出たっきりで邪魔です。
コインは右に動かして、右側にタテに並べた宝石箱に沿って下に降りるようにします。
スコアボードの上に来たらスコアを加算します。
コインは基本的に右に動くよ
タテに並んだ宝石箱の上では下に動くよ
スコアボードの上に来たとき、０なら１にするよ
スコアが１のときは０にしてコインを左に繰り上げるよ
コインが繰り上がりを繰り返してアイコンの上に来たら、勝ちアイコンを表示しよう！
メガネの作り方
１つめのメガネ…
左レンズ：コインを置く
右レンズ：１マス右にコインを置く
２つめのメガネ…
左レンズ：宝石箱をタテに並べ、上の宝石箱にコインを重ねる
右レンズ：宝石箱をタテに並べ、下の宝石箱にコインを重ねる
３つめのメガネ…
左レンズ：コインとスコアボードをタテに並べ、スコアボードにスコア０を重ねる
右レンズ：スコアボードを左レンズと同じ位置に置き、スコア１を重ねる
４つめのメガネ…
左レンズ：コインとスコアボードをタテに並べ、スコアボードにスコア１を重ねる
右レンズ：スコアボードを左レンズと同じ位置に置き、スコア０を重ねる。コインは１マス左に置く
５つめのメガネ…
左レンズ：コインとアイコンをタテに並べる
右レンズ：左レンズのアイコンの位置に勝ちアイコンを置く
メガネのはたらき
１つ目のメガネは出てきたコインを右に動かす仕掛けです。
２つ目のメガネは、右に行ったコインが下に移動する仕掛けです。右側の宝石箱がタテに並んだところだけに適用されます。
３つ目と４つ目のメガネは下に行ったコインがスコアに変わる仕掛けです。スコアが０なら１に変え、スコアが１なら０にして繰り上げするためコインを左に動かします。
なお、繰り上げた先のスコアによってこの３つ目と４つ目のどちらかのメガネが働くので、３つ目のメガネが働きコインが消えるまで繰り返されます。
５つ目のメガネはスコア満点を表示するものです。２５６点取ると勝ちです。
２進数のカウントで１１１１１１１１点取った後にコインを取るとそれ以上スコアを書けないのでこのようにします。
プログラミングのテクニック
２進数は一番下の位が１の位、二ケタ目が２の位、三ケタ目が４の位、その次は８の位、次が１６の位、３２の位、６４の位、最後の八ケタ目は１２８の位となります。ケタが上がるたびに２倍されます。
やや難しい話になりますが、普段我々が使っている数は１０進数です。
１の位、１０の位、１００の位、とケタが上がるごとに１０倍されます。
１の位は１がいくつあるかを表します。１０の位は１０がいくつあるかを表します。１００の位は１００がいくつあるか表します。
例えば２５６は１００が２個と１０が５個と１が６個あると言うことを表しています。 さらに一歩踏み込むと、１０の２乗が２個、１０の１乗が５個、１０の０乗が６個あると言えます。
ここで、２進数の１１１１１１１１は１０進数のいくつか？考えてみましょう。
８ケタあるので、２の０乗が１個、２の１乗が１個、２の２乗が１個、３乗が１個、４・５・６・７乗がそれぞれ１個ということを表しています。
２の０乗は１、どんな数でも０乗は１です。べき乗はその数を何回かけたかを表す数字なので、例えば２の３乗は１に２を３回かけたということになります。１×２×２×２です。つまり８です。２の０乗は、１に２を０回かけたということなので、１となります。
話を戻すと、２進数の１１１１１１１１は１＋２＋４＋８＋１６＋３２＋６４＋１２８ということになるので、計算すると２５５です。
このように、ｎ進数は１ケタ目がｎの０乗の位、２ケタ目がｎの１乗の位、３桁目がｎの２乗の位、ｘケタ目はｎの（ｘ－１）乗の位ということです。難しそうですが、一度理解してしまえば大したことではないことに気が付くはずです。
なお、２進数の理解に役に立ちそうなプログラムも作ってあります。
右の画像をクリックすると実行します。
下の方にある１～９までの数字をどれかクリックすると、クリックした数字の数だけ１が出現し、２進数で加算されていきます。
上にある「１０進数」と書かれたところに出る数字の足し算結果と、下にある「１０進数」の足し算の結果が同じになることが確認できます。
動きを確認しよう
コインは右に動くか？右に動いたコインは宝石箱に沿って下に動くか？
コインはスコアに変わるか？０が１になるか？
コインはスコアに変わるか？１が０になるか？そのとき、コインは１マス左に移動するか？
スコアが１１１１１１１１のときコインがアイコンの上に来ると勝ちアイコンに変わるか？
ページの先頭へ戻る
戻る
⑥高得点のチャンス！十字に消せばコイン３枚
５枚まとめて消してコインを３枚出す仕掛けを作ろう
《③宝石を消す仕掛けを作ろう》で作ったヨコ消しメガネとタテ消しメガネを合体させたようなメガネを作ります。
メガネは種類違いで４個、内容は同じだよ。
メガネの作り方
４つのメガネ共通で、左レンズが宝石の種類違いになります。宝石と星の数は必ず同じにしよう。
左レンズ：宝石を十字の形に５個置き、真ん中にタッチマークを乗せる
右レンズ：星を十字の形に置き、左上、真ん中、右下に合計３枚のコインを置く
メガネのはたらき
十字の形に宝石５個並んだときに真ん中をタッチすると、宝石５個が星５個に変わります。
同時に、コインを３枚出しますコインの配置は、右側の宝石箱で重ならないようにしています。重なると宝石箱を突き抜けてループしてしまいます。これは、タテに並んだ宝石箱のメガネにはコイン１枚だけ動かすようになっているためです。
ゲームを進めていくとコインが重なることが度々起こりますが、これは仕方のないこととしても、必ず重なってしまう出し方にすることはないでしょう。
動きを確認しよう
十字に５個並んだ宝石の真ん中をタッチすると宝石５個は星５個に変わるか？そのとき、コインが３枚出てくるか？
上二つを４種類すべての宝石で確認したか？
ページの先頭へ戻る
戻る
⑦ゲームにハラハラを！制限時間を付けてみよう
タイマーを進め、カウントし、フルカウントになったら宝石を出なくする仕掛け
ストップウォッチの形をしたタイマーは常に右に進み、ループした回数を制限時間にします。
時計０と時計１で２進数でカウントするよ。
フルカウントになったらタイマーは上に行き、宝石箱をタイル２に変えて宝石を出なくするんだ。
下の図を参考に、メガネを全部で７個並べよう。
タイマーを右に動かすよ
時計をカウントしたあと、タイマーを画面下に動かすよ
時計のカウントを０→１にするよ
時計のカウントを１→０にして上に繰り上がるよ
宝石箱をタイル２に変えるよ
タイル２に沿って上に行くよ
右上のアイコンに到達したらゲーム終了だよ
メガネの作り方
１つめのメガネ…
左レンズ：タイマーを置く
右レンズ：タイマーを１マス右に置く
２つめのメガネ…
左レンズ：タイル１をタテに並べ、上のタイル１にタイマーを重ねる
右レンズ：タイル１をタテに並べ、下のタイル１にタイマーを重ねる
３つめのメガネ…
左レンズ：時計０を置き、そこにタイマーを重ねる
右レンズ：時計１を置き、１マス右にタイマーを置く
４つめのメガネ…
左レンズ：タイマーを置き、１マス右に時計１を置く
右レンズ：タイマーを左レンズに対し１マス上に置き、時計１は時計０に置き換える
５つめのメガネ…
左レンズ：タイル２を置き、そこにタイマーを重ねる １マス右に宝石箱を置く
右レンズ：タイル２を２個並べ、右側のタイル２の下にタイマーを置く
６つめのメガネ…
左レンズ：タイル２をタテに並べ、下のタイル２にタイマーを重ねる
右レンズ：タイル２をタテに並べ、上のタイル２にタイマーを重ねる
７つめのメガネ…
左レンズ：アイコンを置き、そこにタイマーを重ねる
右レンズ：勝ちアイコンを置く
メガネのはたらき
タイマーを右に進め、ループさせる。
時計０と重なったら時計１に変えて右のマスへ移動。
時計１の左横に来たら時計０に変えて１マス上に移動させる。ここで、時計１の左横はループして画面のいちばん右です。
時計の右横はタイル１なので、カウントした後はタイマーを画面下まで移動させる。
時計のカウントが終わったらタイル２に沿って上へ移動する。
宝石箱の左横にタイマーが来たら宝石箱をタイル２に変える。変えた後、タイマーは１マス下を右に動く。
宝石箱をすべてタイル２に変えると、アイコンとタイマーが重なります。その時点でゲームオーバーを表示します。
動きを確認しよう
タイマーは右に動いてループして戻ってくるか？時計０と時計１でループした回数をカウントするか？
カウントした後タイマーは画面下に下りるか？
フルカウントの後タイマーは画面上に移動するか？
タイマーは宝石箱をタイル２に変えるか？
タイマーが画面右上のアイコンと重なるとゲームオーバーを表示するか？
ページの先頭へ戻る
戻る
⑧ゲームの難しさを調整しよう
ゲームの制限時間、コインの出る数、スコアの桁数などを自分好みにしよう
制限時間を長くしたり短くしたりするにはどうしたらいいんだろう？
コインの出る枚数を変えるにはどうしたらいいかな？よこ３個並んだときには２枚もらえるようにしてみよう。
スコアの桁数を減らしたり増やしたりして勝ちアイコンの出やすさを変えてみよう。
ゲームの制限時間とスコアの桁数は画面の配置で変えられます。
コインの枚数は《③宝石を消す仕掛け》でコインの枚数を変えてみよう。
動きを確認しよう
制限時間を長くしたり短くしたりできたか？コインの出る枚数を変えられたか？
スコアの桁数を増やしたり減らしたりできたか？
ページの先頭へ戻る
戻る