JAVASCRIPT#69 - 메인루프 물체 움직이기 충돌 구현

I used to be love drunk now i'm in hang over i need your love for breakfast

♥ Marry me applejack

JAVASCRIPT#69 - 메인루프와 물체 움직이기 충돌 구현

1. 메인 루프

- 게임 실행후 지속적으로 반복되는 함수 부분

- 지속적으로 물체(나뭇조각)을 움직이게한다.

- 해당라인의 물살 속도에 맞춰 플레도 함께 움직이게 한다.

var gameloop = function()
{
    packets1.position = packets1.position + packets1.speed;
    packets2.position = packets2.position + packets2.speed;
    packets3.position = packets3.position + packets3.speed;
    packets4.position = packets4.position + packets4.speed;
    $("#packets1").css("background-position", ""+packets1.position + "px 0px");
    $("#packets2").css("background-position", ""+packets2.position + "px 0px");
    $("#packets3").css("background-position", ""+packets3.position + "px 0px");
    $("#packets4").css("background-position", ""+packets4.position + "px 0px");

    var newPos = gf.x("player");

    switch(gameState){
        case "LINE1" :
            newPos = newPos + packets1.speed;
            break;
        case "LINE2" :
            newPos = newPos + packets2.speed;
            break;
        case "LINE3" :
            newPos = newPos + packets3.speed;
            break;
        case "LINE4" :
            newPos = newPos + packets4.speed;
            break;       
    }

    gf.x("player", newPos);
}

2. 키 바인딩 캐릭터 움직이기 + 라인 게임상태 설정하기

$(document).keydown(function(e)
{
    if(toggler == 1)
    {
        switch(e.keyCode)
        {
            case 65:
                gf.x("player", gf.x("player") - 5);
                break;
           
            case 68:
                gf.x("player", gf.x("player") + 5);
                break;

            case 87:
                switch(gameState)
                {
                    case "START" :
                        toggler = 0;
                        $("#player").animate({top:370}, function(){gameState = "LINE1"; toggler = 1; detectSafe(gameState);});
                        break;
                    case "LINE1" :
                        toggler = 0;
                        $("#player").animate({top:330}, function(){gameState = "LINE2"; toggler = 1; detectSafe(gameState);});
                        break;
                    case "LINE2" :
                        toggler = 0;   
                        $("#player").animate({top:290}, function(){gameState = "LINE3"; toggler = 1; detectSafe(gameState);});
                        break;
                    case "LINE3" :
                        toggler = 0;
                        $("#player").animate({top:250}, function(){gameState = "LINE4"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE4" :
                        toggler = 0;
                        $("#player").animate({top:195}, function(){gameState = "LINE5"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE5" :
                        toggler = 0;
                        $("#player").animate({top:155}, function(){gameState = "LINE6"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE6" :
                        toggler = 0;
                        $("#player").animate({top:115}, function(){gameState = "LINE7"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE7" :
                        toggler = 0;
                        $("#player").animate({top:75}, function(){gameState = "LINE8"; toggler = 1; detectSafe(gameState);});   
                        break;               
                    case "LINE8" :
                        toggler = 0;
                        $("#player").animate({top:35}, function(){gameState = "LINE9"; toggler = 1; detectSafe(gameState);});   
                        break;
                    case "LINE9" :
                        toggler = 0;
                        $("#player").animate({top:0}, function(){gameState = "WON"; toggler = 1; detectSafe(gameState);});   
                        break;               
                }       
            break;

            case 83:
                switch(gameState)
                {
                    case "LINE1" :
                        toggler = 0;
                        $("#player").animate({top:430}, function(){gameState = "START"; toggler = 1; detectSafe(gameState);});
                        break;
                    case "LINE2" :
                        toggler = 0;
                        $("#player").animate({top:370}, function(){gameState = "LINE1"; toggler = 1; detectSafe(gameState);});
                        break;
                    case "LINE3" :
                        toggler = 0;
                        $("#player").animate({top:330}, function(){gameState = "LINE2"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE4" :
                        toggler = 0;
                        $("#player").animate({top:290}, function(){gameState = "LINE3"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE5" :
                        toggler = 0;
                        $("#player").animate({top:250}, function(){gameState = "LINE4"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE6" :
                        toggler = 0;
                        $("#player").animate({top:195}, function(){gameState = "LINE5"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "LINE7" :
                        toggler = 0;
                        $("#player").animate({top:155}, function(){gameState = "LINE6"; toggler = 1; detectSafe(gameState);});   
                        break;               
                    case "LINE8" :
                        toggler = 0;
                        $("#player").animate({top:115}, function(){gameState = "LINE7"; toggler = 1; detectSafe(gameState);});   
                        break;
                    case "LINE9" :
                        toggler = 0;
                        $("#player").animate({top:75}, function(){gameState = "LINE8"; toggler = 1; detectSafe(gameState);});   
                        break;   
                    case "WON" :
                        toggler = 0;
                        $("#player").animate({top:35}, function(){gameState = "LINE9"; toggler = 1; detectSafe(gameState);});   
                        break;               
                }   
                break;
        }
    }
});

Point1. 키바인딩 하는 방법

- document를 셀렉터로 잡고 keydown 메소드에 switch(e.keyCode)문을 이용한다.

$(document).keydown(function(e){switch(e.keyCode) case 53: @@@@@ });

Point2. toggler?

- 애니메이션이 끝나기도 전에 다른 애니메이션이 재생되서 도착지점까지 가기전에 다른 명령을 받는 현상을 막기위해서 toggler를 설정, animate 메소드에 의해 애니메이션이 끝나면 콜백으로 불러서 원상태로 돌려놓게 만듬.

3. 충돌 구현

var detectSafe = function(state)
{
    switch(state)
    {
        case "LINE1":
            var relativePosition = (gf.x("player") - packets1.position) % 200;

            if(relativePosition < 0)
            {
                relativePosition = relativePosition + 200;
            }

            console.log(gf.x("player") + " - " + packets1.position + " = " + relativePosition);
       
            if(relativePosition > 90 && relativePosition < 185)
            {
                alert("You've safely made it");
                return true;
            }
            else
            {
                alert("You've failed to jump");
                return false;
            }
            break;
        case "LINE2":
            var relativePosition = (gf.x("player") - packets2.position) % 200;

            if(relativePosition < 0)
            {
                relativePosition = relativePosition + 200;
            }

            console.log(gf.x("player") + " - " + packets2.position + " = " + relativePosition);
       
            if(relativePosition > 90 && relativePosition < 185)
            {
                alert("You've safely made it");
                return true;
            }
            else
            {
                alert("You've failed to jump");
                return false;
            }
            break;
        case "LINE3":
            var relativePosition = (gf.x("player") - packets3.position) % 200;

            if(relativePosition < 0)
            {
                relativePosition = relativePosition + 200;
            }

            console.log(gf.x("player") + " - " + packets3.position + " = " + relativePosition);
       
            if(relativePosition > 90 && relativePosition < 185)
            {
                alert("You've safely made it");
                return true;
            }
            else
            {
                alert("You've failed to jump");
                return false;
            }
            break;
            case "LINE4":
            var relativePosition = (gf.x("player") - packets4.position) % 200;

            if(relativePosition < 0)
            {
                relativePosition = relativePosition + 200;
            }

            console.log(gf.x("player") + " - " + packets4.position + " = " + relativePosition);
       
            if(relativePosition > 90 && relativePosition < 185)
            {
                alert("You've safely made it");
                return true;
            }
            else
            {
                alert("You've failed to jump");
                return false;
            }
            break;                   
    }
}

Point1. % 연산에 대한 고찰

- 얘를 들어 어떤 수의 집합이 있다고 하자 집합에는 0부터 3억까지 들어있다.

만약 이 집합을 % 2 를 해주면 결과값은 오직 두가지 0 또는 1 만 나오게 된다.

다른 예를 들어서,

[ 이 세상에서 가장 큰 수 :: 999,999,999..... ] % 200 의 값은?

정확한 값은 모르지만 결과값은 반드시 0~199 이내의 어떤 수 라고 할 수 있다.

Point2. 어떻게 충돌을 구현했지?

- (플레이어 위치 - 그림위치) % 그림단위를 해서 차잇값을 그림단위 범위(0~199)로 한정시킴. 이런식으로 한정시키면 반환값은 곧 그림 단위내에서의 플레이어의 위치를 반환하게 됨. (만약 값이 음수가 될 경우 그림단위를 더해줘서 양수값으로 만들어줌) 

- 값이 만약 특정(나무)범위안에 속할경우 충돌이벤트 발생시킴.

다음에는 데스씬과 나머지라인에 좀비추가해야지.