スクラッチプログラミング - すうじをひょうじしよう

ゲームの点数(てんすう)やタイマーなど、変数(へんすう)でかぞえた数(かず)をスプライトで表示(ひょうじ)するプログラムをつくります。すきなみためで数字(すうじ)を表示(ひょうじ)できるようになりましょう。

スクラッチプログラミング - すうじをひょうじしよう

更新日:2023年12月27日

サンプルさくひんであそんでみよう

今回(こんかい)は、スプライトで数字(すうじ)を表示(ひょうじ)する方法(ほうほう)を紹介(しょうかい)します。

得点(とくてん)がどのように表示(ひょうじ)されるか、サンプルゲームでためしてみてください。

ゲームのあそびかた

  • ボールをぶつけてポイントをふやすゲームです。
  • クリック(タップ)すると、あかいボールがおちます。
  • クリックした場所(ばしょ)によって、ボールのむきがかわります。
  • ドラッグして、ねらいをさだめることもできます。

(みどりのはたをおして、スタートです。プロジェクトは、ScratchのPyxofyページでもごらんになれます。)

へんすうをひょうじする

スクラッチでは、ゲームの点数(てんすう)やタイマーなど、数(かず)をかぞえるときに変数(へんすう)をつかいますよね。その変数(へんすう)をステージに表示(ひょうじ)すれば、かぞえた数(かず)をみることができます。

 ステージに変数が表示されている
ステージに変数が表示されている

でもこの変数(へんすう)、「ちいさくてみにくいなぁ」とかんじたこと、ありませんか?数字(すうじ)をおおきく表示(ひょうじ)したり、みためをかえたいときは、数字(すうじ)のスプライトをつかってみましょう。

 スプライトで表示する数字の例
スプライトで表示する数字の例

今回(こんかい)は、三桁(さんけた)までの数字(すうじ)を、ステージの中央(ちゅうおう)に表示(ひょうじ)できるようにプログラミングしていきますよ。

ステージの中央に100が表示されている
ステージの中央に100が表示されている

すうじのスプライトをよういする

最初(さいしょ)に、数字(すうじ)のスプライトを用意(ようい)します。「1」から「9」と、「0」のコスチュームをつくりましょう。

  • 1番目(ばんめ)のコスチュームは、数字(すうじ)の「1」
  • 2番目(ばんめ)のコスチュームは、数字(すうじ)の「2」

というように、コスチュームの番号(ばんごう)と数字(すうじ)をおなじにしてください。数字(すうじ)の「0」は、最後(さいご)の10番目(ばんめ)のコスチュームにしてくださいね。

数字のコスチューム10個
数字のコスチューム10個

スプライトをふくせいする

三桁(さんけた)の数字(すうじ)を表示(ひょうじ)できるように、スプライトは3つ用意(ようい)します。複製(ふくせい)して、それぞれの名前(なまえ)を、「いちのくらい」「じゅうのくらい」「ひゃくのくらい」にしておきましょう。

数字のスプライト3つ
数字のスプライト3つ

数字(すうじ)のスプライトが用意(ようい)できました。

いちのくらいのすうじ

ではこれから、いちのくらいの数字(すうじ)をプログラミングしていきましょう。最初(さいしょ)は「0」からはじめます。

最初のコスチューム指定する
最初のコスチューム指定する

つぎの3つの条件(じょうけん)で、表示(ひょうじ)する位置(いち)とコスチュームがかわるようにしますよ。

  1. 変数(へんすう)の数字(すうじ)が、一桁(ひとけた)のとき
  2. 変数(へんすう)の数字(すうじ)が、二桁(ふたけた)のとき
  3. 変数(へんすう)の数字(すうじ)が、三桁(さんけた)のとき

1. へんすうのすうじが、ひとけたのとき

変数(へんすう)の数字(すうじ)が一桁(ひとけた)かどうかは、「もし、変数(へんすう)が10よりちいさいなら」で確認(かくにん)します。

変数の数字が一桁かどうかを確認する
変数の数字が一桁かどうかを確認する

表示(ひょうじ)する位置(いち)は、ステージの中央(ちゅうおう)です。コスチュームは、変数(へんすう)とおなじ数字(すうじ)にします。

表示する位置とコスチュームを指定する
表示する位置とコスチュームを指定する

変数(へんすう)が「1」のときは、数字(すうじ)の1番目(ばんめ)のコスチュームが表示(ひょうじ)されます。では、変数(へんすう)が「0」のときはどうなるでしょう?0番目(ばんめ)のコスチュームというのはありませんよね。

コスチュームの番号「0」はない
コスチュームの番号「0」はない

変数(へんすう)が「0」のとき、なにが表示(ひょうじ)されるかというと、最後(さいご)のコスチュームです。つまり、10番目(ばんめ)のコスチュームにした、数字(すうじ)の「0」が表示(ひょうじ)されますよ。

2. へんすうのすうじが、ふたけたのとき

数字(すうじ)が二桁(ふたけた)になったら、いちのくらいの数字(すうじ)をみぎへずらします。これは、二桁(ふたけた)になっても、ステージの中央(ちゅうおう)に表示(ひょうじ)されるようにするためです。

表示位置を変える
表示位置を変える

コスチュームは、変数(へんすう)の2番目(ばんめ)の文字(もじ)にします。

コスチュームを指定する
コスチュームを指定する

「変数(へんすう)の2番目(ばんめ)の文字(もじ)」とは、「変数(へんすう)のいちのくらいの数字(すうじ)」のことです。

変数の一の位の数字
変数の一の位の数字

3. へんすうのすうじが、さんけたのとき

数字(すうじ)が三桁(さんけた)になったら、いちのくらいの数字(すうじ)を、さらにみぎへずらします。コスチュームは、変数(へんすう)の3番目(ばんめ)の文字(もじ)にします。

x座標を増やしてコスチュームを指定する
x座標を増やしてコスチュームを指定する

三桁(さんけた)になったので、変数(へんすう)の3番目(ばんめ)の文字(もじ)が、いちのくらいになりますよ。

変数の一の位の数字
変数の一の位の数字

以上(いじょう)で、変数(へんすう)のいちのくらいの数字(すうじ)が表示(ひょうじ)されるようになりました!

じゅうのくらいのすうじ

つぎに、じゅうのくらいの数字(すうじ)をプログラミングしましょう。

1. へんすうのすうじが、ひとけたのとき

変数(へんすう)の数字(すうじ)が一桁(ひとけた)のときは、じゅうのくらいの数字(すうじ)はみえないようにしておきます。

非表示にする
非表示にする

2. へんすうのすうじが、ふたけたのとき

数字(すうじ)が二桁(ふたけた)になったら、いちのくらいの左側(ひだりがわ)に表示しましょう。コスチュームは、「変数(へんすう)の1番目(ばんめ)の文字(もじ)」、つまり「変数(へんすう)のじゅうのくらい」とおなじにします。

位置とコスチュームを指定して表示する
位置とコスチュームを指定して表示する
変数の十の位の数字
変数の十の位の数字

3. へんすうのすうじが、さんけたのとき

数字(すうじ)が三桁(さんけた)になったら、じゅうのくらいの数字(すうじ)を、みぎへずらします。三桁(さんけた)になっても、ステージの中央(ちゅうおう)に表示(ひょうじ)されるようにするためです。コスチュームは、変数(へんすう)の2番目(ばんめ)の文字(もじ)にします。

x座標を増やしてコスチュームを指定する
x座標を増やしてコスチュームを指定する
変数の十の位の数字
変数の十の位の数字

以上(いじょう)で、変数(へんすう)のじゅうのくらいの数字(すうじ)が表示(ひょうじ)されるようになりました!

ひゃくのくらいのすうじ

さいごに、ひゃくのくらいの数字(すうじ)をプログラミングしましょう。変数(へんすう)の数字(すうじ)が三桁(さんけた)になるまでは、みえないようにしておきます。

非表示にする
非表示にする

数字(すうじ)が三桁(さんけた)になったら、じゅうのくらいの左側(ひだりがわ)に表示(ひょうじ)しましょう。コスチュームは、「変数(へんすう)の1番目(ばんめ)の文字(もじ)」、つまり「変数(へんすう)のひゃくのくらい」とおなじにします。

表示する位置とコスチュームを指定して表示する
表示する位置とコスチュームを指定して表示する

プログラムかんせい

プログラムはこれで完成(かんせい)です。三桁(さんけた)までの数字(すうじ)を、ステージの中央(ちゅうおう)に表示(ひょうじ)できるようになりました!

完成プログラム
完成プログラム

まとめ

今回(こんかい)は、スプライトで数字(すうじ)を表示(ひょうじ)する方法(ほうほう)を紹介(しょうかい)しました。

ゲームの点数(てんすう)やタイマーなど、変数(へんすう)でかぞえた数(かず)を、すきなみための数字(すうじ)で表示(ひょうじ)してみてくださいね。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

かんれんきじ

スクラッチプログラミング - 「へんすう」でかずをかぞえよう
「変数(へんすう)」で、ゲームでの得点(とくてん)やのこりじかんをかぞえる方法(ほうほう)をしょうかいします。変数(へんすう)はプログラミングでよくつかわれます。どういうものなのか、一緒(いっしょ)に見ていきましょう。
スクラッチプログラミング - ライフ(HP)のつくりかた
ゲームでつかえるライフ(HP)のプログラムを紹介(しょうかい)します。ハートのスプライトでライフを表示(ひょうじ)して、ダメージをうけたときに1ポイントずつへるようにプログラミングします。
Start Here - Scratch (スクラッチ)
Scratch (スクラッチ)記事(きじ)のレベル別一覧です。初級、中級、上級、拡張機能にわけてまとめました。