[프로세싱(Processing)] 벽돌 깨기 게임

벽돌 깨기 게임

옛날 오락실에서 많이 했던 추억의 게임 벽돌 깨기. 
프로세싱으로 처음 개발한 게임.
기능상 완벽하지는 않지만, 재미난 경험.

---

1. 게임 기획

프로세싱(Processing)으로 벽돌깨기 게임을 만들기 위해, 다음 내용으로 기획하였다.

1) 게임 화면 설정
2) 패들(Paddle) 및 공(Ball) 객체 생성
3) 벽돌(Brick) 객체 생성
4) 공 움직임 처리
5) 패들 움직임 처리
6) 벽돌 충돌 감지
7) 점수 및 게임 종료 처리

---

2. 설계 및 구현

 

1) 게임 화면 설정

setup() 및 draw() 함수를 사용하여 게임 창을 설정.
창 사이즈는 800 * 600으로 설정함.
배경색은 검정색으로 설정함.

void setup() {
  size(800, 600);
}

void draw() {
  background(0);
}

 

2) 패들 및 공 객체 생성

패들, 공 클래스를 만들고, 이동(move), 디스플레이(display) 메서드를 만듦
move : 해당 객체를 이동시키는 기능
display : 해당 객체를 화면(창) 표시하는 기능 

class Paddle {
  float x, y, w, h;

  Paddle(float x, float y, float w, float h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }

  void display() {
    rect(x, y, w, h);
  }
}

class Ball {
  float x, y, r, dx, dy;

  Ball(float x, float y, float r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.dx = 5;
    this.dy = -5;
  }

  void move() {
    x += dx;
    y += dy;
  }

  void display() {
    ellipse(x, y, r*2, r*2);
  }
}

 

3) 벽돌 객체 생성

벽돌 클래스를 생성.

class Brick {
  float x, y, w, h;
  boolean isVisible;

  Brick(float x, float y, float w, float h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.isVisible = true;
  }

  void display() {
    if (isVisible) {
      rect(x, y, w, h);
    }
  }
}

 

4) 공 움직임 처리

공이 움직이면서 화면을 벗어나지 않도록 경계 충돌 처리 기능 추가

// (Ball 클래스 내부에 추가)
void checkBoundary() {
  if (x - r <= 0 || x + r >= width) {
    dx = -dx;
  }
  if (y - r <= 0) {
    dy = -dy;
  }
}

 

Ball 클래스의 move 메서드에 충돌감지체크(checkBoundary) 메서드를 호출하여 매번 체크

void move() {
  x += dx;
  y += dy;
  checkBoundary();  // <-- 추가
}

 

5) 패들 움직임 처리

마우스를 따라 움직이도록 패들의 기능 추가
Paddle 클래스에 update 메서드를 추가하여 기능 구현  

// (Paddle 클래스 내부에 추가)   
void update() {
  x = mouseX - w/2;
  x = constrain(x, 0, width - w);
}

draw() 함수에서 패들의 update() 함수를 호출하여 패들이 마우스를 따라 움직이도록 함.

void draw() {
...  // 앞 소스

paddle.update();  // <-- 추가

...  // 뒤 소스
}

6) 벽돌 충돌 감지

공이 벽돌과 충돌했는지 확인.
충돌 시 벽돌을 깨고(숨기고) 공의 방향을 변경

// (Brick 클래스에 checkCollision 메서드를 추가)
boolean checkCollision(Ball ball) {
  if (isVisible && ball.x + ball.r >= x && ball.x - ball.r <= x + w && ball.y + ball.r >= y && ball.y - ball.r <= y + h) {
    isVisible = false;
    return true;
  }
  return false;
}

// (충돌 감지를 위해 Ball 클래스에 checkBrickCollision 메서드를 추가)
void checkBrickCollision(Brick[] bricks) {
  for (Brick brick : bricks) {
    if (brick.checkCollision(this)) {
      dy = -dy;
      break;
    }
  }
}

7) 점수 및 게임 종료 처리

공이 벽돌에 충돌하면 점수를 반영.
공이 화면 아래로 벗어났을 때 게임이 종료되도록 처리.

// (게임 종료 처리 기능)
int score = 0;
boolean isGameOver = false;

void gameOver() {
  isGameOver = true;
  textSize(32);
  fill(255);
  textAlign(CENTER, CENTER);
  text("Game Over!", width/2, height/2);
}

// (충돌 발생 시 점수를 증가)
void checkBrickCollision(Brick[] bricks) {
  for (Brick brick : bricks) {
    if (brick.checkCollision(this)) {
      dy = -dy;
      score++; // <-- 추가
      break;
    }
  }
}

// (공이 화면 아래로 벗어난 경우 게임을 종료)
void move() {
  x += dx;
  y += dy;
  checkBoundary();
  
  if (y + r >= height) {     // <-- 추가
    gameOver();              // <-- 추가
  }                          // <-- 추가
}

 

3. 추가 기능 구현

[기능리스트]

1) 공이 패들에 충돌했을 때 반사 각도 조절
2) 벽돌 색깔을 랜덤하게 생성되도록 기능 변경
3) 공의 속도 증가 기능 추가

 

[기능 구현]

1) 공이 패들에 충돌했을 때 반사 각도 조절
공이 패들에 충돌했을 때 공과 패들의 상대 위치에 따라 반사 각도를 변경

// (Ball 클래스에 checkPaddleCollision 메서드 추가)
void checkPaddleCollision(Paddle paddle) {
  if (y + r >= paddle.y && y - r <= paddle.y + paddle.h && x + r >= paddle.x && x - r <= paddle.x + paddle.w) {
    // 공이 패들의 중앙에서 떨어진 거리 계산
    float paddleCenter = paddle.x + (paddle.w / 2);
    float diff = map(x - paddleCenter, -paddle.w / 2, paddle.w / 2, -1, 1);
    float angle = diff * PI / 3;

    dx = cos(angle) * 4;
    dy = -abs(sin(angle) * 4);
  }
}

// (draw() 함수에서 공과 패들의 충돌 감지 메서드 호출)
ball.checkPaddleCollision(paddle);

 

2) 벽돌 색깔을 랜덤하게 생성되도록 기능 변경

벽돌에 색상 속성을 추가하고 display() 함수에서 이 색상을 사용하여 벽돌을 그림.

// (Brick 클래스 수정)
class Brick {
  // ... 기존 소스
  color c;  // <-- 추가

  Brick(float x, float y, float w, float h) {
    // ... 기존 소스
    c = color(random(255), random(255), random(255)); // <-- 추가
  }

  void display() {
    if (isVisible) {
      fill(c);          // <-- 추가
      rect(x, y, w, h);
    }
  }
}

3) 공의 속도 증가 기능 추가

점수에 따라 공의 속도를 증가하도록 기능 추가

// (Ball 클래스에 checkBrickCollision 메서드 추가)    
void checkBrickCollision(Brick[] bricks) {
  for (Brick brick : bricks) {
    if (brick.checkCollision(this)) {
      dy = -dy;
      score++;
      dx *= 1.01; // 공의 속도 증가
      dy *= 1.01; // 공의 속도 증가
      break;
    }
  }
}

(draw() 함수에서 checkBrickCollision 메서드 호출)
ball.checkBrickCollision(bricks);

 

---

[전체 소스]

BrickBreak.zip

0.00MB