SoraMame.ps.js/入門/part.4 の変更点

追加された行はこの色です。
削除された行はこの色です。
SoraMame.ps.js/入門/part.4 へ行く。
SoraMame.ps.js/入門/part.4 の差分を削除
#title(第4回　プログラムを制御せよ - そら豆スクリプト入門)

[[＜＜>SoraMame.ps.js/入門/part.3]] [[1>SoraMame.ps.js/入門/part.1]] [[2>SoraMame.ps.js/入門/part.2]] [[3>SoraMame.ps.js/入門/part.3]] ''4'' 5 6 7 8 ＞＞ [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]

----

自分で考えてプログラミングする「そら豆スクリプト入門」。~
前回は、プログラムの一部を改造しながら、~
マウスに合わせて動く簡単なアニメーションを作ってみた。~
でも、カタチや色を変えるだけでなく、~
もっと、すごいモノを作ってみたいよね。~

たとえば、画面のなかをボールがはねまわる~
アニメーションプログラムなんて、どうだろう。~

-[[はねかえるボール:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_40.html]]
-[[はねかえるボール:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_40.html]]

#ref(sample_40.png);

#contents



*今回つくるプログラムは [#a639f46b]

ボールがはねまわるアニメーションプログラムのコードは~
いままでより多いけど(40行くらい)、~
けっこうシンプルだ。~


ただし、ボールをうごかすために、~
計算したり、計算結果を覚えておいたり~
プログラムの状況に合わせて、~
プログラムの動きを変化させる、といった具合に、~
プログラムがもつ、プログラムのための基本的な機能を使う必要がある。~

そこで今回は、ボールがはねまわるアニメーションを例にして、~
「計算」「記憶」「制御」という~
プログラムの基本機能について説明しよう。~

といっても、いきなり細かな点まで説明すると~
消化しきれなくなると思う。~

そこで、まずは、ボールがはねかえるアニメーションを~
ざーっと作りながら、それぞれの機能を簡単に紹介していく。~

それから、次回から数回に分けて、~
各機能のことを少し詳しく解説する。~


*データを利用する [#h23586fe]

いままでの例題では、マウスの位置に合わせて~
マルやシカクを描いてきた。~
たとえば、こんな感じだったよね。~

 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

このように、マウスの位置の情報(データ)は、~

 @マウスX
 @マウスY

というふうに書くことで、とり出すことができた。~

そら豆スクリプトでは、このほかにも~
いろいろなデータをとり出すことができる。~

たとえば、次のふたつは~
カタチを描くエリアの大きさをあらわしている。~

 @幅   //エリアの横幅
 @高さ //エリアの縦幅

これを次のように使うと、カタチを描くエリアの右下に~
マルを描くことができるんだ。~

 {幅:300, 高さ:300}のサイズ
 {x:@幅, y:@高さ}に{幅:150, 高さ:150}のマル

#ref(sample_41.png);

-[[右下にマルを描く(アニメーションなし):http://www.catch.jp/program/soramame/sample/SoraMame_lesson_41.html]]
-[[右下にマルを描く(アニメーションなし):http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_41.html]]

マルの位置は、円の中心で指定するので、~
このように書くと、エリアの右下の角を中心にして~
マルを描くことになるんだ。~


*計算する [#ac1f94ef]

さて、エリアの中心にマルを描くには、~
どうすればいいだろうか。~

そう、エリアのサイズを使って、中心点を計算してやればいい。~
横の中央は、エリアの幅のちょうど半分。~
縦の中央は、エリアの高さのちょうど半分になる。~
これを計算するには

 @幅 / 2
 @高さ / 2

または、

 @幅 ÷ 2
 @高さ ÷ 2

と書く。

「/」記号は、半角文字でも全角文字でもいい。~
「÷」記号は、全角文字で入力する("わる"と入力して変換する)。~

「÷」記号は、割り算の記号だというのは、わかるよね。~
じつは「/」記号も割り算の記号で、「スラッシュ」と読む。~
ふつうのプログラムでも計算するときには、~
この「/」(スラッシュ)記号が、よく使われるので、~
覚えておくと良い。

だから、エリアの中央にマルを描くなら

 {幅:300, 高さ:300}のサイズ
 {x:(@幅/2), y:@高さ/2}に{幅:150, 高さ:150}のマル

と書くんだ。

#ref(sample_42.png);

-[[中央にマルを描く(アニメーションなし):http://www.catch.jp/program/soramame/sample/SoraMame_lesson_42.html]]
-[[中央にマルを描く(アニメーションなし):http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_42.html]]


**注意：引数のカッコ [#e2b645e1]

''ここでは、最初の引数を「(・・・)」で囲んでいるが、これはそら豆スクリプトの不具合の対策のために書いてある。ほとんどの場合、引数で計算する場合、「(・・・)」カッコは不要だ。''

**ワンポイント：「÷」記号と「/」記号 [#y29ea1ea]

なぜ、「÷」記号のかわりに、「/」記号が使われるかというと、~
ふつう、プログラムは、半角英数だけで書き表すから。~
つまり、キーボードで日本語変換を使わずに書くことになる。~

このようにプログラミングでは、~
割り算記号のような特定の役割に、~
違う記号や言葉を割り当てることがあるので~
覚えておこう。~


*ボールを横にうごかす原理 [#m28d72f9]

では、いよいよボールをうごかしてみよう。~
まずは、簡単に左から右へ、横方向にうごかす。~
いまのところは、~
カベにぶつかってもはねかえらない。~

もういちど、前回やったアニメーションの原理を思い出してみよう。~
ちょっとずつカタチがちがう絵を大量に用意して、~
それを速いスピードで順番に表示すると~
目の錯覚で、絵が動いているように見えるんだったよね。~

ボールをうごかすには、~
すこしずつ位置の違うマルを描けばいい。~
つまり、~

 {x:10, y:150}に{幅:50, 高さ:50}のマル  //1回目

 {x:20, y:150}に{幅:50, 高さ:50}のマル  //2回目

 {x:30, y:150}に{幅:50, 高さ:50}のマル  //3回目

 {x:40, y:150}に{幅:50, 高さ:50}のマル  //4回目

というように、マルの横位置xをすこしずつ増やして、~
くり返し描いていくんだ。~

#ref(ball_move.png);


では、このようにボールの位置をすこしずつ変えていくためには~
どうすればいいのだろう。~

ここで、プログラムの基本機能が、２つ登場するんだ。~


*ボールの位置を一時記憶する「変数」(へんすう) [#k29cd2de]

ひとつ目の機能は、ボールの位置を一時記憶する「変数」(へんすう)。~
これは、ヘンな数ではなく、中身を何度でも変えられるラベルみたいなものだ。~

変数には、ラベルとして名前をつけることができる。~
ボールの横位置をあらわす変数は~

 @ボールX

という名前にしよう。

これまで、「@マウスX」や「@幅」というように、~
そら豆スクリプトが用意しているデータもあったが、~
じつは、これらも変数で、~
システム側が用意しているので、システム変数と呼ばれている。~

これにたいして「@ボールX」というように、~
変数を自分で用意することもできるし、~
じつは、こちらのほうが、ずっと多い。~

そら豆スクリプトでは、~
変数の名前の1文字目に、「@」(アット)記号をつける。~


*計算結果を登録する「=」(イコール) [#vaba8c4d]

2つ目のプログラムの機能は、~
計算結果を代入する「=」(イコール)記号だ。~

まず、この記号の使い方を見ていこう。~

いま実現したいのは、~
マルの横位置xをすこしずつ増やして、~
ボールの位置をすこしずつ、うごかしていくことだった。~

そのためには

 @ボールX = @ボールX + 10

と書いて、~
これを「---くり返し描画する」のなかで~
実行する。~

 ---くり返し描画する{
    @ボールX = @ボールX + 10
    {x:@ボールX, y:150}に{幅:50, 高さ:50}のマル
 }

じつは、プログラミングで「=」(イコール)記号は、~
左右の値が同じという意味ではない。~
これは、「=」(イコール)記号の右側で計算した結果を~
左側にある変数に''登録する''という意味なんだ。~

計算結果を登録するところを、すこし具体的に見ていこう。~

たとえば、最初に「@ボールX」が0だったとしよう。~
そこで、右側の「@ボールX + 10」を計算する。~
これは、「@ボールX」に10を足す計算だ。~
「0 + 10」で、計算結果は10になる。~

この計算結果が、「=」(イコール)記号の左側にある「@ボールX」に登録される。~
だから、最初は「@ボールX」が0だったのに、~
この行を実行すると「@ボールX」は10に変わる。~

そして、この「@ボールX」の値は、~
次のくり返しまで一時記憶されるんだ。~

では、この行をくりかえし実行すると、どうなるだろう。~

#ref(equal.png);

2回目に、この行を実行すると~
右側の「@ボールX + 10」を計算する。~
「@ボールX」は10だから、~
「10 + 10」で、計算結果は20になる。~
この計算結果を登録して、~
「@ボールX」は20に変わる。~

さらに3回目に、この行を実行すると~
「@ボールX」は30に変わる。~

このようにプログラムでは、「=」記号を使うことで~
計算結果を変数に登録できる。~
そして、このコードをくり返し実行することで~
マルを左から右へ動かすことができるんだ。~

ちなみに、このように計算結果を登録するコード行は~
「代入文」(だいにゅうぶん)と呼ばれる。~

なお、計算結果を右から左に登録するのは~
欧米の学校なんかの使い方と同じになっていると~
どこかで聞いたような気がするんだけど、~
本当でしょうか？~


**ワンポイント：同じ記号に違う意味が割り当てられる場合 [#c13dc01e]

プログラミングでは、学校の算数と、違う意味で記号を使う場合がある。~
たとえば、「=」(イコール)記号は、~
算数では"左右が等しい"という意味だけど、~
プログラムでは、右の値を左に登録(代入)するという意味になる。~

さきほど、割り算には「÷」記号のほかに「/」記号を使うと説明した。~
この場合は、同じ意味に違う記号が割り当てられているんだったよね。~
今回は、同じ記号に違う意味が割り当てられているんだ。~

#ref(symbol.png);

プログラミングでは、いくつかの記号をいろいろな意味で使う。~
覚えるのが、大変だろうか？~
でも、それほど多くなくて、~
カンニングペーパー１枚で、片付く量だし、~
あんがい使っているうちに覚えてしまうだろう。~



*ボールをうごかすコードの実際 [#vd1123ef]

では、左から右へボールをうごかすプログラムを見てみよう。~

#ref(sample_43.png);

-[[右に移動するボール:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_43.html]]
-[[右に移動するボール:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_43.html]]

この場合のコードは、次のようになる。~
今回は、説明をしやすいように、行ごとに番号をふってあるが、~
この番号は、入力しなくてもいい。~

 01: //マルを動かすアニメーション(左から右、1回)
 02: @ボールXは整数型 = 0
 03: 
 04: ---初期設定する{
 05:   {幅:300, 高さ:300}のサイズ
 06:   {秒当たり:24}のコマ数
 07: }
 08: 
 09: ---くり返し描画する{
 10:   {色:0}の背景色
 11:   @ボールX = @ボールX + 10
 12:   {x:@ボールX, y:150}に{幅:10, 高さ:10}のマル
 13: }

日本語っぽいプログラミング言語で書いてあるので、~
ざっと読んでいけば、なんとなく意味はわかると思う。~

01行目は、コメント文だね。~
02行目は、「@ボールX」変数の種類と、最初の値を設定している。~
これは、「@ボールX」という名前で、~
1、2、3、4・・・というような整数を入れる変数で、~
初期値(最初の値)は0にする。~

04行目から07行目までが、1回だけ実行される初期設定だね。~
06行目にある「コマ数」命令は、1秒間に何回くり返し描画するかを指定している。~
この数値を変えることで、アニメーションのコマ数を指定できる。~

09行目から13行目までが、くり返し実行される部分だ。~
10行目で、背景色を黒色に塗りつぶしている。~
11行目は、さきほど説明したように、ボールの位置を計算している。~

そして、12行目は、計算した位置にマルを描いている。

これを実行すると、ボールが左から右へ移動していく。~
そして、エリアの右はしをこえると、見えなくなってしまう。~

この場合は、ボールは1回だけ移動する。

では、なんどもくり返し移動するには、どうすればいいだろう。~

*条件に合わせてプログラムを制御する [#y63bb4d3]

なんどもくり返し移動するには、~
ボールがエリアの右はしにたどりついたとき、~
ボールを左はしに戻してやればいい。~

そのためには、特定の条件になったかどうか判断する~
「条件文」という機能を使うんだ。~

ボールが右はしにいったかどうか、条件文では次のように書く。~

 もし{条件:@ボールX > @幅}ならば{
     @ボールX = 0
 }

これは、{条件:@ボールX > @幅}が成りたっている場合に、~
次の「{...}」の間の命令を実行する~
という意味だ。~
だから、「@ボールX = 0」が実行されることになる。~

{条件:@ボールX > @幅}は、@ボールXという変数の値が、~
@幅の値よりも大きい、ということだ。~
「>」記号は、不等号といって、左の値は右の値より大きいことを表している。~
ということはつまり、ボールの位置が、右はしを越えていることになる。~

このような場合には、「@ボールX = 0」とするので~
@ボールXという変数の値は、ゼロになる~
(「=」は、右から左への登録だったよね)~

だから、ボールの位置は左はしに戻ることになるんだ。~

ちなみに、この条件が成りたたなかった場合は、~
「{...}」の間の命令は実行されない。~

では、実際のプログラムを見てみよう。~

#ref(sample_44.png);

-[[くりかえし右に移動するボール:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_44.html]]
-[[くりかえし右に移動するボール:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_44.html]]

ボールをくりかえし動かすコードは、次のようになる。~

 01: //マルを動かすアニメーション(左から右、1回)
 02: @ボールXは整数型 = 0
 03: 
 04: ---初期設定する{
 05:   {幅:300, 高さ:300}のサイズ
 06:   {秒当たり:24}のコマ数
 07: }
 08: 
 09: ---くり返し描画する{
 10:   {色:0}の背景色
 11:   @ボールX = @ボールX + 10
 12:   {x:@ボールX, y:150}に{幅:10, 高さ:10}のマル
 13:   もし{条件:@ボールX > @幅}ならば{
 14:      @ボールX = 0
 15:   }
 16: }

ここでは「くり返し描画する」のなかにある~
13行目から15行目に、条件文を追加した。~

では、このコードは、どんなふうに動くのだろう。~

最初に、ボールが左はしから移動しはじめたときは、~
@ボールXは、@幅よりも、ずっと小さい。~
だから、13行目の条件は成りたたない。~
14行目の「@ボールX = 0」は、実行されない。~

ボールが、右はしを越えると、~
@ボールXは、@幅より大きくなる。~
すると、13行目の条件が成りたち、14行目の「@ボールX = 0」が実行される。~

そして、次のくり返しでは、@ボールXは「0」になっているのだから~
ボールは左はしに戻っている。~
そして、@ボールXは、@幅よりも、ずっと小さくなっている。~
13行目の条件は成りたたず、~
14行目の「@ボールX = 0」は、実行されない。~

これが、ずっとくり返されることになるんだ。~

**ワンポイント：「{」と「}」の字下げ [#bcd55c93]

ここまでのコードで、「{」と「}の間のところを見てほしい。~
行の先頭が、すこし右がわにズラしてあるよね。~
これは、行の先頭に空白文字(スペース)を入れてあるからなんだ。~
前回も説明したけれど、こんなふうに行の先頭をズラすことを「字下げ」(インデント)と呼ぶ。~

#ref(indent.png);


この場合、字下げは、図のように~
「{」と「}の間の3箇所にあるよね。~
「{」と「}の間のコードは、まとめて実行される。~
たとえば、~
[1]のコードは、1回だけ実行される。~
[2]のコードは、くり返し実行される。~
[3]のコードは、条件が成りたったときだけ実行される。~
ちなみに、[3]のコードは、[2]のコードの一部分なので、~
2重に字下げされている。~


では、なんのために字下げをするんだろう。~

「{」と「}の間には、複数の行を書くことができるけれど~
このように字下げされていると、~
まとめて実行される部分が、人間にとって~
ひと目で分かるようになるんだ。~

もしも、次のように~
字下げがなかったら、どうなるだろう。~
この場合も、プログラムとしては正常に動作する。~
コンピュータ側は、字下げを無視するんだ。~

-[[くりかえし右に移動するボール(字下げなし):http://www.catch.jp/program/soramame/sample/SoraMame_lesson_45.html]]
-[[くりかえし右に移動するボール(字下げなし):http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_45.html]]

 01: //マルを動かすアニメーション(左から右、1回)
 02: @ボールXは整数型 = 0
 03: 
 04: ---初期設定する{
 05: {幅:300, 高さ:300}のサイズ
 06: {秒当たり:24}のコマ数
 07: }
 08: 
 09: ---くり返し描画する{
 10: {色:0}の背景色
 11: @ボールX = @ボールX + 10
 12: {x:@ボールX, y:150}に{幅:10, 高さ:10}のマル
 13: もし{条件:@ボールX > @幅}ならば{
 14: @ボールX = 0
 15: }}

でも、人間にとっては、~
どこからどこがまとまって実行されるのか~
とても分かりにくいだろ。~

人間にとって分かりにくいということは~
プログラムを読んだり、書いたり、修正したりするときに~
時間がかかって面倒になるってことなんだ。~

プログラムを書くとき、~
このように人間にとって分かりやすく書くことは~
(ほかの人にとって、未来の自分にとって)~
とても重要なんだ。~

**練習問題 [#wd28a28f]

ちなみに、ボールを右から左へくり返し移動させるには、どうすればいいだろうか？~

今回も、ぜひ自分なりにたしかめてほしい。~
(答えは、このページの最後で！)~

*ボールを往復させる [#q8d881d5]


ボールが、左から右へ、くり返し移動するようになったので~
次は、ボールが往復するように改良してみよう。~
つまり、ボールがはしにぶつかったら~
方向転換させて、反射させるのだ。~

#ref(sample_46.png);

-[[左右に往復するボール:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_46.html]]
-[[左右に往復するボール:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_46.html]]

**ボールを逆方向に動かす。 [#qa94381a]

そのためには、ボールを逆方向に動かす必要がある。~

ボールが、左から右に動かすときには~

 @ボールX = @ボールX + 10

と、一定の数値(この場合は10)をたし算した。~

逆に、ボールが、右から左に動かすときには~

 @ボールX = @ボールX - 10

と、一定の数値(この場合は10)をひき算すればいい。~


**方向を記憶する [#a209d25d]

さらに、ボールを往復させるには、~
ボールの進行方向を覚えておかなければならない。~
そのために、進行方向を表す変数を用意する。~

この変数は、次のように「@進行方向X」という名前で、~
「右」か「左」という文字を保存する。~

 @進行方向Xは文字型 = 「右」

ここでは、右方向に進んでいるときは「右」~
左方向に進んでいるときは「左」という文字を~
登録するんだ。~

※このような文字情報データは、プログラミングでは「文字列」(もじれつ)と呼ばれる。

**方向を切り替える [#p3cce346]

そして、ボールを移動させる部分のコードは、次のようになる。~
まず最初に、ボールの進行方向が「右」か「左」かチェックしている~

進行方向が「右」の場合は、~

  もし{条件:@進行方向X == 「右」}ならば{
    @ボールX = @ボールX + 10
    もし{条件:@ボールX > @幅}ならば{
        @ボールX = @幅
        @進行方向X = 「左」
    }
  }

となる。~

右に移動するので、@ボールXに10をたし算している。~
そして、ボールがカベの位置を超えたら、~
位置をカベの位置にもどして、~
進行方向を「左」にしている。~


進行方向が「左」の場合は、~

  もし{条件:@進行方向X == 「左」}ならば{
    @ボールX = @ボールX - 10
    もし{条件:@ボールX < 0}ならば{
        @ボールX = 0
        @進行方向X = 「右」
    }
  }

となる。~

右に移動するので、@ボールXに10をひき算している。~
そして、ボールがカベの位置を超えたら、~
位置をカベの位置にもどして、~
進行方向を「右」にしている。~

※条件文で、「◎◎◎◎に等しい」という場合は、「==」と書く。~
※{条件:@進行方向X == 「右」}は、変数「@進行方向X」が「右」に等しい、という意味だ。~

実際のコードは、こちらになる。~

#ref(sample_46.png);

-[[左右に往復するボール:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_46.html]]
-[[左右に往復するボール:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_46.html]]

*上下左右にボールを動かす [#p9b9a975]

ボールを左右に往復できるようになったので、~
いよいよ、ボールを上下左右に動かしてみよう。~

いままでは、ボールを左右に動かすため、~
X方向だけに注目して、コードを書いてきた。~

これに、上下の動きを追加して、~
Y方向に動かすコードを追加するんだ。~

実際のコードは、こんな感じになる。~

#ref(sample_40.png);

-[[上下左右に動くボール:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_47.html]]
-[[上下左右に動くボール:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_47.html]]

**コードを修正する [#ya7578f8]

まず、変数として、次の2つを追加する。~

 @ボールYは整数型 = 150
 @進行方向Yは文字型 = 「下」

それから、上下にボールを動かすために、~
次のコードを追加する。~

  もし{条件:@進行方向Y == 「下」}ならば{
    @ボールY = @ボールY + 10
    もし{条件:@ボールY > @高さ}ならば{
        @ボールY = @高さ
        @進行方向Y = 「上」
    }
  }
  もし{条件:@進行方向Y == 「上」}ならば{
    @ボールY = @ボールY - 10
    もし{条件:@ボールY < 0}ならば{
        @ボールY = 0
        @進行方向Y = 「下」
    }
  }

どちらも、左右に動かすコードと、ほぼ同じ内容で~
変数名、方向をあらわす文字、エリアの高さ(@高さ)を書き換えているだけだね。~

それから、マルを描くときに、上下の位置として「@ボールY」を指定している。~

  {x:@ボールX, y:@ボールY}に{幅:10, 高さ:10}のマル

これで完成だが、もう少しだけコードを修正してみよう。~


*処理をまとめて、見通しをよくする [#a7750b58]

ここまで、ボールを上下左右に動かすプログラムを作ってきた。~
そのために、簡単なマルを描くところからはじめて~
少しずつコードを複雑にしてきた。~

全体のコードは、およそ40行くらいになった。~

とくに、「---くり返し描画する」のところに、~
たくさんのコードを追加した。~

ここまで、うまくできていれば、それなりに達成感もあるだろう。~

でも、ここからさらにプログラムを複雑にしていく場合を想像してほしい。~
たとえば、~

-ボールの数を増やす
-ボールの動きを複雑にする
-ボールの変わりに、キャラ画像を表示する
-キャラごとに、違う動きをさせる
-自機と敵機を表示して、シューティングゲームを作る

なんて具合だ。~

そのとき、コードは、さらに何百行、何千行と増えていく。~
コードの行数が増えるとき、プログラムの複雑さは、それ以上に増えていく。~

だから、ここからさき、プログラムに機能を追加していくためには、~
どんなふうに機能を組み立てるかという「設計」が、とても重要になる。~

そのための第1歩は、機能を小さなカタマリにまとめること。~

コードを機能ごとに、小さなカタマリにまとめると、~
カタマリごとに役割が単純になって~
コードを修正したり、まちがいを見つけるのが簡単になるんだ。~


**役割ごとにコードをまとめる [#h076960e]

役割ごとにコードをまとめるため、~
もうひとつプログラムのための機能を利用する。~
これは、次のように2つの部分に分かれている。~

-整理したコードを命令語として呼び出す
-役割ごとにコードを整理して、命令語として名前を付ける

まず、さきほど作ったボールを上下左右に動かすプログラムで、~
「整理したコードを呼び出す」ように書き直してみた。~
これは、次のようになる。~

 ---くり返し描画する{
   {色:0}の背景色
   横移動する
   縦移動する
   {x:@ボールX, y:@ボールY}に{幅:10, 高さ:10}のマル
 }

「くり返し描画する」のところが、とてもスッキリしたよね。~
左右に移動するところは、「横移動する」になっていて~
上下に移動するところは、「縦移動する」になっているんだ。~

次に「役割ごとにコードを整理する」ところを見てみよう。~
これは、次のように「---◎◎◎◎{・・・}」と書く。~
◎◎◎◎のところに、整理したコードの名前を付ける。~
ここでは、「横移動する」「縦移動する」という2つの名前を付けている。~
実際に整理するコードは、「{・・・}」の間に書いている。~

 ---横移動する{
  もし{条件:@進行方向X == 「右」}ならば{
    @ボールX = @ボールX + 10
    もし{条件:@ボールX > @幅}ならば{
        @ボールX = @幅
        @進行方向X = 「左」
    }
  }
  もし{条件:@進行方向X == 「左」}ならば{
    @ボールX = @ボールX - 10
    もし{条件:@ボールX < 0}ならば{
        @ボールX = 0
        @進行方向X = 「右」
    }
  }
 }


 ---縦移動する{
  もし{条件:@進行方向Y == 「下」}ならば{
    @ボールY = @ボールY + 10
    もし{条件:@ボールY > @高さ}ならば{
        @ボールY = @高さ
        @進行方向Y = 「上」
    }
  }
  もし{条件:@進行方向Y == 「上」}ならば{
    @ボールY = @ボールY - 10
    もし{条件:@ボールY < 0}ならば{
        @ボールY = 0
        @進行方向Y = 「下」
    }
  }
 }

-[[上下左右に動くボール(コードを整理した):http://www.catch.jp/program/soramame/sample/SoraMame_lesson_48.html]]
-[[上下左右に動くボール(コードを整理した):http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_48.html]]

**整理したコードの実行~ [#ubf94260]

さて、これがどのように動作されるのか、具体的に説明しよう。~

「---くり返し描画する」の中のコードが、上から順番に実行されて~
「横移動する」の行までくると、~
「---横移動する」の「{・・・}」の間のコードが呼び出される。~
呼び出し先でコードの実行が完了すると、~
呼び出し元に戻って、続きを実行する。~

それから、「縦移動する」の行までくると、~
「---横移動する」の「{・・・}」の間のコードが呼び出される。~
呼び出し先でコードの実行が完了すると、~
呼び出し元に戻って、続きを実行するんだ。~

#ref(call_command.png);



**命令語の定義 [#g2a466fc]

このように役割ごとにコードを整理するのが、「命令語の定義」だ。~
そら豆スクリプトでは、行頭から「---(命令語){・・・}」と書いて命令語を定義する。~
つまり、「横移動する」や「縦移動する」は、~
「マル」や「背景色」と同じように命令語になっているんだ。~

じつは、この「命令語の定義」は、すでに2つ登場している。~
それは「初期設定する」と「くり返し描画する」だ。~

この2つの命令語は、すこしだけ特別で、~
そら豆スクリプトの外側から自動的に呼び出されている。~




*演習 [#kbbe15f3]

何にもまして、実際に自分で考えて、自分で作ってみることが重要だ。~

今回も、練習問題の回答と演習問題を用意してみたので、ぜひチャレンジしてみてほしい。~


**練習問題の回答 [#r0e01195]

さて問題は、~

 ボールを右から左へくり返し移動させるには、どうすればいいだろうか？

というものだった。~

ボールを右から左へ動かすには、@ボールXの数値をどんどん小さくしていけばいい。~
そのためには、@ボールXから一定の数値(この場合は10)を引いていく。~

 @ボールX = @ボールX - 10

そして、@ボールXの値が0より小さくなったら、~
右のはしに戻してやる。~

  もし{条件:@ボールX < 0}ならば{
      @ボールX = @幅
  }

-[[ボールを右から左へ動かす:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_44b.html]]
-[[ボールを右から左へ動かす:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_44b.html]]



**演習問題 [#h2496dc1]

次のようなプログラムを作ってみよう。

これらも、自分の予想どおりになるか
じっさいに手を動かして
ためしてみよう。

''1.''マウスの反対側に、マルを描いてみよう。~
マウスが右上にあるときは、マルを左下に描く。~
マウスが左下にあるときは、マルを右上に描く。~


''2.''上下左右に動くボールを改造して、ボールが上下に動くとき、1回あたりに動く量を変化させてみよう。~
たとえば、1回目は70動く、2回目は60動く、3回目は50動く、というように、移動量を減らしていく。~
そして、移動量がマイナスになっても、そのまま続ける。~
このようにすると、ボールは地面をゴム球のようにはねることになる。~

#ref(practice_42.png);

----

[[＜＜>SoraMame.ps.js/入門/part.3]] [[1>SoraMame.ps.js/入門/part.1]] [[2>SoraMame.ps.js/入門/part.2]] [[3>SoraMame.ps.js/入門/part.3]] ''4'' 5 6 7 8 ＞＞ [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]