Pongを作る(1)

Pong は、初期のテレビゲーム（ビデオゲーム）の代表格。Processingで再現してみましょう。

初期のPongをドキュメントした映像はこんな感じ。両側にパドル（ラケット）があって、画面の上下に跳ね返らせて、エアホッケーのようにボールを打ち合います。

では早速。ステージを作りましょう。中央には点線を引いておきましょう（実際は実線ですが）。

void setup() {
  size (480,320);
}

void draw() {
  background(0);
  strokeWeight (1);
  stroke(255);
  for ( int i = 0; i < height; i += 10 ){
    line(width/2, i, width/2, i+5);
  }
}

ラケットを作ります。単純にマウスの動きに合わせるだけであれば、次のように書きます。X は固定なので、mouseYを使って上下の位置を指定します。

rect(440, mouseY, 8, 50);

ですが、これではボールにすぐに追いつくのでちょっと簡単です。そこで、マウスを少しずつ追いかけてくるようにしましょう。敵のラケットも同様、ボールの Y 方向（上下）の動きを追うようにします。
新たに、targetY，racketY，enemyY，ballX，ballY というfloat（実数）型の変数を用意しておきます。 加えて、ラケットがマウスに徐々に近づいていくようにするために、easing という、こちらも float 型の変数を用意しておきます。

イージングとは、ターゲット（今回はマウスのY座標）とラケットとの距離をはかり、一定の割合で近づけていくという方法です。easing を0.1にしておき下のように記述すると、マウスとラケットとの距離の 10% ずつマウスに近づいていきます。ですので、近づけば近づくほど、近づくスピードは遅くなります。この値を大きくするともっと早くマウスに近づきます。

float ballX;
float ballY;
float racketY = height/2;
float enemyY;
float easing = 0.1;

//　draw()内　my racket
float targetY = mouseY;
racketY += (targetY - racketY) * easing;
rect(440, racketY-20, 8, 50);

//enemy rachekt
enemyY += (ballY - enemyY) * easing;
rect(40, enemyY-20, 8, 50);

以下のように、右側にプレイヤーのラケット、左側に敵のラケットが表示されます。画像では分かりにくいのですが、プレイヤーのラケットは、マウスについて来るような動きをします。

今日のまとめです。現状ではボールはまだなく、敵のラケットも動かしていません。

float ballX;
float ballY;
float racketY = height/2;
float enemyY;
float easing = 0.1;

void setup() {
  size (480,320);
}

void draw() {
  background(0);
  
  strokeWeight (1);
  stroke(255);
  for ( int i = 0; i < height; i += 10 ){
    line(width/2, i, width/2, i+5);
  }
  
  //my racket
  float targetY = mouseY;
  racketY += (targetY - racketY) * easing;
  rect(440, racketY-20, 8, 50);

  //enemy racket
  enemyY += (ballY - enemyY) * easing;
  rect(40, enemyY-20, 8, 50);
}