動画？For文とDo文そして絵を利用した例題

・パラパラ漫画のようにPictureBoxを動かしてみよう。

○PictureBoxを動かしてみよう；原理はパラパラ漫画？

• つまらない授業などの際、教科書やノートの端っこにパラパラ漫画を書いたことはないですか？
  パラパラ漫画は、ちょっとづつ絵を動かすことによって、動いたように見えるという原理です。
• PictureBoxの位置をプログラムで変え、動かす（瞬間移動？）する方法は学びましたね。
• これを利用して、PictureBoxをちょっとづつ動かして、移動しているように見せてみましょう。
• 例えば、PictureBox1.Left = 0 → PictureBox1.Left = 1 → PictureBox1.Left = 2 → PictureBox1.Left = 3 → …
  とするとどうなるだろうか？
• PictureBox1.Left つまりPictureBox1という名前のピクチャーボックスコントロールの左側の位置を０にすると、Form画面の一番左に移動する。そして、１にすると画面左から１だけ離れた位置に移動する。これを繰り返していくと、、、端から動いていくように見えるはず。
• ここまでのプログラムは以下のようになるはず。
  For x = 0 To 100
  　PictureBox1.Left = x
  Next x
• しかし、実はこれではうまく動いているように見えない。
  なぜならば、早すぎるからである。あっという間に移動して移動しているように見えない。
  • 
    
• そこで、次のように、移動させたらちょっとお休みさせてみよう。
  • ちょっとお休みをする方法は勉強しましたよね、
    空のFor文、もしくはSleep命令を使うのでしたよね⇒参考；○一呼吸入れる（ちょっとだけおやすみ）

For x = 0 To 100
  PictureBox1.Left = x
  System.Threading.Thread.Sleep(2)
  'For k = 0 To 100000: Next k
Next x

• Sleep命令の括弧内の数値(ms)や、空のFor文の数は、適当な数値に調整してみよう。

○画面の端から端へ移動

• 上記例は、画面左から１００だけ移動させたが、画面左端から右端（ぎりぎり）まで移動させるプログラムを作ってみよう！
• 但し、For文ではなく、Do文を使って書きましょう。
• 移動させるには主に二つの方法があることに注目しよう。
  • For文などを利用して、移動先の座標を直接与える方法
    • PictureBox1.Left = x などがそう。
  • 今いる場所（座標）を利用して、一つ隣に移動させる方法
    • PictureBox1.Left = PictureBox1.Left + 1
      • 今いるｘ座標に１を足して、新たな座標としている。
もちろん、例えば次のようにしてもよい。
x = PictureBox1.Left + 1
PictureBox1.Left = x
この２行は、上記１行と同じこと。

○ガタガタ移動

• 上記例では、スムーズに右に進んでいく。
• 今度は、ちょっとガタガタと進むようにしよう。
• 考え方は、グリコ・チヨコレイト・パイナツプルじゃんけんと似たように考えてみる。
• 上記例は、必ず１つづつ右隣に移動をしていたが、場合よっては一度の２つもしくは３つ、、、移動させてみる。
• つまり、さいころを振って、１が出れば１だけ隣に、６が出れば６だけ隣に移動するようにする。
• こうすると、例えば１が続けて出ればゆっくりと進み、６が続けて出ると早く移動しているように見える。

○二つのPictureを移動させてみよう

• 上記例では１つのピクチャーボックスを移動させていったが、今度は二つのピクチャーボックスを用意して、二つを進ませてみよう。
• コンピュータは通常、同時に二つの仕事をすることはできない。つまり、
  二つ同時に移動することはできないが、コンピュータはとても早いので、一つを移動してすぐにもう一つを移動すれば同時に移動しているように見える。
• For文によって二つのPictureを１００回進めてみるプログラム例は次のようになる。

Dim n, k
Randomize()
PictureBox1.Left = 0 '最初にスタートラインに着く
PictureBox2.Left = 0 'PictureBox1と同じスタートラインに着く
For n = 0 To 100
    PictureBox1.Left = PictureBox1.Left + Int(Rnd(1) * 6) + 1
    PictureBox2.Left = PictureBox2.Left + Int(Rnd(1) * 6) + 1
    Label1.Text = PictureBox1.Left
    Label2.Text = PictureBox2.Left
    System.Threading.Thread.Sleep(2)
    'For k = 0 To 100000 : Next k
Next n

• このようにFor文だと、どこまで進むか全くわかりませんよね。。。
• 原理が分かったら、Do文でゴールまで進むように書いてみよう！
• 終了させるのは、まずはPictureBox1が画面右をはみ出したらとしてみよう。
  Do文の終了条件は「＝」ではうまくいかないことに注意しよう。
  これはゴールをまたいでしまう場合があるから（以下でも同じ）。
  つまり、 PictureBox1が画面右に付いたら（超えたら）とすること。
• 更に、PictureBox1もしくはPictureBox2のどちらか先に着いたらとしてみよう。
  • 条件を変更して、二つの条件をOrでつなぐようにすればよいはず。
• 更に、画面の８０％のところにゴール線をDrawLineで引いて、そこに先に到達したら終了させてみよう。
• そしてそして、どちらが勝ったのかを表示させてみよう！
  移動後に、どちらのPictureが右にあるのかを判定すればよい。

○色々な工夫

• 上記例では、Pictureを左から右へ移動させているが、右から左、上から下、下から上などは簡単に変更できるはず。
  位置、大きさなどの座標系を思い出せば簡単。
• ちょっと工夫すれば、まっすぐ移動せず、ちょっとだけふらふら移動させることもできるぞ！
• 勿論、３つ、４つなどのPictureBoxを移動させることもできる。
• Math.Sin( )関数を使えば波を打つように移動させることもできるぞ（以下のFor文による簡単な例参照）。

Dim yy, n, x, y, k
PictureBox1.Left = 0
yy = PictureBox1.Top
For n = 0 To 3.14 * 12 Step 0.1
    x = PictureBox1.Left + 1
    y = yy + Math.Sin(n) * 20
    PictureBox1.Left = x
    PictureBox1.Top = y
    'Label1.Text = x : Label2.Text = y
    'Label1.Refresh() : Label2.Refresh()
    System.Threading.Thread.Sleep(2)
    'For k = 0 To 100000 : Next k
Next n

• 複数を円を描くように移動させるのはかなり難しい。。。（今の段階では）

[「ＷＲ班」プログラミング基礎のTopに戻る]