프로세싱 응용 벽돌깨기 게임 만들기

이번에는 프로세싱으로 벽돌깨기 게임을 만들어보자, 차근차근 라켓부터 시작해서 벽돌을 만들고 플레이하는 것까지가 목표이다.

라켓 그리기

마우스를 이용해서 움직이는 라켓을 만들어보자

화면출력

라켓 제작

소스코드

int padX; int padWidth=200;   void setup() {   size(480, 480); // 화면사이즈   stroke(255); // 선 색상 }   void draw() {   background(0);      padX = mouseX;   line(padX, height-50, padX+padWidth, height-50); // 선 긋기, 마우스와 계산식에 따라 위치가 바뀐다 }

마우스를 좌/우로 이동하면 라켓이 같이 움직이는 것을 확인 할 수 있다.

공 그리기

벽돌깨기를 하려면 공이 있어야 되지 않는가? 한 번 그려보자. 공은 계속해서 움직여야되고, 배경 밖으로 벗어나려고 하면 다른 방향으로 반사되서 돌아와야된다. 그리고 라인에 부딪혀도 반사가 되어서 팅겨나가야 된다.

화면 출력

공 제작

소스코드

int xPos, yPos; int xDir, yDir; int padX, padWidth;   void setup() {   size(480, 480);   xPos = yPos = 10;   xDir = -2;   yDir = -3;   padX = 30;   padWidth = 200;      stroke(255); }   void draw() {   background(0); // 배경 검정색   ellipse(xPos, yPos, 20, 20); // 공그리기      xPos += xDir; // 공 이동   yPos += yDir;      padX = mouseX; // 라켓 이동을 위해 마우스 값 입력   line(padX, height-50, padX+padWidth, height-50); // 라켓 그리기   // 공의 벽과 라케사, 충돌 감지   if(xPos<10||xPos>width-10) xDir *= -1; // 좌우 벽 충돌 감지 시 값 역전   if(yPos<0 || yPos>height-50 && xPos>=padX && xPos<=padX+padWidth) yDir *= -1;   // 상단 충돌, 하단 충돌, 라켓 충돌 감지 시 값 역전 }

마우스를 움직이면 라켓이 움직이고, 공은 계속해서 움직이며 상/하/좌/우 벽과 라켓에 부딪히면 반대방향으로 반사되어 날라간다.

벽돌그리기

마지막 남은 것은 무엇이겠는가? 벽돌깨기에 벽돌이 없으면 섭하지 않는가? 한 번 그려보자. 배열을 이용해서 그리며, 만들어진 벽돌은 마우스 클릭을 통해 없어지도록 해보자.

화면출력

벽돌 제작

소스코드

int [][]bricks = new int [5][10];   void setup() {   int i, j;   size(500, 500);   for(i=0;i<5;i++) { // 벽돌 위치 값 생성     for(j=0;j<10;j++) {       bricks[i][j] = 1;     }     } }   void draw() {   int i, j;   background(0);   for(i=0;i<5;i++) { // 벽돌 생성     for(j=0;j<10;j++) {       if(bricks[i][j] == 1) fill(255); // 벽돌 위치 값이 1 일 경우 색상은 힌색       else fill(0); // 벽돌 위치 값이 0 일 경우 색상은 검정색       rect(j*50, i*20, 50, 20); // 벽돌 그리기     }     }   if(mousePressed) { // 마우스 클릭     if(bricks[mouseY/20][mouseX/50] == 1) { // 벽돌 값이 1일 경우 0으로 변환       bricks[mouseY/20][mouseX/50] = 0;     }   } }

벽돌이 5x10 배열로 생성된다. 벽돌의 갯수를 조절하려면 for문의 값을 변경하면 간단하게 해결된다. 배열 값이 1이면 벽돌이 생성되고 0이면 벽돌이 사라지게 되어있기 때문에 마우스 클릭시 값이 바뀌어 벽돌이 사라진다.

벽돌깨기 완성하기

벽돌깨기를 만드는데 필요한 것들은 이미 다 만들었다. 이를 조합해서 벽돌깨기 게임을 완성해보자.

화면 출력

소스코드

int xPos, yPos; int xDir, yDir; int padX, padWidth; int [][]bricks = new int[2][10]; boolean dead, play;   void setup() {   size(500, 400);   GameReset(); }   void draw() {   int i, j;   background(0);   for(i=0; i<2; i++) {     for(j=0; j<10; j++) {       if(bricks[i][j] == 1) rect(j*50, i*20, 50, 20);     }   }   if(dead) {     text("Click to play again", 10, height/2);     if(mousePressed == true) GameReset();   }   if(play) {     ellipse(xPos, yPos, 20, 20);     xPos += xDir;     yPos += yDir;     padX=mouseX;     if(padX > 300) padX = 300;     line(padX, height-75, padX+padWidth, height-75);     if(xPos<10 || xPos>width-10) xDir *= -1;     if(yPos<40) {       if(bricks[yPos/20][xPos/50] == 1) {         yDir *= -1;         bricks[yPos/20][xPos/50]=0;       }       else if(yPos<0) yDir *= -1;     }    }   if(yPos>height-75 && xPos>=padX && xPos<=padX+padWidth) yDir *= -1;   if(yPos>height-10) {     dead=true;     play=false;   } }   void GameReset() {   int i, j;      xPos = width/2;   yPos = height/2;      xDir=3;   yDir=4;      padX=width;   padWidth=200;      dead=false;   play=true;      for(i=0;i<2;i++) {     for(j=0;j<10;j++) {       bricks[i][j] = 1;     }   }   fill(100);   strokeWeight(5);   stroke(255); }

마우스 클릭하면 벽돌 값이 바뀌는 것을 공과 값이 겹쳐지면 사라지도록 변경했다. 그리고 아래로 떨어지게 될 경우 게임 오버가 되도록 만들었다. 마지막으로 게임오버 된 경우 마우스 클릭시 다시 처음부터 시작하게 된다.

어떤가? 프로세싱으로 생각보다 간단하게 만들어지지 않는가? 갤러그, 테트리스 등 다양하게 쉽게 만들수 있으니 한 번 기회가 된다면 만들어보자.

소스코드에는 정답은 없다. 다양한 생각이 있듯 다양한 방법이 있으며, 그 중 하나일 뿐이다.