【オンライン講座+作り方解説】ゼロから学ぼうScratch(スクラッチ)プログラミング3時間目:避けゲーム、迷路ゲームの当たり判定!

KIDSPROは、オンライン講座を05/18(土)、05/19(日)に実施します。
4月よりスタートした、ゼロから学ぼうScratch(スクラッチ)プログラミング3時間目をアップ!避けゲーム、迷路ゲームの当たり判定プログラムを解説します。タブレットにも対応しています

【3時間目】ゼロから学ぼうScratch:避けゲーム、迷路ゲームの当たり判定!

今回は、避けゲーム、迷路ゲームの当たり判定プログラムを解説します。

 

日時: 2024/05/18(土)  & 2024/05/19(日)  17:30 ~ 18:30
場所: オンライン講座
対象: KIDSPROスクール生、KIDSPRO eラーニングをご利用の方
必要なもの: Scratchが使えるパソコン、またはタブレット
費用: 無料

【3時間目】ゼロから学ぼうScratch:避けゲーム、迷路ゲームの当たり判定!

ゲームのやり方

1:避けゲーム(マウスポインターで操作)
2:迷路ゲーム(1ステージのみ、ステージ左下のコントローラーで操作)
3:迷路ゲーム(複数ステージあり、画面左下のコントローラーで操作)

※学習用のScratchテンプレート(スクリプトが未完成)は、https://scratch.mit.edu/projects/1021291883を利用してください。

【3時間目】ゼロから学ぼうScratchで使用するスプライト

1.

playerの初期設定スクリプト

旗🏴をクリックすると、playerスプライト:はステージから姿を消す。

2.

敵の初期設定スクリプト

旗🏴をクリックすると、敵スプライト;はステージの中心(X座標=0、Y座標=0)に瞬間移動し、右(Scratchで90度は右)を向く。

3.

迷路の初期設定スクリプト

旗🏴をクリックすると、迷路スプライト;はステージから姿を消し、ステージのほぼ中心(X座標=0、Y座標=5)に瞬間移動する。

4.

gameoverの初期設定スクリプト

旗🏴をクリックすると、gameoverスプライト;はステージから姿を消し、他のスプライトよりも最背面のレイヤー、ステージの中心(X座標=0、Y座標=0)に瞬間移動する。

5.

startの初期設定スクリプト

旗🏴をクリックすると、startスプライト;はステージから姿を消し、他のスプライトよりも最背面のレイヤー、ステージのX座標=-195、Y座標=85の位置に瞬間移動する。

6.

goalの初期設定スクリプト

旗🏴をクリックすると、goalスプライト;はステージから姿を消し、他のスプライトよりも最背面のレイヤーに移動する。

当たり判定1:避けゲーム(敵に触れたらゲームオーバー)

・必要なスプライト:

STEP.1
playerスプライト

マウスで操作して、敵に触れるとgameoverメセージを送信するスクリプト
  1. メッセージ「1」を受け取ると、playerスプライトは右を向き(90度)ステージに表示される。
    ※ステージ上部のをクリックすると、メッセージ「1」が送信されます。
  2. 以下の処理3-4をずっと繰り返す。
  3. playerスプライトはずっとマウスポインターの方を向き、マウスポインターについて行く。その際にネコは2つのコスチュームを交互に切り替える。
  4. 敵スプライトに触れると(捕まると)、メッセージ「gameover」を送信する。
    ※この処理4が避けゲームの当たり判定となります。以下に説明する「gameover」メッセージを受け取ったきのスクリプトにより、playerスプライトはマウスポインターで操作できなくなります。つまり、動かなくなります。

 

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、他のスプライトのスクリプトが停止する。

※メッセージ「gameover」を受け取ると、同じplayerスプライト内で実行中であるスクリプトが停止します。つまり、先に説明した「マウスで操作して、敵に触れるとgameoverメセージを送信する」スクリプトが停止します。

STEP.2
敵スプライト

playerを追いかけ続けるスクリプト
  1. メッセージ「1」を受け取ると、ステージに表示される。
    ※ステージ上部のをクリックすると、メッセージ「1」が送信されます。
  2. ずっと、敵スプライトがplayerスプライトの方向を向き、「4」ピクセルずつ動き続ける。
    ※このスクリプトにより敵スプライトはplayerスプライトを追いかけ続けるようになります。

 

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、他のスプライトのスクリプトが停止する。

※メッセージ「gameover」を受け取ると、同じ敵スプライト内で実行中であるスクリプトが停止します。つまり、先に説明した「playerを追いかけ続ける」スクリプトが停止します。

STEP.3
gameoverスプライト

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、gameoverスプライトが表示される。
※コスチュームは「THE END」という文字画像なので、「gameover」メッセージが表示されるとステージに「THE END」という文字が表示されます。

当たり判定2:迷路ゲーム(迷路に触れるとstartに戻り、goalに触れるとゲームクリア)

・必要なスプライト:

STEP.1
playerスプライト

playerをコントローラーで操作するスクリプト
  1. メッセージ「2」を受け取ると、playerスプライトは右を向き(90度)、startスプライトの中心に瞬間移動し、ステージに表示される。
    ※ステージ上部のをクリックすると、メッセージ「2」が送信されます。
  2. ※このスクリプトにより、playerスプライトはスタート地点であるstartスプライトの真上に現れます。
  3. ずっと、つぎの処理3-6を繰り返します。
  4. 変数「上矢印」値ブロックが「1」なら、playerスプライトは上方向を向き(0度)、「10」ピクセル移動する。
    ※このスクリプトにより、playerスプライトは上方向に移動する。
  5. 変数「下矢印」値ブロックが「1」なら、playerスプライトは下方向を向き(180度)、「10」ピクセル移動する。
    ※このスクリプトにより、playerスプライトは上方向に移動する。
  6. 変数「右矢印」値ブロックが「1」なら、playerスプライトは右方向を向き(90度)、「10」ピクセル移動する。
    ※このスクリプトにより、playerスプライトは上方向に移動する。
  7. 変数「左矢印」値ブロックが「1」なら、playerスプライトは左方向を向き(-90度)、「10」ピクセル移動する。
    ※このスクリプトにより、playerスプライトは上方向に移動する。

 

※本playerスプライトを、ステージ左下に表示されているコントローラーで操作するやり方は、「ゼロから学ぼうScratch(スクラッチ)プログラミング1時間目:操作方法9 画面のコントローラーで向きが変わり、その方向に動くやり方」で詳しく解説していますので、御覧ください。

playerスプライトと迷路スプライト、goalスプライトとの当たり判定スクリプト
  1. メッセージ「2」を受け取ると、処理2-3の条件文のチェックをずっと続ける。
  2. もし、playerスプライトが迷路スプライトに触れると、playerスプライトは「Clang」の音を鳴らし、startスプライトの中心に瞬間移動する。
    ※このスクリプトにより、playerスプライトは迷路スプライトに触れると、スタート地点であるstartスプライトの真上に戻ります。
  3. もし、playerスプライトがgoalスプライトに触れると、「Connect」の音を鳴らし、メッセージ「gameover」を送る。
    このスクリプトにより、playerスプライトはgoalスプライトに触れると、ゲームクリアとなりゲームが終了します。ゲームの場合のgameoverメッセージは、ゲームクリア用として使用しています。

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、他のスプライトのスクリプトが停止する。

※メッセージ「gameover」を受け取ると、同じplayerスプライト内で実行中であるスクリプトが停止します。つまり、先に説明した「playerをコントローラーで操作する」スクリプトと「playerスプライトと迷路スプライト、goalスプライトとの当たり判定」スクリプトが停止します。

STEP.2
迷路スプライト

迷路スプライトが表示されるスクリプト

メッセージ「2」を受け取ると、迷路スプライトがコスチューム名「コスチューム1」の見た目でステージに表示される。
※迷路スプライトは、ゲームで利用するため3つのコスチュームを持っています。そのため、当たり判定2では「コスチューム1」を指定しています。

STEP.3
startスプライト

startスプライトが表示されるスクリプト

メッセージ「2」を受け取ると、startスプライトがコスチューム名「コスチューム1」の見た目でステージに表示される。

※startスプライトは、ゲームで利用するため3つのコスチュームを持っています。そのため、当たり判定2では「コスチューム1」を指定しています。

STEP.4
goalスプライト

goalスプライトが表示されるスクリプト

メッセージ「2」を受け取ると、goalスプライトがステージのX座標=105、Y座標=-60の位置に表示される。

※goalスプライトは、ゲームによりステージ上の位置(X座標、Y座標)が変わる可能性があります。そのため、当たり判定2では位置(X座標、Y座標)を指定しています。

STEP.5
gameoverスプライト

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、gameoverスプライトが表示される。
※コスチュームは「THE END」という文字画像なので、「gameover」メッセージが表示されるとステージに「THE END」という文字が表示されます。ゲームの場合の「THE END」は、ゲームクリア用として使用しています。

当たり判定3:迷路ゲーム(goalに触れると次ステージへ、3ステージクリアでゲーム終了)

・必要なスプライト:

STEP.1
playerスプライト

playerをコントローラーで操作するスクリプト
  1. メッセージ「3」を受け取ると、playerスプライトは右を向き(90度)、startスプライトの中心に瞬間移動し、ステージに表示される。
    ※ステージ上部のをクリックすると、メッセージ「3」が送信されます。
  2. ※このスクリプトにより、playerスプライトはスタート地点であるstartスプライトの真上に現れます。
  3. ずっと、つぎの処理3-6を繰り返します。
  4. 変数「上矢印」値ブロックが「1」なら、playerスプライトは上方向を向き(0度)、「10」ピクセル移動し、コスチュームを変える。
    ※このスクリプトにより、playerスプライトは上方向に移動する。
  5. 変数「下矢印」値ブロックが「1」なら、playerスプライトは下方向を向き(180度)、「10」ピクセル移動し、コスチュームを変える。
    ※このスクリプトにより、playerスプライトは上方向に移動する。
  6. 変数「右矢印」値ブロックが「1」なら、playerスプライトは右方向を向き(90度)、「10」ピクセル移動し、コスチュームを変える。
    ※このスクリプトにより、playerスプライトは上方向に移動する。
  7. 変数「左矢印」値ブロックが「1」なら、playerスプライトは左方向を向き(-90度)、「10」ピクセル移動し、コスチュームを変える。
    ※このスクリプトにより、playerスプライトは上方向に移動する。

 

※playerスプライトは、 の2つの見た目の違うコスチュームを持っています。変数「上矢印」「下矢印」「右矢印」「左矢印」値ブロックの値が「1」になる度に「次のコスチュームにする」ブロックを実行すると、ネコが走っているようなアニメーション効果が追加されます。

※本playerスプライトを、ステージ左下に表示されているコントローラーで操作するやり方は、「ゼロから学ぼうScratch(スクラッチ)プログラミング1時間目:操作方法9 画面のコントローラーで向きが変わり、その方向に動くやり方」で詳しく解説していますので、御覧ください。

 

playerスプライトと迷路スプライト、goalスプライトとの当たり判定スクリプト
  1. メッセージ「3」を受け取ると、変数「stage」の値を「1」にする。
    ※ゲームでは3つのステージがあります。変数「stage」の値は、プレイヤーのステージ番号を表します。
  2. 処理3-4の条件文のチェックをずっと続ける。
  3. もし、playerスプライトが迷路スプライトに触れると、playerスプライトは「Clang」の音を鳴らし、startスプライトの中心に瞬間移動し、右(90度)を向く。
    ※このスクリプトにより、playerスプライトは迷路スプライトに触れると、スタート地点であるstartスプライトの真上に戻ります。
  4. もし、playerスプライトがgoalスプライトに触れると、「Connect」の音を鳴らす。そのとき、変数「stage」の値が「3」(最終ステージ)のときは、メッセージ「gameover」を送信し、変数「stage」の値が「3」以外(つまり「1」か「2」)のときは、変数「stage」の値を1だけ増やし、startスプライトの中心に瞬間移動し、右(90度)を向く。
    このスクリプトにより、playerスプライトはgoalスプライトに触れると、ステージ1や2のときは次のステージでゲームが再開され、ステージ3(最終ステージ)のときはゲームクリアとなりゲームが終了します。ゲームの場合のgameoverメッセージは、ゲームクリア用として使用しています。

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、他のスプライトのスクリプトが停止する。

※メッセージ「gameover」を受け取ると、同じplayerスプライト内で実行中であるスクリプトが停止します。つまり、先に説明した「playerをコントローラーで操作する」スクリプトと「playerスプライトと迷路スプライト、goalスプライトとの当たり判定」スクリプトが停止します。

STEP.2
迷路スプライト

迷路スプライトが表示されるスクリプト

メッセージ「3」を受け取ると、迷路スプライトがステージに表示される。そのとき、変数「stage」の値と同じコスチューム番号のコスチュームがステージに表示される。
※迷路スプライト の3つのコスチュームを持っています。Scratchのコスチュームはコスチューム名だけでなく、サムネイルの左上に表示されている番号でも指定できます。つまり、変数「stage」の値が「1」ならがステージに表示され、変数「stage」の値が「2」ならがステージに表示され、変数「stage」の値が「3」ならがステージに表示されます。

STEP.3
startスプライト

startスプライトが表示されるスクリプト

メッセージ「2」を受け取ると、startスプライトがコスチューム名「コスチューム1」の見た目でステージに表示される。

メッセージ「3」を受け取ると、startスプライトがステージに表示される。そのとき、変数「stage」の値と同じコスチューム番号のコスチュームがステージに表示される。

※startスプライト の3つのコスチュームを持っています。Scratchのコスチュームはコスチューム名だけでなく、サムネイルの左上に表示されている番号でも指定できます。つまり、変数「stage」の値が「1」ならがステージに表示され、変数「stage」の値が「2」ならがステージに表示され、変数「stage」の値が「3」ならがステージに表示されます。

STEP.4
goalスプライト

goalスプライトが表示されるスクリプト
  1. メッセージ「3」を受け取ると、goalスプライトがステージのX座標=105、Y座標=-60の位置に表示される。
  2. 変数「stage」の値が「2」になるまで、このスクリプトの実行をストップし、変数「stage」の値が「2」になったら、X座標=200、Y座標=90の位置に瞬間移動する。
  3. 変数「stage」の値が「3」になるまで、このスクリプトの実行をストップし、変数「stage」の値が「3」になったら、X座標=95、Y座標=0の位置に瞬間移動する。
    ※ゲームで3つのステージがあり、それぞれの迷路コースが異なります。そのため、goalスプライトの位置(X座標、Y座標)をステージ毎に変えています。このスクリプトにより、goalスプライトの位置は、ステージ1ではX座標=105、Y座標=-60、ステージ2ではX座標=200、Y座標=90、ステージ3では、X座標=95、Y座標=0となります。
STEP.5
gameoverスプライト

「gameover」メッセージを受け取ったとき

メッセージ「gameover」を受け取ると、gameoverスプライトが表示される。
※コスチュームは「THE END」という文字画像なので、「gameover」メッセージが表示されるとステージに「THE END」という文字が表示されます。ゲームの場合の「THE END」は、ゲームクリア用として使用しています。

Scratch3.0(スクラッチ3.0)とは?

MITメディアラボにより開発されたビジュアルプログラミング言語。子供たちが物語やゲーム、 アニメーションなどのインタラクティブな作品をプログラミングできる。また、自分の作った作品を世界中の人々と共有できるコミュニティーサイトでもある。世界中で1億人を超えるユーザがいる。
こちらのホームページにアクセスすれば無料で利用できる。