ネズミを操作して、ネコから逃げながらチーズを集めるゲームを作ってみます。
今回のゲームはちょっとレベルが高くなっています。
難しい処理をしている訳ではありませんが、あつかうスプライトの数がおおいので少し難しく感じるかもしれません。
スプライト同士も影響しあうので、ゴチャゴチャしてる感じもしますね。
ポチップ
ポチップゲームの概要
ネズミを操作してチーズを集めて巣穴に逃げ込むゲームです。
途中、ネコがウロウロしているので捕まらないようにしてください。
ネコに捕まるとゲームオーバーです。
ミルク缶が落ちています。
ネコはミルクを見つけると5秒間動きが止まります。
その間は、ネコに捕まらずに通り抜けることができます。
ネズミはミルク缶を見つけると、回収できます。
回収したミルク缶は好きな場所に置くことができます。
操作方法
↑↓←→のキーでネズミを動かします。
ミルク缶の上でスペースキーを押すとミルク缶を回収できます。
回収したミルク缶を出すときは、スペースキーを押します。
プログラムの解説
スプライトの全体像
今回使うスプライトはこのようになっています。
スプライト
先導：cat2の動きを決める（1匹目）
cat2：ネコのスプライト（1匹目）
マウス先導：Mouse1の動きを決める
チーズ、チーズ２、チーズ３：ネズミが集めるアイテム
ミルク：ネコの動きを止める
スプライト２：ネズミの巣穴
スプライト１：ゲームオーバーの時に出す文字
スプライト３：ゴールした時の出す文字
先導２：cat3の動きを決める（2匹目）
Cat3：ネコのスプライト（2匹目）
※試行錯誤しながら作ったのでスプライト名がcat1が無かったり、整っていなくて申し訳ありません。
ステージ
ステージは1枚用意します。
背景２：ステージの迷路
今回少し難しいのは、
ネコとネズミのスプライトとなっている先導スプライトです。
例えば、方向キーでネズミを操作しているように思うのですが、実際には「マウス先導」スプライトを操作しています。
後追いで「Mouse1」スプライトが追いかけています。
詳しくはあとで説明します。
「先導2」「cat3」スプライトは2匹目のネコ用です。
ネコは1匹でも構わないので、余裕があったら作ってください。
ステージの作成
ネコとネズミが移動する迷路のようなステージを作っていきます。
標準で用意されている背景を使います。
Xy-grd-30pxを使います。
この背景は30ピクセルごとに線がある方眼紙の様になっています。
この各升目に色を塗ってステージを作ります。
背景を選んで、「背景」タブに切り替えて、塗りつぶしツールで色を塗っていきます。
どんな風に塗るかは自由です。
オレンジの部分が壁になります。
外周は必ず全部塗ってください。
隙間があると、ネコとネズミがステージの外に出てしまいます。
ステージの準備は終わりです。
ポチップポチップ先導スプライト
先導スプライトは、ネコの移動位置を決めるプログラムを作っていきます。
仕組み
ちょっとややこしいですが、仕組みを説明します。
ネコは背景の白い部分だけを移動できます。
次に移動するマス目はオレンジを避けて、白いマス目にする必要があります。
白いマスだけを選んで移動をしたいのですが、Scratchでは隣（上下左右）のマスが白なのかオレンジなのか調べるプログラムを作ることできません。
移動させたけどオレンジの壁だったら、ネコが壁にめり込んでしまいます。
そこで、先導スプライトというのを使います。
先導スプライトを上下左右にとにかく移動させます。
移動した先がオレンジの壁なら、元の場所（移動前の場所）に戻します。
移動した先が白いマスならそのままでOKです。
移動先が決まったら、ネコのスプライトを移動させてきます。
これでネコが壁にめり込むのを防ぐことができます。
スプライトの作成
先導スプライトは絵を作ります。
スプライトの「描く」を選んで、次のような絵を描きます。
形などはなんでも構いません。
丸でも四角でも。
この次にネコのスプライトを用意するのですが、ネコに隠れるサイズにします。
スプライトの大きさでも調整ができるので、ここでは適当に四角の絵を描いておきます。
大きさで縮小していくと線が見えなくなるので、線はふと目にしておくのがいいです。
ステージのマス目に対して、これくらいの大きさに調整するのがお勧めです。
位置は作成したステージの白いマス目の中心になるように設定します。
今回はプログラムの中で初期の位置を指定するので、今は適当でいいです。
ちなみに、
1マスが横30ピクセル、縦30ピクセルなので次のような式でマス目の中心座標を計算することができます。
x座標 = 15 + (30 × a)
y座標 = 15 + (30 × b)
大きさは、この後登場するネコのスプライトに隠れるぐらいの大きさに調整してください。
表示するは「表示」にしておいてください。隠すとうまく機能しなくなります。
プログラム
プログラムの大まかな機能は4つです。
・0.3秒ごとに上下左右のどこかに1マス分進む。
・移動先が壁（オレンジ）だったら、元の場所に戻す。
・ネコのスプライトを移動させてくる
・移動先にミルクがあったら5秒間移動を休む
少し細かく見ていきます。
プログラムが開始したら、まずは初期位置に移動させます。
作成するステージ次第ですが、この通り作っていればx座標15、y座標15のマス目が白になっているので、1匹目のネコをここからスタートさせることにします。
このスプライトは最背面に移動しておきます。
ネコのスプライトと重ねて動かすのですが、ネコの上に見えていると格好悪いです。
そこで、ネコの下に隠れるように移動させておきます。
ずっとのブロックで囲んだ中にネコの動きのプログラムを作っていきます。
ネコはずっと動き続けます。
まずは0.3秒待つのブロックを入れています。
この「待つ」を入れずに作るとの、猛スピードでネコが移動します。
0.3秒ごとに1マス進むように調整しています。
この数字を変えることで難易度が変わってきます。
ネコを動かすメインのプログラムです。
１～２の乱数を出して、１だったら向きを変えるようにしています。
この乱数のプログラムは無くても構いません。
1マス進むごとに向きを変えるよりは、連続で進む場合があった方が自然な動きになるので追加しています。
次は乱数で１が出たときの向きを決めるプログラムです。
０～３までの乱数を出します。
０，１，２，３の4パターンで↑、→、↓、←の方向を決めます。
この乱数を使って「向き」を計算します。
乱数 × ９０ ＝ 向き
になります。
０ × ９０ ＝ ０ で上向きになります。
１ × ９０ ＝ ９０ で右向きになります。
２ × ９０ ＝ １８０ で下向きになります。
３ × ９０ ＝ ２７０ で左向きになります。
向きが決まったら、その方向に向きを変え、30歩動かします。
乱数で2が出ていた場合は、向きを変えずに30歩動かします。
移動した先がオレンジ（壁）だった場合は、30歩戻して進まなかったことにします。
メッセージで「先行」を送ります。
メッセージを受け取るのはネコのスプライトで、先導スプライトの場所まで移動してくるようにしています。
（あとで説明が出てきます）
移動した先にミルクがあったら移動のプログラムを5秒間止めます。
cat2スプライト
ネコのスプライトのプログラムを作っていきます。
用意されているスプライトからcat2を選びます。
大きさは20ぐらいにするとマス目に収まります。
x座標、y座標は適当で構いません。
プログラムの中で「先導」スプライトに移動させます。
向きも適当で構いません。
プログラムの中で設定されます。
プログラム
ネコのスプライトでは、ミルクに触れた場合、ネズミに触れた場合の当たり判定プログラム。
あとは、「先導」スプライトの位置に移動するプログラムです。
少し詳しく説明します。
初期化と当たり判定
プログラムが実行されたら初期化をします。
あとは当たり判定を繰り返し行います。
プログラムが開始されたら「先導」スプライトの位置へ移動します。
ネコのスプライトの初期化はこれだけです。
この後のプログラムは「ずっと」の中に作っていきます。
ミルクまたはネズミに触れる判定を繰り返しています。
ミルクのスプライトに触れた場合のプログラムです。
メッセージ「休憩」を送ります。
このメッセージはミルクのスプライトが受け取って、一定時間たったら消えるようにしています。
5秒間待ったら当たり判定を再開します。
この次にネズミとの当たり判定があるのですが、ミルクを飲んでいる5秒間はネズミに触れてもゲームオーバーにならないように当たり判定の処理を止めています。
ミルクに触れていない場合のプログラムです。
ネズミ（Mouse1）に触れたらメッセージ「gameover」を送ります。
このメッセージを受け取ったプログラムではゲームオーバーの処理をします。
移動する
メッセージ「先行」を受け取ったら、
移動方向に向きを変えて、「先導」スプライトの場所まで移動します。
メッセージ「先行」は先導スプライトから送られてきます。
ポチップポチップマウス先導スプライト
ネコの先導スプライトと同じ役割をするスプライトです。
ネズミ（Mouse1）のスプライトに先行して移動先を決める役割です。
移動先が壁だったら元の位置に戻す動きをします。
後追いでネズミ（Mouse1）のスプライトが移動してきます。
スプライトの作成
マウス先導のスプライトを描きます。
ネコの先導スプライトと同じように、四角で作ります。
どんな形でも構いませんが、Mouse1のスプライトに隠しやすい形が良いです。
スプライトの大きさで調整していくので、適当な大きさで構いません。
また、縮小すると見えにくくなるので太めの線で描きましょう。
表示するは「非表示」にしておきます。
ネコの先導とは違って非表示で構いません。
x座標、y座標は適当で構いません。
プログラムで設定します。
向きもプログラムで設定するのなんでも構いません。
大きさはマス目に収まる大きさにしてください。
非表示にしているのでネズミの大きさは気にしなくて大丈夫です。
プログラム
ネズミを移動させるためのプログラムです。
見た目は違うように見えますが、やっていることはネコの「先導」スプライトとほぼ同じです。
プログラムが開始したら、まず初期化をします。
ネズミの初期位置を決めます。
今回のフィールドでは
x座標：195
y座標：-135
にします。
あとは、移動のプログラムを繰り返します。
方向キーが押されたら、その方向に向きを変えます。
上：向き0
右：向き90
下：向き180
左：向き270
で同じようなうろグラムを4つ作ります。
そして「マウス移動共通」のプログラムを呼び出します。
その方向に移動しても同じな内容のプログラムでよいのでブロック定義を使って、使い回しをします。
方向が決まったら、30歩動かします。
オレンジ（壁）に触れたら、元の場所に戻します。
変数「マウス向き」に向きの値を入れておきます。
この値を使ってマウスは移動方向に向きを変えるために使います。
メッセージ「マウス先行」を送ります。
このメッセージはマウスのスプライトが受け取って処理します。
0.3秒待つを入れてプログラムを少し停止します。
これを入れることで、0.3秒に1マスまでしか進めなくなります。
これを入れていない場合、1回方向キーを押しただけなのに、一気に何マスも進んだりします。
Mouse1スプライト
ネズミのスプライトの説明をします。
メインは「マウス先導」スプライトを追いかけるプログラムです。
標準で用意されているMouse1のスプライトを使います。
その場合、大きさは25ぐらいにしましょう。
x座標、y座標、向きはプログラムのかで設定するの適当で構いません。
プログラム
初期化とネズミの移動プログラムです。
プログラムが開始したら、「マウス先導」スプライトの場所に移動しましょう。
持っているチーズも0にリセットします。
ネズミの移動プログラムはメッセージ「マウス先行」を受け取ったら実行します。
「マウス先行」は「マウス先導」スプライトから送られてきます。
このメッセージを受け取ったら、「マウス先導」スプライトが移動した向きと同じ向きに変えます。
そのあと「マウス先導」の場所に移動します。
ポチップポチップチーズスプライト
ネズミが巣穴に持ち帰るチーズのスプライトです。
チーズのスプライトはスクラッチ標準には無いので、フリー素材などから使いましょう。
今回はイラスト屋さんの素材を使わせていただきましょう。
いろいろな三角形のチーズのイラスト | かわいいフリー素材集 いらすとや (irasutoya.com)
このイメージを使った場合は次のようにします。
x座標：196
y座標：-72
大きさ：８
違う素材を使ったときはちょうどいい加減を微調整してください。
プログラム
ネズミのスプライトに触れたら時の処理がメインのプログラムです。
初期化処理として、プログラムが開始されたら「表示」にします。
あとは、ネズミに触れたときの判定を繰り返します。
「Mouse1」のスプライトに触れたら、
変数「チーズ」の値を1増やします。
これで、ネズミがとったチーズの数をカウントします。
とったチーズは「隠す」で非表示にします。
他のチーズスプライト
あと2つチーズのスプライトを追加します。
全部で3つのチーズを取ってクリアするようにします。
プログラムはすべて同じものを作っておけば良いです。
ミルクスプライト
ミルクのスプライトは2つの役割があります。
ネズミに回収されたり、放出されたりする機能。
ネコに触れたら（飲み終わったら）消す機能。
このスプライトも、Scratchの標準にはちょうどいいものがないので、フリー素材などから探します。
今回はイラスト屋さんの素材を使っています。
ミルクタンクのイラスト | かわいいフリー素材集 いらすとや (irasutoya.com)
x座標：-46
y座標：-46
大きさ：８
にします。
は所は他の場所でも構いません。
ネズミに近い場所に置くと難易度が低いゲームに。
遠い場所に置くと難易度が高いゲームになります。
プログラム
プログラムの構成は、大きく２つです。
プログラムが開始したら、ネズミに回収・放出されるプログラム。
ネコに触れたときに消すプログラムです。
消すプログラムはネコの数だけ同じようなものを作ります。
初期化とネズミの操作
まずは初期化処理です。
プログラムが開始されたら、ミルクの位置を決めます。
x座標：-46
y座標：-46
の位置に置くことにします。
ネコの近くに置くと、ミルクの回収が難しくなります。
ネズミの近くに置くと回収がしやすくなりゲームも簡単になります。
変数「ミルク」を0にします。
持っているミルクの数をカウントする変数です。
ゲームが始まったときは持っていないので0にしておきます。
表示にしておきます。
ネズミがミルクに触れたときの処理を作っていきます。
ミルクに触れて かつ スペースキーを押したらミルクを回収したことにします。
変数「ミルク」を1増やすことで、ミルクを1個持っていることにします。
「隠す」でミルクを回収したことにします。
1秒待つを入れていますが、0.5秒でも0.3秒でも構いません。
スペースキーでミルクを回収したのですが、ミルクを出すときもスペースキーを使います。
少しだけ「待つ」を入れておかないと、回収でスペースキーを押したのに続けてミルクを出すプログラムが動いてしましまいます。
スペースキーを押してから、離すぐらいの時間を設定できればOKです。
何もないところでスペースキーを押したときのプログラムです。
変数「ミルク」に0より大きい数字が入っていた場合（つまり１）、
ミルクの場所をネズミの場所まで移動します。
その後、変数「ミルク」の値を-1して、
ミルクを表示することでミルクを出したことにします。
出したミルクをすぐに回収してしまわないように、ここでも1秒待つを入れています。
ネコに触れたときのプログラム
メッセージ「休憩」を受け取ったときのプログラムです。
「休憩」はネコのスプライトから送られてきます。
ネコがミルクに触れたときに送られていきます。
ネコ（cat2）のプログラムを見直してみてください。
ミルクはネコが飲み始めて5秒後に消すことにします。
「休憩２」は2匹目のネコから送ってきます。
2匹目のネコはこの後解説します。
ポチップポチップスプライト２（巣穴）のプログラム
ゴールの巣穴のスプライトを作っていきます。
ちょうどよい素材が無いので、自作することにします。
簡単なので自分で描きます。
円ツールを使って、黒い楕円を描いてみます。
これで巣穴という事にします。
ゴールの位置に配置します。
今回のマップの場合、
x座標：-104
y座標：135
にします。
大きさはマス目に収まるぐらいの大きさに調整します。
プログラム
ネズミがチーズをすべて回収してくるのを待ち構えるプログラムです。
ネズミが触れたときに、チーズが3個回収済みならゴールです。
ゴールの処理をするためにメッセージ「goal」を送ります。
スプライト１（GameOver）のスプライト
ゲームオーバーになったときに表示するスプライトを作成します。
GameOverという文字を書いただけのスプライトを用意します。
配置などは文字の大きさのバランスを見て調整してください。
画面全体に大きく表示されるのが良いです。
プログラム
プログラムは単純です。
開始した時は「隠す」で文字を消します。
メッセージ「gameover」を受け取ったら表示して、すべてのプログラムを止めることで終了させます。
メッセージはネコのスプライトが送ってきます。
ネコがネズミに触れたときです。
スプライト３（ゴール）のスプライト
ゲームをクリアした時に表示する文字をスプライトで作ります。
ゴールという文字のスプライトを作ります。
gameoverのスプライトと同じで、画面全体に表示されるように大きさや座標を調整してください。
プログラム
GameOverのプログラムによく似ています。
プログラムが開始したら文字を消します。
メッセ維持「goal」を受け取ったら表示して、すべてのプログラムを停止して終了します。
ポチップポチップネコ2匹目の作成
ゲームの暗に度を上げるために、2匹目のネコを作ります。
基本的には1匹目のネコと同じですが、別の動きをさせるために変数を別に用意します。
まず、スプライトは別に用意します。
2匹目のネコ用に、「先導２」「cat３」のスプライトを追加します。
大きさなどは1匹目と同じように設定してください。
先導２プログラム
赤枠の部分が先導１と違うところです。
cat3プログラム
赤枠のところがcat2と違うところです。
2匹目のネコは1匹目のプログラムをコピーして、違うところだけ直して使いましょう。
コメント