消しました。Processingでフラッピーバードをつくろう(3):子供のプログラミング学習

<!--


# 3.プログラムを別々にする
Processingでフラッピーバードをつくっていきます。
前回は下の土管の動きを作っていきました。
今回は前々回のプレイヤーの動きとがっちゃんこしていきます。

## そのまえに
### プレイヤーのプログラムコード
```Java
float x = 100;
float y = 200;
float speed = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
void mousePressed(){
  speed = -10;
}
```

### 土管のプログラムコード

```Java
float dx = 400;
float dy = 100;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  dx = dx - 5;
  if(dx + 50 < 0){
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
```

この二つのプログラムコードが手元にある前提で話をすすめていきます。

## 3-1 プログラムをいっしょにする

プレイヤーの動きと、土管の動きが一緒になるように、
プログラムコードをがっちゃんこしていきます。

### コピペでは動かない

まずはみんながやりそうなこと。

「二つのプログラムコードをそのままコピペする」

これは動きません。

```Java:ダメな例
// プレイヤーのプログラムコード
float x = 100;
float y = 200;
float speed = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
void mousePressed(){
  speed = -10;
}
// 土管のプログラムコード
float dx = 400;
float dy = 100;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  dx = dx - 5;
  if(dx + 50 < 0){
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
```

エラーとなって全く動かないと思います。

なぜかというと、

「setupとdrawがそれぞれ二つ存在しているから」です。

setupとdrawは、プログラムコードの中に1つしか存在できません。

なので、setupの中だけ、drawの中だけ合わせると動きます。

### setupの中身、drawの中身を一緒にする

```Java
// プレイヤーの変数
float x = 100;
float y = 200;
float speed = 0;
// 土管の変数
float dx = 400;
float dy = 100;
void setup() {
  // プレイヤーのsetup
  size(600, 400);
  // 土管のsetup
  size(600, 400);
}
void draw() {
  // プレイヤーのdraw
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);

  // 土管のdraw
  background(0);
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
void mousePressed() {
  speed = -10;
}
```

変数部分、setupの中、drawの中を切り出して、
部分部分で一緒にしました。

エラーはなくなり実行はできるようになりましたが、
プレイヤーが表示されません。

原因はいくつかあるのですが、

まずsetupの中身。

```Java
void setup() {
  // プレイヤーのsetup
  size(600, 400);
  // 土管のsetup
  size(600, 400);
}
```

size命令が2つ存在してしまっていておかしいので、1つにします。

次にdrawの中身。

```Java
void draw() {
  // プレイヤーのdraw
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);

  // 土管のdraw
  background(0);
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
```

drawの途中、
プレイヤーのrect命令が終わったあとに、
`background(0)`が命令されています。

backgroundは塗りつぶす命令です。
backgroundの前に実行した、rect命令の四角形は塗りつぶされてしまったんですね。

なので、途中のbackground命令は無くします。

また、細かいのですが、

プレイヤーが土管の裏に表示されてしまうのを防ぐために、
プレイヤーのプログラムは、土管の命令の後に実行するようにします。

よって、下のようになります。

```Java
float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 100;
void setup() {
  size(600, 400);
}
void draw() {
  background(0);
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);

  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
void mousePressed() {
  speed = -10;
}
```

## 3-2 役割ごとに関数にする

drawの中の行が増えてきましたね。

```Java
void draw() {
  background(0);
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);

  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
```

ぱっとみたときに、何をしているのかわかりづらくなってきてしまいました。

drawの中は、きれいにしておきたいので、
役割ごとにプログラムをわけたいと思います。

プログラムをわけるときに使うのが、**関数**です。

まず、下のプログラムを最後に追加します。

```Java
void dokan(){
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
```

drawの中にあった土管のプログラムコードに、「dokan」という名前をつけてまとめたものです。

プレイヤーも同じように、名前をつけます。

```Java
void player(){
  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
```

drawの中にあったプレイヤーのプログラムコードに、「player」という名前をつけてまとめたものです。

これらは「**関数**」と呼ばれ、簡単に言えば、プログラムをまとめて名前にすることができる機能です。

まとめたプログラムを呼び出すときは、

呼び出したい場所で、

「名前()」とすればOKです。

呼び出したい場所はもちろんdrawの中なので、
下のようにします。

```Java
void draw() {
  background(0);
  // まとめた土管のプログラムを呼び出す
  dokan();
  // まとめたプレイヤーのプログラムを呼び出す
  player();
}
```

これでdrawの中がすっきりしましたね。

今後、プレイヤーに関するプログラムは、先ほどのまとめたplayer関数の中に、

土管に関するプログラムは、dokan関数の中に、プログラムしていきます。

ここまでのまとめたプログラムコードをこちらです。

```Java
float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 100;
void setup() {
  size(600, 400);
}
void draw() {
  background(0);
  // まとめた土管のプログラムを呼び出す
  dokan();
  // まとめたプレイヤーのプログラムを呼び出す
  player();
}
void mousePressed() {
  speed = -10;
}
void dokan(){
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
void player(){
  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
```


-->