scratch

Scratchで絵合わせパズルゲームを作ってみよう!

テク先生

今日は、Scratchで絵合わせパズルゲームを作ってみよう!

あいたろうくん

先生!絵合わせパズルゲームってどんなゲームですか?

テク先生

上から出てくる半分のイラストを正しいイラストと合わせて完成させるゲームだよ!
マウスを使ってドラックアンドドロップすることで操作することができるよ!

あいたろうくん

でも、パズルって難しそう……

テク先生

イラストが半分になっているだけだからそんなに難しくないよ!
制限時間もないから自分のペースでプレイできるね!

あいたろうくん

そうなんだ!
遊んでみてもいいですか?

テク先生

そうだね!
まずは遊んでみよう!

自宅でできるプログラミング子供向け教材
自宅でできる!プログラミング子供向け教材 プログラミングおもちゃ【embot】 こどものロジカル思考を育てるダンボール教材 https://www.youtube...
子供向けオンラインプログラミング教室おすすめ
子供向けオンラインプログラミングスクールお勧め3選! ソニーのオンライン学習サービス 「CREATE by KOOV」 脳がKOOVに出会うと潜在能力が開花する! https...

遊んでみよう!

テク先生

上のくだものと下のくだものを合わせてみよう!

あいたろうくん

くだものを増やしたり、好きなイラストで制作してみても面白そうですね!

テク先生

そうだね!
完成したら変更してみても面白いね!
では、制作していこう!

ステージを作ろう!

テク先生

まずは、ステージから作っていくよ!

ステージ

描くを選択します。

テク先生

この背景はタイトルに使うから、
好きなタイトル画面を作ってみてね!

あいたろうくん

どんなタイトル画面にしようかなぁ?

テク先生

作るのが難しかったら、
下の画像をダウンロードして背景として使ってみてね!

テク先生

次はメインゲームの背景を選択していくよ!
まずは背景を選ぶを選択してね!

Blue Skyを選択します

注意!
何も描かれていない背景を削除しておいてください。

背景が二つになっているかを確認してください。

テク先生

背景が選択できたらコードを組み立てていくよ!
「まずは緑の旗が押されたとき」から作っていくよ!

”緑の旗が押されたとき”を使って全体の動きを制作していきます。

全体の動きの管理は”メッセージ”を使って行います。

”メッセージブロック””イベントタブ”の下の方にあります。

新しい”メッセージ”を作成するときは、
”メッセージ1”を選択して”新しいメッセージ”を選択します。

新しいメッセージを選択したら、
名前を決めて”OK”を選択します。

今回は新しく”初期化””タイトル”を制作します。

制作したら”緑の旗が押されたとき”と組み合わせます。

テク先生

「初期化を送って待つ」と
「タイトルを送る」は違うから間違えないようにね!

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

ここからは先ほど作成したメッセージの”初期化”を使って作成していきます。
作成場所はステージです。

初期化では、使用する変数に初期値を入れたり、
初めの起動に必要な要素を決めていきます。

まずは変数を制作していきます。
使用する変数は6個です。

中でも”シーン”という変数は、ゲームの現状を管理する変数です。
タイトルからメインに移行した際、数値が1から2に値が変わります。

”残り:”という変数には”パズルの総数”という変数の値を入れますので、
パズルの総数が先に初期化されるように気をつけましょう。

変数の初期化が終わったら音量の初期化をしましょう。

音量の次は”リスト”を制作します。
リストの制作方法は以下の通りです。

リストを隠した後リストの中身を初期化します。
初期化した後”パズルの総数”回、0から2までの乱数をパズルリストに入れます。

0から2という数字は、
リンゴ、バナナ、オレンジが
0、1、2という順番で割り振られています。

テク先生

次は「タイトルを受け取ったとき」を制作していくよ!

新しく”BGM””スタートボタン_UP”というメッセージを追加します。

”タイトルを受け取ったとき”の全体はこちらです。
”スプライトの他のスクリプトを止める”を使ってBGMを止めたり、
シーンの更新やBGMの更新、背景の更新、スタートボタンを起動したりしています。

テク先生

次は「メインを受け取ったとき」を制作していくよ!

ここではシーンという変数を使って現在の状態を管理しています。

新しいBGMを流す前に今流れているBGMを止めるコードです。

新しく「消去」「ゲームクリア」のメッセージを使います。

初期化でパズルナンバーに0を入れてあるので、
メインが更新されるたびに1.2.3.4.5増えていきます。

パズルパターンをパズルリストのパズルナンバー番目にすることで、
初期化のタイミングでパズルリストに入ってある0~2の3つの数字が、
メインの更新タイミングでリストの1番目から順番にパズルパターンを更新することができます。

メインの更新タイミングで残り:0なら、
残り:非表示にしてゲームクリアのメッセージを送ります。

これらをまとめたのがこちらです。

テク先生

次は「ゲームクリアを受け取ったとき」を制作していくよ!

”ゲームクリア”のメッセージを作っていきます。

ここではBGMの更新シーンの更新を行っています。
全体像がこちらです。

テク先生

次は「BGMを受け取ったとき」を制作していくよ!

”BGM”のメッセージを作っていきます。

ここではBGMを受け取ったとき現在のシーンに合わせたBGMを流すようにしています。

BGMを選んでいきましょう。
”音を選ぶ”から

ループタブを選択し、

その中からシーンに合ったBGMを選びます。

各BGMを選んだらわかりやすいように名前を変更しておきます。

テク先生

お疲れ様!
ステージが完成したね!

完成した背景の全体像はこちらです。

スタートボタン

テク先生

次は「スタートボタン」を制作していくよ!

スタートボタンを作っていきます。

右下の”スプライトを選ぶ”を選択します。

スイカのイラスト食べ物タブから探します。

半分になっているスイカはコピー&ペーストで複製し反転させます。

割れていないスイカの方には、
startのテキストを追加します。

完成するとこんな感じです。

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

”初期化”のコードを組み立てていきます。

座標の固定と角度の固定を行います。

次に”ドラッグできないようにする”
音量の設定をします。

次にコスチュームの設定と大きさの設定、隠すを選択すると
初期化の完成です。

次にスタートボタンの音を選びます。
音を選ぶから、

効果音のタブを選択し、

スタートの音を選びます。

選んだらわかりやすいように名前を変更します。

テク先生

次は「スタートボタン_UPを受け取ったとき」を制作していくよ!

次に”スタートボタン_UP”のコードを組み立てていきます。

表示するずっとを組み立てます。

”もしステージの背景#が1なら”を組み立てます。

もしマウスが押されたら
コスチュームを2に変更しスタートの音を鳴らします。
すぐにメインに移動せず、
0.5秒まってからメインを送ってスタートボタンを隠します。
このスクリプトはずっとで動いているので最後にこのスクリプトを止めます。

完成した全体像はこちらです。

りんご

テク先生

次は「りんご」を制作していくよ!

リンゴを作っていきます。
スプライトを選ぶから、

Appleを選択します。

選択したAppleをベクターに変換します。

右下の範囲選択を選択し、

リンゴの右半分を選択します。

選択された右半分をコピーします。

次に描くから、

コピーの右側にある貼り付けを選択します。

貼り付けた右半分のリンゴを中心に合うように移動させます。

次に先ほど右半分を範囲選択したスプライトの左半分を選択します。

先ほど同様選択した左半分をコピーし、
描くを選択した後左半分を貼り付けします。

このように三つのイラストが完成すれば成功です。

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

それでは、初期化のコードを組み立てていきます。

今回のリンゴでは、たくさんの変数を使用します。

変数を作る際に気を付けなければいけないのは、
”このスプライトのみ”にチェックを入れる事です。
6つの変数すべて”このスプライトのみ”にチェックを入れます。

6つ作成できたら初期値を入れていきます。

初期値が入れ終わりましたら、
座標の初期値と角度の初期値を入れていきます。

次に大きさとコスチューム、隠すの設定をします。

次に”ドラッグできないようにする”を追加します。
これで初期化が完成です。

テク先生

次は「パズル_UPを受け取ったとき」を制作していくよ!

”パズル_UP”を受け取ったときを制作していきます。

0より”残り:”が多いなら自分自身のクローンを作り、
パズルパターンが0(りんご)ならば表示します。

テク先生

次は「消去を受け取ったとき」を制作していくよ!

次は”消去”を作っていきます。
消去が送られたとき”このクローンを削除する”だけです。

テク先生

次は「クローンされたとき」を制作していくよ!

次に”クローンされたとき”を作っていきます。

座標を設定します。

大きさとコスチューム、表示するを設定します

ドラッグできるようにするを追加します

クローンのX座標が本体のX座標の範囲内に収まっているかを判定し、
パズルパターンが0(リンゴ)であるかを判定します。

同様にY座標も作成します。

”でなければ”に元の位置に戻す処理を追加します。

範囲内でマウスを離した場合、
本体と綺麗にくっつくように修正し、

”完成!”を送ります。
その後元の位置に戻し、
”残り:”を減らしてメインを送ります。

完成した全体像はこちらです。

テク先生

お疲れ様!
リンゴが完成したね!

リンゴの全体像はこちらです。

バナナ

テク先生

次は「バナナ」を制作していくよ!

バナナを制作していきます。
先ほど同様バナナを追加します。

追加したバナナを半分にします。

先ほど同様3つのコスチュームを制作します。

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

初期化を制作していきます。

先ほど同様6つの変数を作成します。
作成する際は、”このスプライトのみ”にチェックを入れるのを
忘れないようにしてください

座標や大きさの設定をしていきます。

テク先生

次は「パズル_UPを受け取ったとき」を制作していくよ!

続いて”パズル_UP”の制作をしていきます。

こちらも先ほど作成したものとほぼ一緒です。
違う点はパズルパターンが1(バナナ)の時の条件文のみです。

テク先生

次は「消去を受け取ったとき」を制作していくよ!

続いて”消去”を作成します。
こちらも先ほど作成したものと全く同じものになります。

テク先生

次は「クローンされたとき」を制作していくよ!

続いて”クローンされたとき”を作成します。

座標などを設定します。

リンゴと同様、同じものを作成しますが、
パズルパターンが1の時や細かい数値が違うので気を付けてください。

完成したものがこちらです。

テク先生

お疲れ様!
バナナが完成したね!

バナナの全体像はこちらです。

オレンジ

テク先生

次は「オレンジ」を制作していくよ!

オレンジを作成していきます。
先ほど同様オレンジを3つに分けていきます。

3つのコスチュームを作成できたら完成です。

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

次に”初期化”を作成します。

先ほど同様6つの変数を作成します。
作成する際は、”このスプライトのみ”にチェックを入れるのを
忘れないようにしてください

座標や大きさの設定をしていきます。

テク先生

次は「パズル_UP」を制作していくよ!

続いて”パズル_UP”の作成をしていきます。

先ほど同様、同じものを作成していきますが、
パズルパターンが2(オレンジ)の時が違うので気を付けてください。

テク先生

次は「消去を受け取ったとき」を制作していくよ!

次に消去を作っていきます。
こちらも先ほどと同じものなのでコピー&ペーストで構いません。

テク先生

次は「クローンされたとき」を制作していくよ!

続いて”クローンされたとき”を作っていきます。

座標や大きさの設定をしていきます。

リンゴと同様、同じものを作成しますが、
パズルパターンが2の時や細かい数値が違うので気を付けてください。

完成したものがこちらです。

エフェクト

テク先生

次は「エフェクト」を制作していくよ!

エフェクトを作成していきます。
まずは描くを選択します。

円を選択して、

色をグラデーションで2色選択して、
サイズを5にします。

中心を囲うように輪っかを複数作成します。

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

続いて初期化を作成していきます。

まず座標や大きさの設定をしていきます。

テク先生

次は「完成!を受け取ったとき」を制作していくよ!

続いて”完成!”を作成していきます。

完成の音を鳴らして大きさを徐々に大きくする処理です。

完成の音を選んでいきます。
音を選ぶから、

効果音のタブを選択し、

効果音に合った音を選択します。

わかりやすいように名前を変更します。

テク先生

お疲れ様!
エフェクトが完成したね!

完成した全体像がこちらです。

Game clear

テク先生

次は「Game clear」を制作していくよ!

Game clearを作成していきます。
まずは描くから、

四角を選択します。

グラデーションを選択し水色から選択なし
グラデーションするように2色選択します。
枠線もなしにします。

青色四角形が完成したら、

黄色テキストを入れていきます

”Game clear”と打ったら、

マウスカーソルを選択し、

サイズと位置を修正します。

完成したらわかりやすいように名前を変更します。

テク先生

次は「初期化を受け取ったとき」を制作していくよ!

続いて”初期化”を作成していきます。

座標を選択します。

テク先生

次は「ゲームクリアを受け取ったとき」を制作していくよ!

続いて”ゲームクリア”を作成していきます。

座標を設定します。

マウスがクリックされたらタイトルに戻る処理を作成します。

テク先生

お疲れ様!
これで「絵合わせパズルゲーム」が完成したね!

あいたろうくん

やったー!
大変だったけど、完成すると嬉しい!

テク先生

完成すると嬉しいね!
イラストを変えたり、
エフェクトを変えたりして見てもいいね!

あいたろうくん

遊んだら変えたい!
次は自分でやってみる!

これですべて完成です!
お疲れさまでした!
うまく制作できたら、果物を好きなイラストなどに差し替えて遊んでみてください!

正しく動かない場合はもう一度画像を確認して違いが無いか確認しましょう。

その他の『Scratchの教材』はこちら!!