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

<!--

# 10. いろいろ調整
ほとんど完成していますが、完成度をあげるためにもうちょっと調整しましょう。

## その前に
### 前回までのコード
```Java
float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 200;
int shibou = 0;
int score = 0;
int title = 1;
void setup() {
  size(600, 400);
  textFont(createFont("Arial", 48));
}
void draw() {
  background(0);
  if (title == 1) {
    fill(255);
    textSize(48);
    textAlign(CENTER);
    text("キュービックバード", width/2, height/2);
    return;
  }
  // 死亡フラグがたっていなければ
  if (shibou == 0) {
    // 土管のプログラム
    dokan();
    // プレイヤーのプログラム
    player();
  }
  // 死亡フラグがたっていれば
  if (shibou == 1) {
    fill(255, 0, 0);
    textAlign(CENTER);
    text("GAME OVER", 300, 200);
  }
  fill(255);
  textAlign(CENTER);
  textSize(48);
  text(score, width/2, 100);
}
void mousePressed() {
  speed = -10;
}
void dokan() {
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
    score = score + 1;
  }
  fill(255, 255, 255);
  rect(dx, dy, 50, 400 - dy);

  // 上の土管
  fill(255);
  rect(dx, 0, 50, dy - 150);
}
void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);

  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0); 
    shibou = 1;
  }
  rect(x, y, 50, 50);
}
int isHit(float px, float py, float pw, float ph, float ex, float ey, float ew, float eh) {
  if (px < ex + ew && px + pw > ex) {
    if (py < ey + eh && py + ph > ey) {
      return 1;
    }
  }
  return 0;
}
void init() {
  x = 100;
  y = 200;
  speed = 0;
  dx = 400;
  dy = 200;
  shibou = 0;
  score = 0;
  title = 1;
}

void keyPressed() {
  // スペースが押されたら
  if (key == ' ') {
    if (title == 1) {
      title = 0;
    }
    if (shibou == 1) {
      init();
    }
  }
}

```

## 10-1 画面からはみ出した時はゲームオーバーにしよう
気づいた人もいるかもしれませんが、画面をはみ出して飛び回るといくらでもスコアを伸ばせます。チート状態です。
チートができないように、画面から完全に消えてしまったら死亡フラグを立てましょう。

```Java
void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);

  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0); 
    shibou = 1;
  }
  
  // 画面からはみ出してないか
  if(y < -50 || y > height){
    shibou = 1;
  }
  rect(x, y, 50, 50);
}
```

画面の上部の判定を「-50」としています。
これはプレイヤー（四角形）の大きさ分マイナスにしているものです。
もし「y < 0」としてしまうと、頭が画面からはみ出しただけで死亡フラグが立ってしまうので、足元まですっぽりはみ出したら、という判定にするために大きさ分マイナスにしています。


## 10-2 画像を使ってみよう

これも好みですが、ただの四角形では嫌だと言う人もいるでしょう。
プレイヤーを画像に変更してみましょう。

今回はこちらから画像をお借りしました。
http://www.chojugiga.com/2017/07/02/da4choju34_0020/

画像をダウンロードし、「bird.png」という名前に変更しましょう。
変更したら、Processingのエディタへドラッグ&ドロップします。

### 画像を読み込む

画像を表示するには、
1. 画像を読み込んで、
2. 読み込んだ画像を表示する

という二つの命令が必要です。

まずは画像を読み込みましょう。

```Java
float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 200;
int shibou = 0;
int score = 0;
int title = 1;
// PImage型の変数gazoを用意
PImage gazo;
void setup() {
  size(600, 400);
  textFont(createFont("Arial", 48));
  // loadImageで画像を読み込み、gazo変数へ保存
  gazo = loadImage("bird.png");
}
```

setup関数の中で、loadImageでファイル名を指定します。PImage型のオブジェクトと呼ばれるものが返ってくるので、PImage型のgazo変数に代入して保存しておきます。

画像の読み込みは一度だけで良いのでsetupの中で実行しています。


### 読み込んだ画像を表示する

loadImageで読み込んだ画像を、実際に表示します。
表示するには、imageという命令を使います。

```Java
void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);

  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0); 
    shibou = 1;
  }
  
  // 画面からはみ出してないか
  if(y < -50 || y > height){
    shibou = 1;
  }
  rect(x, y, 50, 50);
  // imageを使って画像を表示
  image(gazo, x, y, 50, 50);
}
```

player関数の最後で、画像を表示します。
1番目にPImage型の変数gazoを、続いて表示するx座標とy座標、そして横幅と縦幅です。

以前から使っていたrectと合わせた引数で表示してみます。

### 画像の表示を調整する

しかし、画像の比率が違うため、引き伸ばされて表示されてしまう場合があります。
その場合は、当たり判定は変えずに、表示の位置、大きさだけ変えてあげましょう。

rectは当たり判定の基準ですので、コメントアウトしておいて残しておくと良いでしょう。

```Java
void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);

  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0); 
    shibou = 1;
  }
  
  // 画面からはみ出してないか
  if(y < -50 || y > height){
    shibou = 1;
  }
  // rect(x, y, 50, 50);
  image(gazo, x-25, y, 100, 50);
}
```


-->