スクラッチプログラミング - すうじをひょうじしよう
ゲームの点数(てんすう)やタイマーなど、変数(へんすう)でかぞえた数(かず)をスプライトで表示(ひょうじ)するプログラムをつくります。すきなみためで数字(すうじ)を表示(ひょうじ)できるようになりましょう。
更新日:2023年12月27日
サンプルさくひんであそんでみよう
今回(こんかい)は、スプライトで数字(すうじ)を表示(ひょうじ)する方法(ほうほう)を紹介(しょうかい)します。
得点(とくてん)がどのように表示(ひょうじ)されるか、サンプルゲームでためしてみてください。
ゲームのあそびかた
- ボールをぶつけてポイントをふやすゲームです。
- クリック(タップ)すると、あかいボールがおちます。
- クリックした場所(ばしょ)によって、ボールのむきがかわります。
- ドラッグして、ねらいをさだめることもできます。
(みどりのはたをおして、スタートです。プロジェクトは、ScratchのPyxofyページでもごらんになれます。)
へんすうをひょうじする
スクラッチでは、ゲームの点数(てんすう)やタイマーなど、数(かず)をかぞえるときに変数(へんすう)をつかいますよね。その変数(へんすう)をステージに表示(ひょうじ)すれば、かぞえた数(かず)をみることができます。
![ステージに変数が表示されている ステージに変数が表示されている](https://www.pyxofy.com/content/images/2022/08/16-01-scratch-programming-number-counter.png)
でもこの変数(へんすう)、「ちいさくてみにくいなぁ」とかんじたこと、ありませんか?数字(すうじ)をおおきく表示(ひょうじ)したり、みためをかえたいときは、数字(すうじ)のスプライトをつかってみましょう。
![スプライトで表示する数字の例 スプライトで表示する数字の例](https://www.pyxofy.com/content/images/2022/08/16-2-scratch-programming-number-counter.png)
今回(こんかい)は、三桁(さんけた)までの数字(すうじ)を、ステージの中央(ちゅうおう)に表示(ひょうじ)できるようにプログラミングしていきますよ。
![ステージの中央に100が表示されている ステージの中央に100が表示されている](https://www.pyxofy.com/content/images/2022/08/16-03-scratch-programming-number-counter.png)
すうじのスプライトをよういする
最初(さいしょ)に、数字(すうじ)のスプライトを用意(ようい)します。「1」から「9」と、「0」のコスチュームをつくりましょう。
- 1番目(ばんめ)のコスチュームは、数字(すうじ)の「1」
- 2番目(ばんめ)のコスチュームは、数字(すうじ)の「2」
というように、コスチュームの番号(ばんごう)と数字(すうじ)をおなじにしてください。数字(すうじ)の「0」は、最後(さいご)の10番目(ばんめ)のコスチュームにしてくださいね。
![数字のコスチューム10個 数字のコスチューム10個](https://www.pyxofy.com/content/images/2022/08/16-04.09-scratch-programming-number-counter.png)
スプライトをふくせいする
三桁(さんけた)の数字(すうじ)を表示(ひょうじ)できるように、スプライトは3つ用意(ようい)します。複製(ふくせい)して、それぞれの名前(なまえ)を、「いちのくらい」「じゅうのくらい」「ひゃくのくらい」にしておきましょう。
![数字のスプライト3つ 数字のスプライト3つ](https://www.pyxofy.com/content/images/2022/08/16-05-scratch-programming-number-counter.png)
数字(すうじ)のスプライトが用意(ようい)できました。
いちのくらいのすうじ
ではこれから、いちのくらいの数字(すうじ)をプログラミングしていきましょう。最初(さいしょ)は「0」からはじめます。
![最初のコスチューム指定する 最初のコスチューム指定する](https://www.pyxofy.com/content/images/2022/08/16-06-scratch-programming-number-counter.png)
つぎの3つの条件(じょうけん)で、表示(ひょうじ)する位置(いち)とコスチュームがかわるようにしますよ。
- 変数(へんすう)の数字(すうじ)が、一桁(ひとけた)のとき
- 変数(へんすう)の数字(すうじ)が、二桁(ふたけた)のとき
- 変数(へんすう)の数字(すうじ)が、三桁(さんけた)のとき
1. へんすうのすうじが、ひとけたのとき
変数(へんすう)の数字(すうじ)が一桁(ひとけた)かどうかは、「もし、変数(へんすう)が10よりちいさいなら」で確認(かくにん)します。
![変数の数字が一桁かどうかを確認する 変数の数字が一桁かどうかを確認する](https://www.pyxofy.com/content/images/2022/08/16-07-scratch-programming-number-counter.png)
表示(ひょうじ)する位置(いち)は、ステージの中央(ちゅうおう)です。コスチュームは、変数(へんすう)とおなじ数字(すうじ)にします。
![表示する位置とコスチュームを指定する 表示する位置とコスチュームを指定する](https://www.pyxofy.com/content/images/2022/08/16-08-scratch-programming-number-counter.png)
変数(へんすう)が「1」のときは、数字(すうじ)の1番目(ばんめ)のコスチュームが表示(ひょうじ)されます。では、変数(へんすう)が「0」のときはどうなるでしょう?0番目(ばんめ)のコスチュームというのはありませんよね。
![コスチュームの番号「0」はない コスチュームの番号「0」はない](https://www.pyxofy.com/content/images/2022/08/16-04.09-scratch-programming-number-counter-1.png)
変数(へんすう)が「0」のとき、なにが表示(ひょうじ)されるかというと、最後(さいご)のコスチュームです。つまり、10番目(ばんめ)のコスチュームにした、数字(すうじ)の「0」が表示(ひょうじ)されますよ。
2. へんすうのすうじが、ふたけたのとき
数字(すうじ)が二桁(ふたけた)になったら、いちのくらいの数字(すうじ)をみぎへずらします。これは、二桁(ふたけた)になっても、ステージの中央(ちゅうおう)に表示(ひょうじ)されるようにするためです。
![表示位置を変える 表示位置を変える](https://www.pyxofy.com/content/images/2022/08/16-10-scratch-programming-number-counter.png)
コスチュームは、変数(へんすう)の2番目(ばんめ)の文字(もじ)にします。
![コスチュームを指定する コスチュームを指定する](https://www.pyxofy.com/content/images/2022/08/16-11-scratch-programming-number-counter.png)
「変数(へんすう)の2番目(ばんめ)の文字(もじ)」とは、「変数(へんすう)のいちのくらいの数字(すうじ)」のことです。
![変数の一の位の数字 変数の一の位の数字](https://www.pyxofy.com/content/images/2022/08/16-12-scratch-programming-number-counter.png)
3. へんすうのすうじが、さんけたのとき
数字(すうじ)が三桁(さんけた)になったら、いちのくらいの数字(すうじ)を、さらにみぎへずらします。コスチュームは、変数(へんすう)の3番目(ばんめ)の文字(もじ)にします。
![x座標を増やしてコスチュームを指定する x座標を増やしてコスチュームを指定する](https://www.pyxofy.com/content/images/2022/08/16-13-scratch-programming-number-counter.png)
三桁(さんけた)になったので、変数(へんすう)の3番目(ばんめ)の文字(もじ)が、いちのくらいになりますよ。
![変数の一の位の数字 変数の一の位の数字](https://www.pyxofy.com/content/images/2022/08/16-14-scratch-programming-number-counter.png)
以上(いじょう)で、変数(へんすう)のいちのくらいの数字(すうじ)が表示(ひょうじ)されるようになりました!
じゅうのくらいのすうじ
つぎに、じゅうのくらいの数字(すうじ)をプログラミングしましょう。
1. へんすうのすうじが、ひとけたのとき
変数(へんすう)の数字(すうじ)が一桁(ひとけた)のときは、じゅうのくらいの数字(すうじ)はみえないようにしておきます。
![非表示にする 非表示にする](https://www.pyxofy.com/content/images/2022/08/16-15-scratch-programming-number-counter.png)
2. へんすうのすうじが、ふたけたのとき
数字(すうじ)が二桁(ふたけた)になったら、いちのくらいの左側(ひだりがわ)に表示しましょう。コスチュームは、「変数(へんすう)の1番目(ばんめ)の文字(もじ)」、つまり「変数(へんすう)のじゅうのくらい」とおなじにします。
![位置とコスチュームを指定して表示する 位置とコスチュームを指定して表示する](https://www.pyxofy.com/content/images/2022/08/16-16-scratch-programming-number-counter.png)
![変数の十の位の数字 変数の十の位の数字](https://www.pyxofy.com/content/images/2022/08/16-17-scratch-programming-number-counter.png)
3. へんすうのすうじが、さんけたのとき
数字(すうじ)が三桁(さんけた)になったら、じゅうのくらいの数字(すうじ)を、みぎへずらします。三桁(さんけた)になっても、ステージの中央(ちゅうおう)に表示(ひょうじ)されるようにするためです。コスチュームは、変数(へんすう)の2番目(ばんめ)の文字(もじ)にします。
![x座標を増やしてコスチュームを指定する x座標を増やしてコスチュームを指定する](https://www.pyxofy.com/content/images/2022/08/16-18-scratch-programming-number-counter.png)
![変数の十の位の数字 変数の十の位の数字](https://www.pyxofy.com/content/images/2022/08/16-19-scratch-programming-number-counter.png)
以上(いじょう)で、変数(へんすう)のじゅうのくらいの数字(すうじ)が表示(ひょうじ)されるようになりました!
ひゃくのくらいのすうじ
さいごに、ひゃくのくらいの数字(すうじ)をプログラミングしましょう。変数(へんすう)の数字(すうじ)が三桁(さんけた)になるまでは、みえないようにしておきます。
![非表示にする 非表示にする](https://www.pyxofy.com/content/images/2022/08/16-20-scratch-programming-number-counter.png)
数字(すうじ)が三桁(さんけた)になったら、じゅうのくらいの左側(ひだりがわ)に表示(ひょうじ)しましょう。コスチュームは、「変数(へんすう)の1番目(ばんめ)の文字(もじ)」、つまり「変数(へんすう)のひゃくのくらい」とおなじにします。
![表示する位置とコスチュームを指定して表示する 表示する位置とコスチュームを指定して表示する](https://www.pyxofy.com/content/images/2022/08/16-21-scratch-programming-number-counter.png)
プログラムかんせい
プログラムはこれで完成(かんせい)です。三桁(さんけた)までの数字(すうじ)を、ステージの中央(ちゅうおう)に表示(ひょうじ)できるようになりました!
![完成プログラム](https://www.pyxofy.com/content/images/2022/08/16-22-scratch-programming-number-counter-1.png)
![](https://www.pyxofy.com/content/images/2024/07/cover-page-320-4.png)
「きょうからはじめるスクラッチプログラミング入門」Pyxofy (著)
Pyxofy が Scratch の基本をまとめた電子書籍を出版しました。
Kindle・Apple Books からご購入ください。
まとめ
今回(こんかい)は、スプライトで数字(すうじ)を表示(ひょうじ)する方法(ほうほう)を紹介(しょうかい)しました。
ゲームの点数(てんすう)やタイマーなど、変数(へんすう)でかぞえた数(かず)を、すきなみための数字(すうじ)で表示(ひょうじ)してみてくださいね。
最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!