JAVASCRIPT#70 - 랜덤위치와 충돌 구현2

I will burn down whole world if i have to, only thing that matters in this world is you AJ.

JAVASCRIPT#70 - 데스컨디션 + 랜덤위치와 충돌 구현2

1. 좀비의 다량생성과 각자 다른 위치와 속도 애니메이션 재생을 위해서 오브젝트를 아예 새로 만들어버림.

function Zombief(divId, dir, x, y)
{
    this.divId = divId;
    this.url = 'url("Images/zombie.png")';
    this.width = 28;
    this.height = 60;
    this.direction = dir;
    this.speed = getRandomInt(3, 12);
    this.x = x;
    this.y = y;
    this.currentFrame = 0;

    mgf.addSprite("mygame", this);
}

2. 고유값 한 이름과 고유한 아이디값을 가지는 객체 한번에 여러개 생성하면서 배열에 저장하기!

mgf.spwanzombies = function(){
    for(z=0; z<2; z++)
    {
        random_dir = getRandomInt(0, 1);
        if(random_dir == 0)
        {
            random_dir = 1;
        }
        else
        {
            random_dir = -1;
        }

        random_x = getRandomInt(4, 460);

        zombie_num = zombie_num + 1;

        zombies[zombie_num] = new Zombief("zombie_"+zombie_num, random_dir, random_x, 180);
    }

    for(z=0; z<3; z++)
    {
        random_dir = getRandomInt(0, 1);
        if(random_dir == 0)
        {
            random_dir = 1;
        }
        else
        {
            random_dir = -1;
        }

        random_x = getRandomInt(4, 460);

        zombie_num = zombie_num + 1;
       
        zombies[zombie_num] = new Zombief("zombie_"+zombie_num, random_dir, random_x, 120);
    }

    for(z=0; z<4; z++)
    {
        random_dir = getRandomInt(0, 1);
        if(random_dir == 0)
        {
            random_dir = 1;
        }
        else
        {
            random_dir = -1;
        }

        random_x = getRandomInt(4, 460);

        zombie_num = zombie_num + 1;
       
        zombies[zombie_num] = new Zombief("zombie_"+zombie_num, random_dir, random_x, 60);
    }
}

3. 충돌 구현2

- 기존 충돌 방식은 도착시 위치하고 그림위치빼서 % 연산해서 위치파악했는데 이번에는 단순히 좀비그림이랑 충돌하는거 간단히 구현해봄.

캐릭터의 위치가 좀비의 위치안에 있으면 발동.

    for(k=1; k<zombies.length; k++)
    {
        mgf.x(zombies[k], mgf.x(zombies[k]) + zombies[k].direction * zombies[k].speed);

        if(mgf.x(zombies[k]) < 15 && zombies[k].direction == -1)
        {
            zombies[k].direction = 1;
            zombies[k].speed = getRandomInt(3, 15);
            if(zombies[k].direction == 1)
            {
                console.log("flipped added!");
                $("#"+zombies[k].divId).addClass("flipped");
            }

        }
        if(mgf.x(zombies[k]) > 600 && zombies[k].direction == 1)
        {
            zombies[k].direction = -1;
            zombies[k].speed = getRandomInt(3, 15);
            if(zombies[k].direction == -1)
            {
                console.log("flipped removed!");
                $("#"+zombies[k].divId).removeClass("flipped");
            }
        }

        if(gf.x("player") >= mgf.x(zombies[k]) && gf.x("player") <= mgf.x(zombies[k]) + 16 && gf.y("player") >= mgf.y(zombies[k]) && gf.y("player") <= mgf.y(zombies[k]) + 60)
        {   
            zombiesound.play();
            zombiedeath.play();
           
            kill();
        }
    }

파랑색으로 칠한 부분이 좀비-플레이어 충돌감지 부분

4. 그림 뒤집기

- 좀비가 좌우로 움직이므로 그림을 좌우 대칭으로 뒤집기도 해야했음. 이거 안해주면 문워크 좀비 ㄷ_ㄷ

.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

css에 다음을 추가하고 뒤집을 요소에 flipped 클래스를 추가해주면 됨.

데스조건

- 물에 빠진다 -> 떠내려간다 -> 죽는다

- 땟목에 탔다 -> 하지만 한전지역까지 못갔다 -> 죽는다.

- 좀비랑 닿는다 -> 죽는다

앞으로 목표

- 땟목 속도 방향 5초마다 랜덤설정

- 이동명령 받았을시 걷는 모습 구현

- 물에 빠졌을시 캐릭터가 허우적대는 모습 추가 

- 오브젝티브 픽업 추가

- 점수판 추가 (오브젝트를 먹고 라인1로 복귀해야 점수 추가)

- 시간제한 시스템 추가.

- 점수 오를수록 난이도 무한대 상승 레벨 설계하기