Pongを作る(2)　ボールのはね返り

今回はボールを作り、壁に当たったらはね返るようにしましょう。

まず、ボールを画面に出現させましょう。ballX と ballY の初期値を画面の中央に設定しておきます。例えばこの2つの値が1ずつ増えれば、45度の角度で右下にボールが進んでいきます。円を描くには、ellipse を使います。

前回のコードに以下を追加します。

//　setup()内
ballX = width/2;
ballY = height/2;
//　draw()内の最後
ellipse( ballX, ballY, 6, 6);
ballX++;
ballY++;

すると、ボールが画面中央に出現し、徐々に右下に移動するようになりました。

ですが、まだ壁へのはね返りを設定していないので、ボールは画面下に消えてしまいました。敵のラケットはボールを追いかけるようにしてあるので、敵のラケットも下の方へ行ってしまいました。

では、まずは四方の壁に反射するようにしてみましょう。上下の壁に当たったらX方向だけ向きが変わって、左右の壁に当たったらY方向だけ向きが変わるようにするにはどうすればいいでしょうか。

これを簡単に実現するために、xDir （X方向）と yDir （Y方向）という、新しい変数を用意します。初期値を 1 とし、壁に当たったらこの値が -1 になるようにします。1 フレームごとに進む距離にこの値を掛け合わせた値を ballX，ballY に加えることで、ボールの方向を反転できます。X 方向、Y 方向のそれぞれに進むスピードを指定するために、xSpeed と ySpeed という変数も加えます。初期値を 1 としておきますが、この2つの値を指定できるようにすることで、ボールのスピードだけでなくボールが進む角度も変えることができるようになります。

int xDir, yDir;
int xSpeed, ySpeed;
//　setup()内
xDir = 1;
yDir = 1;
xSpeed = 1;
ySpeed = 1;
//　draw()内の最後
if((ballX+3>width) || (ballX-3<0)) xDir *= -1;　//　3 はボールの半径 
if((ballY+3>height) || (ballY-3<0))  yDir *= -1;　//　3 はボールの半径
ballX += xSpeed * xDir;
ballY += ySpeed * yDir;

上記の”3″という値は、ボールの半径です。ellipseの円は起点が中心に設定されているので、これがないと、ボールの半分が壁にめり込んだようになってしまいます。

これで上下左右の壁にはね返るようになりました。現状では、ラケットに当たってもまだ何も起こりません。

今日のコードです。

float ballX, ballY;
float racketY;
int xDir, yDir;
int xSpeed, ySpeed;
float enemyY;
float easing;

void setup() {
  size (480,320);
  ballX = width/2;
  ballY = height/2;
  racketY = height/2;
  easing = 0.1;
  xDir = 1;
  yDir = 1;
  xSpeed = 1;
  ySpeed = 1;
}

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);
  ellipse(ballX, ballY, 6, 6);
  if((ballX+3>width) || (ballX-3<0)) xDir *= -1; 
  if((ballY+3>height) || (ballY-3<0))  yDir *= -1;
  ballX += xSpeed * xDir;
  ballY += ySpeed * yDir;
}