スクラッチでプログラミング | デジタル時計

デジタル時計
作品の説明
現在の時間と分を表示するシンプルなデジタル時計です。
ブロック構成
スプライト:時1
スプライト:時2
スプライト:分1
スプライト:分2
スプライト:コロン
作り方と説明
Step01 背景を設定しよう
背景をデジタル時計にします。
背景の設定方法については、「スクラッチ入門 - 背景を設定しよう」で詳しく紹介しています。
Step02 スプライトの動きを設定しよう
1.時1の設定をします。
小人03
緑の旗がクリックされたときの処理
(1)スプライトの大きさを変更する
素材のスプライトは大きめに作成してあるので、小さくする必要があります。大きさを50%に変更します。

(2)初期位置を設定する
文字をきれいに並べるために、初期位置を設定します。x座標:-135、y座標:0にします。

(3)2桁目の時間を取得して表示する
時1は、2桁目の時間を表します。時刻は常に変化するので、ずっとブロックを利用します。
時刻を取得するブロックは、「現在の時」ブロックで取得して、2桁目の時間は「2番目(現在の時)の文字」ブロックで取得します。

2.時2の設定をします。
小人03
緑の旗がクリックされたときの処理
(1)スプライトの大きさを変更する
素材のスプライトは大きめに作成してあるので、小さくする必要があります。大きさを50%に変更します。

(2)初期位置を設定する
文字をきれいに並べるために、初期位置を設定します。x座標:-60、y座標:0にします。

(3)2桁目の時間を取得して表示する
時2は、1桁目の時間を表します。時刻は常に変化するので、ずっとブロックを利用します。
時刻を取得するブロックは、「現在の時」ブロックで取得して、1桁目の時間は「1番目(現在の時)の文字」ブロックで取得します。

3.分1の設定をします。
小人03
緑の旗がクリックされたときの処理
(1)スプライトの大きさを変更する
素材のスプライトは大きめに作成してあるので、小さくする必要があります。大きさを50%に変更します。

(2)初期位置を設定する
文字をきれいに並べるために、初期位置を設定します。x座標:60、y座標:0にします。

(3)2桁目の時間を取得して表示する
分1は、2桁目の分を表します。時刻は常に変化するので、ずっとブロックを利用します。
時刻を取得するブロックは、「現在の分」ブロックで取得して、2桁目の分は「2番目(現在の分)の文字」ブロックで取得します。

4.分2の設定をします。
小人03
緑の旗がクリックされたときの処理
(1)スプライトの大きさを変更する
素材のスプライトは大きめに作成してあるので、小さくする必要があります。大きさを50%に変更します。

(2)初期位置を設定する
文字をきれいに並べるために、初期位置を設定します。x座標:135、y座標:0にします。

(3)1桁目の時間を取得して表示する
分2は、1桁目の時間を表します。時刻は常に変化するので、ずっとブロックを利用します。
時刻を取得するブロックは、「現在の時」ブロックで取得して、1桁目の分は「1番目(現在の分)の文字」ブロックで取得します。
5.コロンの設定をします。
小人03
緑の旗がクリックされたときの処理
(1)スプライトの大きさを変更する
素材のスプライトは大きめに作成してあるので、小さくする必要があります。大きさを50%に変更します。

(2)初期位置を設定する
文字をきれいに並べるために、初期位置を設定します。x座標:0、y座標:0にします。

スプライトの設定については、「スクラッチ入門 - スプライトを設定しよう」で詳しく紹介しています。
実行例
デジタル時計
この作品で利用したブロック
カテゴリ ブロック
動き
イベント
見た目
制御
しらべる
演算
この作品で利用した素材
素材名または画像をクリックすると、ダウンロード・詳細ページへ移動します。
背景の素材
スプライトの素材
すべての素材をダウンロード
・デジタル時計
・数字0~9
・コロン
※一括ダウンロードをクリックすると全ファイルがZIPフォルダでダウンロードされます。
スポンサードリンク
関連ページ
翻訳マシン
にほんごボタンを押すと、日本語に翻訳。えいごボタンを押すと英語に翻訳する。
当サイトと管理人