HTML5 게임 만들기 : 동고는 똥을 싫어해 #4

HTML5 게임 만들기 : 동고는 똥을 싫어해 #4

 

 

'동고는 똥을 싫어해 만들기' 네번째 시간입니다.

이번 편에서는 똥 발사와 충돌을 해보겠습니다. Go Go.

 

똥을 추가하겠습니다.아래 이미지를 다운받아주세요. (우클릭 후 다른이름으로 저장)

 

 

ddong, ddongAlive, ddongArray 변수 추가 및 

preload 함수에서 이미지를 로딩해줍니다.

ddong 변수에는 똥의 속성을 부여하고,ddongAlive 변수에 ddong의 존재여부 값을 저장할 예정입니다.그리고 ddongArray에는 발사할 똥의 정보를 담을 예정입니다.(지금와서 이런말하면 뭐하지만 자꾸 똥, 똥해서 민망하네요.....ㅋㅋㅋㅋ)

var ddong;
var ddongAlive;
var ddongArray = [];
 
function preload() {
    // .. 생략 ..
    game.load.image("ddong", "../images/ddong_01_30x30.png");
}

여기까지는 당연히 아무일도 안일어납니다.ㅋ이제 똥을 생성해봅시다.
create 함수와 update 함수에 아래 소스를 추가해줍니다.create 함수에는 플레이어 애니메이션 추가하는 부분과 키보드 이벤트 사이에 아래 소스를 넣어줍니다.

function create() {
    // ... 생략 ...
    player.animations.add("right", [4, 5, 6], 10, true);   
 
    ddong = game.add.group();
    ddong.enableBody = true;
    ddong.physicsBodyType = Phaser.Physics.ARCADE;
    ddong.createMultiple(30, "ddong");
    ddong.setAll("outOfBoundsKill", true);
    ddong.setAll("checkWorldBounds", true);
 
    keyMove = game.input.keyboard.createCursorKeys();
}
 

 

ddong.setAll("outOfBoundsKill", true);ddong.setAll("checkWorldBounds", true);

 

이 부분은 ddong 변수가 게임 레이어 밖으로 벗어나면 해당 객체를 없애(?)주는 역할을 합니다.

 

그리고 update 함수에는 맨 마지막에 아래 소스를 추가해줍니다.

function update() {
    // ... 생략 ...
 
    ddongAlive = ddong.getFirstExists(false);
    ddongArray.length=0;
    // box 개수만큼 똥을 세팅한다.
    box.forEachAlive(function(ddongAlive){
        ddongArray.push(ddongAlive);
    });
    // box 중 랜덤으로 하나를 골라서 똥을 생성한다.
    if ( ddongAlive && ddongArray.length > 0) {
        var random = game.rnd.integerInRange(0, ddongArray.length-1);
        var ddongBox = ddongArray[random];
        ddongAlive.reset(ddongBox.body.x, ddongBox.body.y);
        game.physics.arcade.moveToObject(ddongAlive, player, 150);
    }
}

똥 생성이 끝났습니다!이제 소스를 실행해봅시다. 아래와 같이 똥이 무작위로 생성되는것을 볼 수 있습니다.

 

이제 똥에 충돌 이벤트를 넣겠습니다.똥이 하늘과 충돌하면 없어지고,플레이어와 충돌하면 게임이 종료되게 하겠습니다.

 

먼저 똥과 하늘이 충돌하는 처리를 하겠습니다.sky 변수를 추가해주고, 이전에 하늘을 생성했던 부분을 주석처리하고 아래와 같이 변경합니다.box와 동일하게 충돌속성을 부여하기 위함입니다.

var sky;
 
function create() {
    // ... 생략 ...
    game.create.texture('sky', ['E'], 800, 80, 0);  // 'E' 코드색상 800x80 크기의 블럭을 'sky' 이름으로 생성
    // game.add.sprite(0, 0, 'sky');                   // sky를 x좌표 0, y좌표 0 위치에 추가
    sky = game.add.group();
    sky.enableBody = true;
    sky.create(0, 0, "sky");
 
    // ... 생략 ...
}

이제 대망의 충돌 처리.엄청나게 쉽습니다. phaser 플러그인에서 쉽게 만들어줬거든요ㅋㅋddongHitsSky 함수를 추가해주고,update 함수에서 플레이어와 상자 충돌처리 했던 부분 아래에 비슷한 소스 한줄 추가해줍니다. 해당 소스를 보면 sky와 ddong 변수와 ddongHitsSky 함수를 인자로 넘겨줍니다.딱봐도 감이 오죠?'sky와 ddong이 overlap 될 경우, ddongHitsSky함수를 수행해라.' 입니다. 참 쉽죠잉

 

function update() {
    // 프레임워크에서 주기적으로 수행하는 함수
    game.physics.arcade.collide(player, box);   // player와 box가 충돌할수 있도록 설정
    game.physics.arcade.overlap(sky, ddong, ddongHitsSky, null, this);
    
    // ... 생략 ...
}
 
function ddongHitsSky(sky, ddongs) {
    ddongs.kill();
}

이제 소스를 실행해보면, 똥이 상자밖으로 나가면 사라짐과 동시에 new 똥이 생기는 걸 확인해볼수 있습니다~.
이제 이번시간의 마지막 단계인 똥과 플레이어의 충돌이 남았네요.

고고.

좀전에 한 똥과 하늘이 충돌했던 overlap처럼 동일하게 처리해주면 됩니다.여기서 추가해야할 점은 플레이어를 더 이상 움직일 수 없게하고, 똥이 더이상 발사되지 않게해야합니다.

 

우선 똥과 플레이어 충돌부분을 해봅시다.위에 ddongHitsSky 함수와 동일하게 ddongHitsPlayer라는 함수를 하나 더 만들어주고,update 함수에 overlap 이벤트를 추가해줍니다.아래처럼이요.

function update() {
    // ... 생략 ...
    game.physics.arcade.overlap(sky, ddong, ddongHitsSky, null, this);
    game.physics.arcade.overlap(player, ddong, ddongHitsPlayer, null, this);
 
    player.body.velocity.setTo(0, 0); // 관성을 0으로 설정
    // ... 생략 ...
}
 
function ddongHitsPlayer(playerPoint, ddongs) {
    ddongs.kill();    
}

반정도했습니다. 

이제 소스를 실행해보시면 똥이 플레이어와 충돌하면 사라지는것을 볼수 있습니다.

이제 충돌하면 플레이어를 움직이지 못하게합시다.다들 어떻게 해야되는지 아시겠지만, 굳이 설명을 드리겠습니다.

전 설명충이니까요.

방법은

1) 플레이어 생명 변수 설정

2) 플레이어 생명이 1 미만일때, 키보드 이벤트 및 똥 생성 이벤트가 발생하지 않도록 if문 처리

3) 똥과 플레이어 충돌시, 생명 -1 처리 (또는 0으로 변경)

이렇게 하면 되겠죠? 설명충의 당연한 설명이였습니다.

소스를 짜봅시다. 총 5줄만 추가하면 되네요. 아래처럼이요.

 

var playerLife = 1;
 
function update() {
    // ... 생략 ...
    player.body.velocity.setTo(0, 0); // 관성을 0으로 설정
 
    if (playerLife < 1) {
        return;
    }
 
    if (keyMove.left.isDown && keyMove.up.isDown) {
    // ... 생략 ... 
}
 
function ddongHitsPlayer(playerPoint, ddongs) {
    ddongs.kill();
    playerLife--;    
}

 

이제 소스를 실행해봅시다.플레이어가 똥과 출동하면 플레이어를 더이상 움직일수 없고, 똥고 더이상 생성되지 않습니다~~.여기서 끝이 아닙니다. 

GAME OVER라는 메세지가 없어서 허전하죠?

 

다음 강좌에서는 GAME OVER 메세지 출력 및 점수처리를 하도록 하겠습니다.

다음 강좌가 마지막 입니다.

 

커밍순