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

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

주요 내용

비버 캐릭터

우리의 마스코트인 호핑 비버를 만들어 봅시다. 본 수업에서 다뤘던 객체지향적 프로그래밍을 사용하여 호핑 비버를 만들 것입니다.
게임 주인공을 만들 때 주인공이 어떤 특성을 갖고 어떤 행동을 할 것인지를 생각해야 합니다. 예를 들어, 비버는 자신의 x, y 위치와 자신이 얼마나 많은 나뭇가지(sticks)를 수집했는지를 알아야 합니다. 또한 비버는 약간 위로 뛰는 hop과 아래로 내려오는 fall 두 가지 행동을 해야 합니다.
위 특성을 객체로 구현하면 다음과 같습니다.
위 프로그램은 다양한 행동을 잘 확인하지 못합니다. 애니메이션이 아니므로 오직 비버가 한 자세로 있는 모습만 볼 수 있기 때문입니다. draw 함수를 추가하면 사용자와의 인터랙션에 따라 비버에게 어떤 행동을 부여할 수 있습니다. 이 게임에서는 사용자가 스페이스 바를 누를 때 비버가 위로 뛰게 하려 합니다. 이는 다음 코드처럼 꽤 단순하게 구현할 수 있습니다:
draw = function() {
    background(255, 255, 255);
    if (keyIsPressed && key.code === 32) {
        beaver.hop();
    } else {
        beaver.fall();
    }
    beaver.draw();
};
꽤 효과적인 코드입니다. 그러나 이대로 프로그램을 실행하면 계속해서 스페이스 바를 눌렀을 때 비버가 화면에서 영원히 사라지는 사태가 생길 수 있습니다. 비버를 화면 안에 머물도록 y 값을 적당하게 제한해야 합니다. 캐릭터를 "게임 세상" 안에 머물게 하려고 흔히 이런 방식을 씁니다. draw 함수에 constrain을 사용해 적절한 최솟값과 최댓값을 주면 됩니다:
 this.y = constrain(this.y, 0, height-50);
이제 키보드를 치면 뛰어 올라갔다 내려오는 비버가 주인공인 프로그램을 만들었습니다. 한 번 가지고 놀아보세요!