If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

숲 환경

이 게임은 대표적인 2D게임 형식인 "사이드-스크롤러(side-scroller)"입니다. 횡 스크롤이라고도 불리는 이 게임 형식은 옆에서 보는 시점에서 등장인물이 앞뒤로 움직입니다. 그러나 항상 화면의 중심에 등장인물이 있어야 하므로 등장인물을 지나치는 배경을 움직여 등장인물이 움직이는 것처럼 묘사합니다. 속임수이긴 하지만 잘 먹힙니다!
처음에는 움직임이 없는 파란 하늘과 갈색 땅을 먼저 그려봅시다.
draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0.90, width, height*0.10);
    // ...
}
이제 횡 스크롤 게임의 구색을 갖추기 위해 이미지 라이브러리에서 잔디 이미지를 가져와서 잔디를 추가하겠습니다. 움직이는 환경을 생성할 수 있는 한 방법은 배경이 3000 픽셀 너비인 것처럼 묘사하는 것입니다. 이는 게임의 한 스테이지가 이만큼 넓다는 것을 나타냅니다. 그런 다음, 3000 픽셀 크기에 알맞은 개수의 잔디 블록을 그려 시간에 따라 움직이게 합니다. 그러나 이런 식으로 하는 것은 그다지 효율적이지 않습니다. 게임을 프로그래밍할 때는 효율성을 크게 고려해야 합니다. 대신, 잔디 이미지를 겹치지 않게 늘어놓는 "타일링"을 하고 뱀처럼 "기다랗게" 줄지어 움직이도록 만들 것입니다. 그리고 400 픽셀 크기의 화면을 채울 수 있을 만큼 잔디를 많이 그린다음, 화면 왼쪽에서 끊기면 바로 다시 화면 오른쪽에 그리고 이 과정을 반복시키면 됩니다.
이를 구현하기 위해 잔디 블록의 초기 위치 배열을 생성하는 것부터 시작해 봅시다.
var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}
그리고 draw 반복문 내에 잔디 블록을 각각을 그립니다.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}
이 코드는 정적인 화면 치고는 훌륭해 보이지만 화면을 움직여야 합니다! 그러므로 매번 잔디 각각의 위치에서 1을 빼서 한 픽셀씩 왼쪽으로 움직이게 만들어야 합니다.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
}
이제 잔디는 움직이겠지만, x 값이 점점 더 큰 음수가 되면서 결과적으로는 사라지게 됩니다. 기억하세요. 여러분은 잔디를 뱀처럼 "기다랗게" 줄지어 움직여서 잔디가 화면 왼쪽으로 사라지면 다시 오른쪽으로 보내야 합니다. 이렇게 하려면 잔디가 화면 바깥으로 나와 있다는 것을 인지시키고 (이미지가 왼쪽 상단 모서리로부터 그려진다는 것을 기억하기 바랍니다.) x 값을 배경의 너비로 설정해야 합니다.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}
코드를 모두 합치면 비버가 뛰는 동안에도 앞으로 움직이는 것처럼 보입니다.
횡 스크롤 환경에서 위로 뛸 수 있는 비버 프로그램을 만들었습니다. 하지만 비버는 할수 있는 일이 아무것도 없어요! 비버가 뛰어올랐을 때 무언가를 수집할 수 있도록 막대기 같은 것을 추가할 필요가 있습니다.
막대기를 어떻게 프로그램할지 잠시 생각을 해봅시다.
  • 각 막대기에는 xy 위치가 있습니다. 사용자가 비버의 위와 아래로 뛰는 움직임을 제어할 수 있도록 막대기의 x 위치를 서로 일정 거리만큼 (상수나 일정 범위 내의 임의의 수) 떨어뜨리고 y 위치를 범위내에서 무작위로 설정해야 합니다.
  • 막대기는 잔디와 똑같이 움직여야 합니다. 하지만 잔디처럼 같은 위치에서 계속 생성되면 안 됩니다. 막대기가 한 번 화면 밖으로 나가면 영원히 사라집니다.
  • 스테이지마다 정해진 양의 막대기가 있어야 합니다. 특정 시점에는 막대기가 없어져야 합니다.
막대기를 프로그램하는 방법은 많습니다. 그러나, 꽤 복잡해 보이므로 지금은 비버를 모델링 한 것처럼 객체를 이용해 막대기를 모델링 해 봅시다.
var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};
다음은 게임을 시작하기 전에 (비버의 위치를 초기화한 뒤) 상수만큼의 x 위치 차이와 무작위 y 위치를 갖는 막대기 40개의 배열을 생성합니다.
var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}
이제 막대기를 그릴 수 있습니다. 줄지어 생기는 부분을 빼면 잔디를 그렸던 방법과 비슷합니다.
for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}
막대기 그림이 첨가된 코드의 결과물입니다. 뛰어서 막대기를 잡아보세요! 무슨 일이 생기나요? 아무것도 안 일어납니다! 금방 다음 단원에서 고쳐볼 거에요...