Scratchでハンバーガーを作ろう!

Scratch

こんにちは、ECF Techブログ
担当 Michiです。

ハンバーガーのイラストを描いてみたので、どんなゲームができるかをScratchで模索してみました。

色んな観点からこんなゲームを作った。というアプローチをしてみたいので、何回かのシリーズでお伝えしたいと思っています。よろしくお願いします。

つくるゲーム

  • ハンバーガーの具材が左右に動いています。
  • スペースキーを押すと下の具材から順にストップします。
  • なるべくキレイなハンバーガーになるようにしましょう。

実際のゲームはScratch公式サイトで共有しています。下のリンクをクリックして遊んでみてください。

https://scratch.mit.edu/projects/353208487/

つかう素材

今回は下の画像を使っています。ご自由にご活用ください。

パン(上)

レタス

トマト

チーズ

パティ

パン(下)

お皿

画像の準備

背景を選びます。画面右下のボタンから選ぶことができます。

スプライトの準備

上の画像を1つ1つスプライトとして読み込んでいきます。スプライトの追加ボタンから下のようにたどり、画像をアップすることができます。

スプライトをすべてアップしました。

ハンバーガーっぽくなるように、それぞれのスプライトをドラッグアンドドロップで配置してみましょう。

マウスを使って直接スプライトを動かすと、そのスプライトが前面に出てきますので、ハンバーガーの場合は下の具材から位置を調整していきます。

あとからプログラムで調整するので、キレイな状態になっている必要はありません。

こんな感じに配置しました。ねこちゃんの頭にお皿が乗っているイメージです。

上の画像では、各スプライトのサイズを次のように調整しています。

  • ハンバーガーのすべての具材 → 40
  • お皿 → 60

プログラム

変数の準備

あらかじめ「段目」という名前の変数を用意します。

パティーのプログラム

それでは、プログラムを見ていきましょう。プログラムを書くのは、ハンバーガーの具材のうち、パンの下以外の具材のみです。

パティーを例に見ると、プログラムは次のようになります。

(旗が押されたときのプログラム)

  • 変数段目は、次にストップするのは何段目の具材かを表します。最初は1なので1段目です。
  • 段目が2に変わるまで、左右に移動し続けます。下の2つのブロックを使うことでプログラムを簡単にしています。
    • 4歩動かす
    • もし端に着いたら、跳ね返る

(スペースキーが押されたときのプログラム)
スペースキーを押すと、変数段目が2に変わります。それにより、左側のプログラムのくり返しが終了し、具材の動きが止まります。

その他の具材のプログラム

パティー以外の具材のプログラムもほぼ同じです。まとめて掲載します。
※画像下にプログラムをコピーして効率をあげる方法を記載しています。

各図の赤囲み必須の変更です。具材を順番にとめる必要がありますので、1段ずつ数字がずれています。

黄色囲み変更してもしなくてもOKです。具材の動くスピードを変えています。上の具材ほど難しい。という感じです。

最後のパンの上プログラムの青囲み部分は、ゲームをやり直すときに必要な処理になります。このブロックがないと、再度スタートボタンで再開したときに一番上のパンがと動かなくなります。

バックパックを活用する

このように、別々のスプライトに類似のプログラムを書く際にはバックパックの機能が便利です。

バックパックはプログラムのかたまりを入れておける道具箱のようなものです。次のようにして使います。

バックパックをクリックし、開きます。

入れておきたいプログラムをドラッグします。

別のスプライトで、使いたいプログラムをバックパックから取り出します。

これで第1段階としては完成です。スタートボタンをクリックするとそれぞれの具材が動きます。

スペースを押すたびに1つ1つ具材をストップできます。

得点をつける

ここから少し応用編です。ハンバーガーの出来ぐあいを点数で表したいと思います。

採点方法は次の考え方を用います。

  • お皿の中心と各具材との距離を求める
  • 各具材の距離を合計する
  • 合計の値によって、次のように計算する
    • 合計が500以上:0点
    • 合計が500未満:500-合計を5で割る
      これで100点満点の点数ができます。

プログラム

それぞれの具材(パティー、レタス、トマト、チーズ)の旗が押されたときから始まるプログラムの最後に次のブロックを追加します。

パンの上は次のプログラムを追加します。

  • X座標の値は小数点で取得されることがあります。そのため、四捨五入で小数部分を取ります。
  • X座標は真ん中が0となるため、マイナスの値になることがあります。単純に距離を求めたいので絶対値の計算を用いて、マイナスの記号を取ります。

パンの上に追加されたメッセージ1を受け取るプログラムをねこのスプライトに追加します。

  • もし~ならのブロックを使って、得点が500以上の場合とそうでない場合に分け、計算をしています。

  • 演算のグループにある下のブロックを使って、計算結果と「点だよ」の文字列をくっつけています。

  • 再度遊ぶときに得点を0にするプログラムも追加しています。

これで完成です。旗をクリックして遊んでみましょう。最後にねこちゃんが点数を教えてくれます。

おわりに

今回は以上とさせていただきます。最後までありがとうございました。簡単に楽しめるので、チャレンジしてみてください。

特に得点をつける部分は、得点をつける考え方、距離の求め方、四捨五入や絶対値の役割などを学ぶこともできます。プログラムは少し難しいですが、教材としてもご活用ください。

タイトルとURLをコピーしました