【Scratch入門】Scratchで簡単なカウントダウンタイマーを作る

2021/03/20

2022/07/21

【Scratch入門】リミックスのやり方〜気になるプログラムからScratchを自習する方法

【Scratch入門】簡単なストップウォッチを作ってみる

公開されているリミックスしたプロジェクトからScratchのプログラミングを学習してみるコーナーです。今回はカウントダウンタイマーの作り方のポイントを解説していきます。

なお、リミックスするやり方に関しては以下の記事を参照ください。

【Scratch入門】リミックスのやり方〜気になるプログラムからScratchを自習する方法

気になるScratchプロジェクトをコピーして自分のプロジェクトに追加する「リミックス」の手順について解説します。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

カウントダウン・タイマーのプログラム例

今回は

カップヌードルを食べるためのタイマー

をリミックスしたプログラムでどのようにタイマーが作らているかを解説します。

(※注) なお、タイマーがゼロになると、パソコンのスピーカー設定によっては

どデカい大きい音

が出るかもしれませんのでご注意ください。

このプログラムですが、スタートしてほぼ３分後にブザーがなるだけの簡単なタイマー・アプリです。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

タイマーの作り方

ではこのプログラムの中身を解説していきましょう。

スプライトは主に3つでタイマーが構成されています。

これらのスプライトはそれぞれ、

分

・

秒　十の位

・

秒　一の位

という名前です。

コスチューム画像を見ていくと、

分

のスプライトは3分まで測れればよいので、0~3(コスチューム0~コスチューム3)までの数字の画像を持っています。

秒　十の位

と

秒　一の位

のスプライトは最大59秒まで図れればよいので、それぞれ0~5と0~9までのコスチューム画像を準備しておきます。

分のスプライト

まずは分のスプライトのブロックコードに着目します。

上の図は分のスプライトの中身を少し整理したものです。

まず①の部分ですが、これは初期値の設定を行っているブロックです。プログラムがスタートした(

🚩

ボタンを押した)ときに、数字の３の画像に設定し、またスプライトの表示座標を定位置に来るように設定しています。

次に②の部分がこのスプライトの処理ループになっています。

このループは実際プログラムの終了を呼び出すだけで、他は何もしていないブロックです。

コスチューム番号が４

(つまりは数字のゼロのコスチューム)のとき、かつ、

秒の十の位のコスチューム#(番号)が1(番目)

(つまり数字のゼロのコスチューム)のとき、かつ、

秒の一の位のコスチューム#(番号)が1(番目)

(つまり数字のゼロのコスチューム)、の3つの条件を満たすときだけ、

おわり

のイベントが送信される仕組みです。

③の部分では、

分

というイベントを受け取った時に、コスチュームを次の番号に変えています。つまり、このイベントが呼び出される度に

3 > 2 > 1 > 0

という画像に切り替わるようになります。

④の部分ですが、これは

おわり

イベントを受け取ると、このスプライトの処理が終了するようにしている箇所です。

秒の十の位のスプライト

秒のスプライトは2つありますのでまずは十の位のほうを見ていきます。

先ほどと同様で、①の部分でコスチュームの種類と文字を描画する位置の初期化を行っています。このときの

コスチューム0

とは数字のゼロのことです。

②はこのスプライトのループ処理で

コスチュームの番号 = 2(番目)

(2番目のコスチュームは数字の５)、かつ、

秒一の位のコスチューム#(番号) = 2(番目)

(秒一の位の2番目のコスチュームは数字の９)の時に、

分

のイベントを送信して、先ほどでも解説したように

分

のコスチュームを変えています。

またループの中で

30秒

待っているのは、無駄な処理をさせないための工夫のようです。(この待ち時間は無くても動きますが、少なくとも60秒に1回の頻度でループの中の処理が動く必要があります。)

③は

十の位

という名前のイベントを受け取ると、次のコスチュームに変えるように働きます。

④は先ほどと同様に

おわり

イベントでこのスプライトの動作が終了します。

秒の一の位のスプライト

最後に秒の一の位のスプライトの実装を見てみます。

①は初期化の処理で、スプライトを描画する位置とコスチューム(数字のゼロ)にしています。

このプログラムのもっとも重要ともいえる

タイマー

の役割を果たしている部分が②です。

まずスタートしてから最初の1秒を待って、タイマーのループに入っています。このループではまず秒の一の位のコスチュームを変えてから、

0.992秒

だけ待っています。

残りの

0.008

秒がどこにいったのかというと、これはコスチュームが変わる時の処理でほんの少しだけ遅延する分を考慮して、1秒よりちょっとだけ早めにループ時間を早めているようです。

どのくらい描画処理が遅延するかは、プログラムを実行するユーザーのデバイスにも依るので、一概にループ時間を何秒に設定するのが良いとは言えませんが、このプログラムの説明書きにも「ほぼ３分」と言われているのがこのプログラム部分のことを指していると思われます。

さて、タイマー部分とは別にもう一つ③の部分にこのスプライトの処理も書かれています。これは

コスチュームの番目 = 2

(つまりは数字の９)ならば

十の位

のイベントで、秒の十の位のスプライトのコスチュームを変化させて、１秒間ごとにコスチュームの状態をチェックしているプログラムです。

④は上と同じで、

おわり

イベントでスプライトの動作を終了させています。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

まとめ

以上、カウントダウン式のタイマーの簡潔なプログラミングレシピでしたが、いかがだったでしょうか。

カウントダウンする時間は一定のため実用性の幅は限られますが、アイデア次第では今回のようにシンプルながら面白いプログラムになっていると思います。

このテクニックを使えば、時間切れで終了となるゲームにも応用できそうです。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選