Scratchで自動販売機を作ろう

Scratchで自動販売機のプログラムを作ってみます。
プログラムは割と簡単です。
投入されたお金の計算、ボタンを押してジュースを出す、飲み物を買ったらお金を減らすというのが主なプログラムです。
変数、条件、ブロック、メッセージの使い方を勉強するのにちょうどいい難易度です。

プログラムの概要
用意するスプライト
プログラム
投入金額の表示

プログラムの概要

自動販売機を再現したプログラムです。
お金をドラッグして投入口に持っていくと、お金を入れることができます。
飲み物の値段より高い金額を入れると、ボタンがオレンジになり押すことができます。
ボタンを押すと飲み物が出てきて、お金がへります。
返却レバーを押すとお金が０になります。

用意するスプライト

用意するスプライトはちょっと多いです。
・自動販売機本体
・お金の投入口（自動販売機と別に作ります）
・返却レバー（自動販売機と別に作ります）
・飲み物2つほど
・購入ボタン（飲み物の数）
・お金（500円、100円、50円、10円）

丸と四角を組み合わせて作るので、お絵描きは簡単です。

自動販売機本体です。
大きく赤い四角で本体を描いて、飲み物を並べる白い四角と、飲み物が出てくる水色の四角を作っておきます。

お金の投入口です。
灰色の丸に、黒い長方形を付けて作ります。

お釣りの返却レバーです。
ただの長方形でもいいのですが、ちょっと凝った作りにしました。
灰色の長方形を作って、変形ツールで斜めの線にしたり丸みをつけたりしました。

1つ目の飲み物です。
長方形に楕円を付けてジュースの缶っぽくしました。
そこの丸みは変形ツールで丸くしました。

2つ目の飲み物です。
1つ目の飲み物をコピーして、色だけ変えました。

1つ目の飲み物用のボタンです。
標準で用意されているボタンのスプライトに、飲み物の値段を書き加えました。
コスチューム２も使います。
オレンジ色のボタンの方にも同じ値段を書いておきます。

2つ目の飲み物用のボタンです。
値段は変えておく方がかっこいいプログラムになります。
同じように、コスチューム２も使うので値段を書いておきます。

100円玉は〇に100と書いておきます。

50円玉です。

500円玉です。

10円玉です。

スプライトを自分で描くのが面倒な人は、こちらを利用ください。

自動販売機スプライトダウンロード

プログラム

スプライトをすべて配置したらこのような完成形になります。
覚えておいてください。

自動販売機スプライト

作成した自動販売機のスプライトを配置します。
場所は適当です。
少し端っこに寄せておくのが良いです。
空いたスペースにお金を置こうと思います。

自動販売機本体のプログラムです。

特別な処理はありませんが、変数「金額」を作っておきます。

プログラムを開始したら配置場所をセットします。
基本的には動かないスプライトなのですが、うっかりドラッグしてしまったとき用に座標を戻すプログラムを仕込んでおきます。
変数「金額」は０にして初期化しておきます。
ついでに「ドラッグできないようにする」で、うっかり動いてしまうのを防ぎます。

お金投入口スプライト

スプライトの設定はこのような感じです。

お金のスプライトが触れたら自動販売機にお金を投入したことにする役割を持たせます。

プログラムはこのようになっています。

まずは初期処理部分です。

ドラッグなどで場所がずれたとき用に座標を戻す処理を入れています。
何かのタイミングで自動販売機の後ろに隠れてしまう事があるので「最前面へ移動する」を入れておきます。
後は、うっかり移動しないように「ドラッグできないようにする」も入れます。

次はプログラムのメイン部分になります。
お金が投入されるのを待ち続ける処理です。
「ずっと」を使って待ち続ける処理を作ります。

後は、お金のスプライトがドラッグされて「お金投入口」に重なったら、変数「金額」に投入された金額を足し算します。

金額＝金額+500　という計算式について。
馴染みのない書き方の計算式ですが、プログラムの世界ではよく使う手法です。
今変数に入っている金額に500を足して、新たに変数「金額」に値を入れるという意味になります。

最後に、メッセージで「お金変更」を送ります。
これは、自動販売機に投入された金額が変更されたのをきっかけに、飲み物のボタンの色を変えたり、ドラッグしたお金の位置を元に戻すために使っています。

返却レバースプライト

自動販売機に投入されたお金を返却する役割を持たせます。

プログラムはこのようになっています。

まずは、初期化部分です。
スプライトの位置調整と、ドラッグ移動できないようにしています。

次がプログラムの本体です。
基本的には、変数「金額」を0にするだけのプログラムでいいのですが、レバーが動くようにしてみました。
レバーを15度下げて戻ってくる処理を入れました。

間に「1秒待つ」を入れているのは、レバーが下がったのを見やすくするためです。
これが無いと、コンピュータの処理速度でレバーの下げ上げが処理されるので、人の目で見るのは難しいぐらい早く動くためです。

ボタン1スプライト

飲み物1を買うときに押すボタンのスプライトです。
投入されたお金が120円を超えると、オレンジ色になって押せるようになります。

プログラムはこのようになってます。

初期化プログラムです。
プログラムが開始されたら、スプライトの位置を戻す、ボタンを青色のコスチュームに変える、ドラッグできないようにします。

次は、お金が投入されたイベントを受けて、スプライトの色を変えるプログラムです。
「お金変更」のメッセージを受け取ったときに動くプログラムにしています。
金額が飲み物代以上（120または120より大きい）になったらオレンジのコスチュームに変更しています。
それ以外なら、青色のコスチュームに変更します。
これはジュースが買われてお金が足りなくなったり、返却レバーが押されて０になったときにボタンを押せなくするためのプログラムです。

ボタンが押されたときのプログラムです。
このスプライトがクリックされたときにイベントが起きます。
コスチュームがオレンジ（２）の時に動くプログラムを作っています。
ボタンが押されたら、金額から飲み物代を引きます。
その後、「お金変更」メッセージと「飲み物１購入」メッセージを送って、他のスプライトのプログラムを動かします。
コスチュームが青（１）の時もボタンは押されますが、プログラムは空振りします。

ボタン２スプライト

ボタン2のスプライトはボタン１とほぼ同じなので説明は省略します。

プログラムもほぼ同じです。
画僧だけ掲載しておきます。

飲み物１のスプライト

自動販売機に陳列している飲み物のスプライトです。
陳列するだけなら自動販売機の中に描いてもいいのですが、出てくる飲み物も兼用するのでちょっとややこしい作りになっています。

プログラムです。

まずは、定番の初期化プログラムです。
位置の調整をしておきます。

ボタン１が押されて購入されたときに呼ばれるプログラムです。
ここでは出てくる飲み物をクローンで作ります。

次はクローンを取り出し口から出てくるようにするプログラムです。
「クローンされたとき」のイベントを使っています。
このイベントを使わないと、クローンの元になった方のスプライトを動かしてしまいます。
あとは、配置する座標を決め、横向きにしています。
ちょっとだけ座標を変更して、出てきた風のアニメーションを付けています。
しばらく表示した後はこのクローンを削除しています。