viscuit-save viscuit-save

　ビスケットで作るモグラたたき

ビスケットに慣れたキッズプログラマーがモグラたたきにチャレンジしています。
内容の理解に役立つページを作ってみました。
復習などにご利用ください。
※そこの講師が個人的に作成し運営しているページおよびサイトだということをご理解のうえ、閲覧ください。

全体の設計図　

何を作るのか、ざっくりイメージしよう

このような流れを作っていきます。イメージしてください。
　０．マス目を粗く設定し、必要な絵を描き配置する
　１．モグラが穴から出たり入ったりする
　２．モグラを叩いたらニンジンが出てカゴに落ちる
　３．ニンジンは、カゴが空いていたら右に詰め、入っていたら左に入れる
　４．巣穴をやっつけるウサギが登場し、上に動くか飛び出すか
　５．飛び出したウサギは巣穴をやっつける
　６．モグラがニンジンを奪う

一気に作らず、一つの区切りで動きが間違っていないか確認しながら進めよう。
間違ったまま進めると直すのが大変になります。

ページの先頭へ戻る
戻る

ステージの準備　

設定をしよう

背景の色を変えてみよう。陸なら緑や茶色、水中や空なら青系にすると楽しいです。
必ず設定してほしいのはマス目の細かさで、いちばん粗くしましょう。
右上の四角で囲われた下段のスライダーをいちばん右にします。
中央右側上段のループ設定は、左右のループを許可、上下のループを禁止とします。 右上上段のウサギとカメはプログラムの進行速度です。カメ側で遅くなり、ウサギ側で早くなります。
なお、これら設定は後からでも変更できます。

parts01

確認しよう

　マス目はいちばん粗くなっているか？
　左右にループするようになっているか？
　上下はループしないようになっているか？

まずは絵を描こう

とりあえず用意するのはこれら10個の絵
parts01 parts01 parts01 parts01
左の列：モグラと穴・・・叩く対象と拠点を用意。蛇と壺、虫と花とかでもよい。
次の列：カゴとニンジン・・・ごほうびとその受け皿を用意。コインと財布とかでもよい。
右の列：兎と草と退治した穴・・・トドメを刺す仕掛けを用意。砲台と砲弾とかでもよい。
いちばん右：アイコン・・・自分のサイン的なアイコンを置いとくと保存先で探すのに便利。

確認しよう

10種類の絵が描けているか？

絵を配置しよう

parts01

必須なのは下にカゴを並べる事と、左端に草を並べる事。一番左のカゴの左上に草が来るように配置します。仕掛けのために必要です。
モグラの穴は適当に配置でＯＫ。モグラは出たり消えたりするので穴を配置する。
右上にアイコンを配置するのが実は意外な働きをしてくれます。

確認しよう

　画面下、横一列に空のカゴを並べたか？
　画面左、たて一列に草を並べたか？
　画面左下、カゴと草はななめにとなり合っているか？

ページの先頭へ戻る
戻る

①モグラが穴から出たり入ったり　

モグラがぴょこぴょこする仕掛けを作ろう

まずはメガネを５個用意
parts01

メガネの作り方

１つ目のメガネ…
左レンズ：穴を置く
右レンズ：穴を置く

２つ目のメガネ…（１つめと同じ）
左レンズ：穴を置く
右レンズ：穴を置く

３つ目のメガネ…
左レンズ：穴を置く
右レンズ：モグラを置く

４つ目のメガネ…
左レンズ：モグラを置く
右レンズ：モグラを置く

５つ目のメガネ…
左レンズ：モグラを置く
右レンズ：穴を置く

メガネのはたらき

上から３つ目、５つ目のメガネが必須で、モグラが穴から出る、穴に戻るの仕掛けです。
１つ目、２つ目と４つ目はバランス調整のために入れてあり、
１～３つ目で１／３の確率でモグラが出るようになっています。

つまり、①穴⇒穴、②穴⇒穴、③穴⇒モグラの３パターンのうちのどれかが選択されるという仕掛けです。

もし、１つ目と２つ目を入れなければモグラは毎回穴から顔を出すことになります。

４つ目のメガネは、モグラがすぐに穴に戻らないようにするための仕掛けです。
これを入れないと出てきたモグラはすぐに穴に戻ってしまいます。

これらを応用して、モグラの出る頻度や顔を出している時間を調整することができます。

動きを確認しよう

　モグラが穴から出てくるか？
　モグラが穴に戻るか？
　出るタイミングはバラバラになっているか？
　戻るタイミングはバラバラになっているか？

ページの先頭へ戻る
戻る

②モグラを叩いて、ニンジンを取り戻せ

モグラを叩いたら退治できる仕掛けを作ろう

まずはメガネを４個用意し、上手く叩いたらごほうびが出て下のカゴに収まる仕掛けを作ろう。
parts02

メガネの作り方

１つめのメガネ…
左レンズ：モグラの絵を置き、タッチボタンを重ねる
右レンズ：やられた時のモグラの絵を置く

２つめのメガネ…
左レンズ：やられた時のモグラの絵を置く
右レンズ：穴を置き、そこにニンジンの絵を重ねる

３つめのメガネ…
左レンズ：ニンジンを置く
右レンズ：１マス下にニンジンを置く

４つめのメガネ…
左レンズ：空のカゴを置き、そこにニンジンの絵を重ねる
右レンズ：ニンジンが入ったカゴの絵を置く

メガネのはたらき

１つ目のメガネはモグラを叩いた時の処理です。
モグラをクリックしたらやられた時の絵に変えます。

２つ目のメガネはやっつけたときのごほうびです。
やっつけたモグラがニンジンに変わります。そのままでは穴が消えてしまうので穴も置いてあるのです。

３つ目のメガネはごほうびのニンジンが下に移動する仕掛けです。

４つ目のメガネは下に移動したニンジンが空のカゴに重なるとカゴに収まる仕掛けです。
メガネ左側のように、空のカゴにニンジンが重なったら、ニンジンが入ったカゴに変えます。

動きを確認しよう

　モグラを叩いたら、叩かれた絵に変わるか？
　叩かれたモグラがニンジンに変わるか？
┗━　　モグラの穴は消えずに残っているか？
　ニンジンは下に移動するか？
　ニンジンが空のカゴに入ったらカゴに入ったニンジンの絵に変わるか？

ページの先頭へ戻る
戻る

③ニンジンのカゴを整理しよう

空いてるカゴは右づめ、空でなければ左へ

これぞプログラミングの醍醐味。並び替えを制する者はプログラミングを制すです。
じつはたった二つのメガネで出来ちゃいます

parts03

メガネの作り方

１つめのメガネ…
左レンズ：ニンジンの入ったカゴと、その右に空のカゴを並べる
右レンズ：空のカゴと、その右にニンジンの入ったカゴを並べる

２つめのメガネ…
左レンズ：ニンジンと、その下にニンジンの入ったカゴを並べる
右レンズ：同じ位置にニンジンの入ったカゴ、ニンジンを先ほどの左に置く

メガネのはたらき

１つ目のメガネはカゴの中のニンジンを右に移動する仕掛けです。
こうすることで、右のカゴがが空なら右に移します。ちょっと難しいけど、がんばって理解しよう！

２つ目のメガネはすでにニンジンが入ってた場合の処理です。
こうすることで、カゴにニンジンが入っていれば左の空いてるカゴを目指して移動します。

上記１つ目のメガネの仕掛けにより、ニンジンが入ったカゴの右側には空のカゴはありません。なので、ニンジンは左側の空いてるカゴを目指して移動します。

「その先も空だったらどうするの？」って思うかもしれません。
その場合ももう一度このメガネの左側と同じ状態になるので、つまり右側が空いている限り右側に移動するのです。

なお、左に移動したニンジンは、もしその下のカゴもニンジンが入っているならメガネ左側の状態になるので、さらに左側に移動します。もし左に移動したその下のカゴが空ならば、②の３つ目のメガネによって下に移動し、②の４つ目のメガネによってカゴに収まります。

動きを確認しよう

　ニンジンは空のカゴを右に移動するか？
　ニンジンの入ったカゴの上に来たら左に移動するか？

ページの先頭へ戻る
戻る

④ゲームの区切り、達成感を得るためには

モグラを出てこなくしたい

ただただ出てくるモグラをやみくもにたたき続けても面白くありません。
魔王を倒しても平和を取り戻せなければ意味がないんです。つまり、ゲームの目標を設定することが結構大事だったりします。
なので、モグラの出る穴に平和（平穏）を取り戻してあげましょう。

その前に、どんな仕掛けにするかを考えておかなくてはいけません。
カゴいっぱいに取り返したニンジンが余ったら、草むらからウサギが出てきてウサギがモグラをやっつけてくれる、やっつけたモグラの穴はニンジンがうまる穴へと変わる、こういうストーリーにしましょう。
もちろん、違うもので違うストーリーにしてもいいですよ！

parts04

メガネの作り方

１つめのメガネ…
左レンズ：草を置き、そこにニンジンを重ねる
右レンズ：草を置き、そこにウサギを重ねる

２つめのメガネ…
左レンズ：縦に２つ草を置き、下の草にウサギを重ねる
右レンズ：縦に２つ草を置き、上の草にウサギを重ねる

３つめのメガネ…（２つ目のメガネと同じ）
左レンズ：縦に２つ草を置き、下の草にウサギを重ねる
右レンズ：縦に２つ草を置き、上の草にウサギを重ねる

４つめのメガネ…
左レンズ：縦に２つ草を置き、上の草にウサギを重ねる
右レンズ：縦に２つ草を置き、上の草の右にウサギを置く

メガネのはたらき

ステージ左側に草を並べたのは、ウサギ専用のレールのようなものだと考えてください。

１つ目のメガネは草にニンジンが重なるとウサギが出てくる仕掛けです。
③の二つ目のメガネでニンジンが左に移動する仕掛け作りました。これによってニンジンは草むらにまで移動してきます。

２つ目と３つ目のメガネはウサギが上に移動する仕掛けです。「草の上にいる場合は上に移動」という条件付きの仕掛けで、よく使う技なので覚えておきましょう。
また、同じ内容のメガネを二個用意したのは上に移動する確率を２／３に、飛び出す確率を１／３にするためです。

４つ目のメガネはウサギが草むらから飛び出る（右に移動する）仕掛けです。

ウサギが飛び出したらモグラの穴を退治してほしいですよね。その仕掛けは次の項で説明します。

なお、ウサギはいつ飛び出すか分かりません。巣穴の位置で出てきてくれないこともあります。ですが、このようなランダムな要素があるとゲームとして楽しくなります。

動きを確認しよう

　ニンジンが草の上に行くとウサギに変わるか？
　ウサギは草の上にいる時は上に移動できる？
　ウサギは草の上から飛び出ることがあるか？

ページの先頭へ戻る
戻る

⑤ゲームのクライマックスとエンディング

モグラを出てこなくする仕掛け

ウサギが飛び出すところまで作りました。
では、飛び出したウサギがモグラの巣穴をつぶす仕掛けを作りましょう。

parts05

メガネの作り方

１つめのメガネ…
左レンズ：ウサギを置く
右レンズ：ウサギ１マス右に置く

２つめのメガネ…
左レンズ：穴を置き、そこにウサギを重ねる
右レンズ：ニンジンの植わった穴を置く

３つめのメガネ…
左レンズ：モグラを置き、そこにウサギを重ねる
右レンズ：ニンジンの植わった穴を置く

４つめのメガネ…
左レンズ：自分のアイコンを置き、そこにウサギを重ねる
右レンズ：自分のアイコンを置く

メガネのはたらき

１つ目のメガネは飛び出たウサギが右に移動する仕掛けです。

２つ目のメガネはウサギとモグラの穴が重なったらニンジンの穴に変える仕掛けです。ウサギと重なるタイミングでモグラが顔を出していることもあるので、３つ目のメガネでウサギとモグラが重なったらニンジンの穴に変える仕掛けも追加しておきます。
それぞれメガネの左側には穴とウサギ、モグラとウサギを重ねてあります。

４つ目のメガネはウサギが自分のアイコンと重なったら消える仕掛けです。
左右ループを許可しているので、最上段に行ったウサギは消えることがありません。なのでアイコンをウサギ消去用に利用したわけです。

動きを確認しよう

　草から飛び出たウサギは右に進むか？
　ウサギが穴に着いたらニンジンの穴に変わるか？
　ウサギがモグラに触れたらニンジンの穴に変わるか？

ページの先頭へ戻る
戻る

⑥面白い要素を追加してみよう

ニンジンを取られる仕掛け

叩き損ねたモグラにモグラにウサギが飛び出すところまで作りました。
では、飛び出したウサギがモグラの巣穴をつぶす仕掛けを作りましょう。

まずは、飛び出したモグラの絵を追加しましょう

parts06

メガネの作り方

１つめのメガネ…
左レンズ：モグラを置く
右レンズ：穴を置き、飛び出したモグラを１マス下に置く

２つめのメガネ…
左レンズ：モグラを置く
右レンズ：穴を置く

３つめのメガネ…（２つ目と同じ）
左レンズ：モグラを置く
右レンズ：穴を置く

４つめのメガネ…
左レンズ：飛び出したモグラを置く
右レンズ：１マス下に飛び出したモグラを置く

メガネのはたらき

１つ目のメガネはモグラが穴から出る仕掛けです。

２つ目と３つ目のメガネはモグラが穴から出ない仕掛けです。穴から出る確率を１／４にしてあります。元々①でモグラは穴に戻るようになっているので、穴に戻るメガネを２つ追加することで１／４になります。なお、この量を調節してニンジンの取られにくさを変えることができます。

４つ目のメガネは穴から出たモグラが下に移動する仕掛けです。

動きを確認しよう

　モグラは穴から飛び出すか？
　モグラは飛び出さず穴に戻るか？
　飛び出したモグラは下に進むか？

parts07

メガネの作り方

１つめのメガネ…
左レンズ：飛び出したモグラを置き、２マス下にも飛び出したモグラを置く
右レンズ：飛び出したモグラを置く

２つめのメガネ…
左レンズ：飛び出したモグラを置き、そこにタッチボタンを重ねる
右レンズ：ニンジンを置く

３つめのメガネ…（２つ目と同じ）
左レンズ：ニンジンの入ったカゴを置き、そこに飛び出したモグラを重ねる
右レンズ：空のカゴを置く

メガネのはたらき

１つ目のメガネは、穴から出たモグラが１マス飛びに並んだら消すという仕掛けです。難しすぎないようにこういう調整が有効です。

２つ目のメガネは穴から出たモグラを上手く叩いたらニンジンに変わる仕掛けです。

３つ目のメガネはニンジンの入ったカゴにモグラが移動したら空のカゴに変える仕掛けです。

動きを確認しよう

　飛び出したモグラが１マス飛びに並んだ時、下のモグラが消えるか？
　飛び出したモグラをクリックするとニンジンに変わるか？
　飛び出したモグラがニンジンの入ったカゴに着くと空のカゴに変わるか？

ページの先頭へ戻る
戻る