Pongを作る(10)　背景に動く模様を加える

背景に動く模様をつけてみたいと思います。
雪が降るように丸い模様が無数に背景を飛んでいるような模様を加えることで、ボールがどこにあるか分かりにくくなり、その分ボールを探さなければいけない面白さがでるかと。

同じようなものをたくさん描くとき、クラスを使うと便利です。クラスとは、よくクッキーの焼き型に例えられます。型を使うことで、同じ形のクッキーをたくさんつくることができます。クッキーには、それぞれ異なる特性を持たせることもできます。
では、クラスを記述します。コードは「Pongを作る(6)」のときのものを使っています。

今回は、Starという名前のクラスを作り、そこから作るインスタンス（先ほどの例で言うクッキー）を stars という名前にします。
setup()の直前に、以下を加えます。1行目は、Star型のstarsをたくさん（50個）作りますよ、という宣言です。class で始まる個所は、Star の型の内容です。変数と命令をまとめたもの（メソッドといいます）をまとめて記述することができます。

Star[] stars = new Star[50];　//　Starクラスを配列で使用する

class Star{　//　クラスの定義
  float x, y, xSpeed, ySpeed, r;
  Star(){
    x = random(width);
    y = random(height);
    xSpeed = random(5);
    ySpeed = random(5);
    r = random(8);
  }
  void update(){
    x += xSpeed;
    y += ySpeed;
    if (x > width) x = 0;
    if (y > height) y = 0;
  }
  void display(){
    fill(255);
    ellipse(x, y, r, r);
  }
}

setup() の中に以下を加え、50個の配列のそれぞれに、クラス（型）からインスタンス（クッキー・実体）を入れています。

for (int i = 0; i < stars.length; i++){
  stars[i] = new Star();
}

draw() の中に以下を加えます。

for(int i = 0; i < 50; i++){
  stars[i].update();
  stars[i].display();
}

すると、以下のように吹雪の中でプレイしているようになります。

写真ではボールどれかまったく分かりませんが、プレイしてみると、特に左方向にボールが動いている時は、比較的簡単にボールを見つけられます。

今日のコードです。

float ballX, ballY;
float racketY;
int xDir, yDir;
float xSpeed, ySpeed;
float enemyY;
float easing;
int myScore = 0;
int enemyScore = 0;
int mySet = 0;
int enemySet = 0;
Star[] stars = new Star[50];

class Star{
  float x, y, xSpeed, ySpeed, r;
  Star(){
    x = random(width);
    y = random(height);
    xSpeed = random(5);
    ySpeed = random(5);
    r = random(8);
  }
  void update(){
    x += xSpeed;
    y += ySpeed;
    if (x > width) x = 0;
    if (y > height) y = 0;
  }
  void display(){
    fill(255);
    ellipse(x, y, r, r);
  }
}

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;
  for (int i = 0; i < stars.length; i++){
    stars[i] = new Star();
  }
}

void draw() {
  background(0);
  
  for(int i = 0; i < 50; i++){
    stars[i].update();
    stars[i].display();
  }
  
  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-25, 8, 50); //enemy racket enemyY += (ballY - enemyY) * easing; rect(40, enemyY-25, 8, 50); ellipse(ballX, ballY, 6, 6); if((ballY+3>height) || (ballY-3<0)) yDir *= -1; if ((ballX+3 >= 440) && (ballX+3 <= 448) && (ballY > racketY-25) && (ballY < racketY+30))
    xDir *= -1;
  if ((ballX-3 <= 48) && (ballX-3 >= 40) && (ballY > enemyY-25) && (ballY < enemyY+25)) xDir *= -1; if (ballX+3 > width) {
    enemyScore ++;
    ballX = width/2;
    ballY = height/2;
    xSpeed = random(1, 4);
    ySpeed = random(1, 4);
  }
  else if(ballX-3 < 0) { myScore ++; ballX = width/2; ballY = height/2; xSpeed = random(1, 4); ySpeed = random(1, 4); } ballX += xSpeed * xDir; ballY += ySpeed * yDir; textAlign(CENTER, CENTER); textSize(30); text(enemySet, 80, 20); text(enemyScore, 160, 20); text(mySet, 320, 20); text(myScore, 400, 20); if (myScore > 2) {
    mySet++;
    myScore = 0;
  }
  if (enemyScore > 2) {
    enemySet++;
    enemyScore = 0;
  }
  
  xSpeed += 0.01;
  ySpeed += 0.01;
  
  textSize(80);
  if (enemySet >= 3){
    text("You LOSE!", width/2, 130);
    textSize(40);
    text("Click to restart", width/2, 200);
  }
  else if (mySet >= 3){
    text("You WIN!", width/2, height/2-30);
    textSize(40);
    text("Click to restart", width/2, height/2+30);
  }
  
  if(mousePressed){
    ballX = width/2;
    ballY = height/2;
    mySet = 0;
    myScore = 0;
    enemySet = 0;
    enemyScore = 0;
    xSpeed = 1;
    ySpeed = 1;
  }
}