JAVASCRIPT#67 - CSS relative vs absolute 그리고 parseInt

My ember, my spark, my fire...

JAVASCRIPT#67 - 스프라이트 움직이기 relative vs absolute

1. 스프라이트 추가함수

gf.addSprite = function(parentId, divId, options)
{
    var options = $.extend(
    {
        x: 0,
        y: 0,
        width: 64,
        height: 64,
        url: 'url("Images/JohnDoe.png")'
    }, options);

    $("#" + parentId).append("<div id='"+divId+"' style='background-image: "+options.url+"; position:absoulte; left:"+options.x+"px; top:"+options.y+"px; width:"+options.width+"px; height: "+options.height+"px'></div>");
}

Point1. url은 형식 작은따옴표 이후 큰따옴표! 'url("주소")'

Point2. extend로 기본 옵션과 외부 사용자정의 옵션을 합치고있음, 전에 봤던거랑 차이점이라면 객체 자신의것으로

복사하지않고 내부 객체인 options로만 통합하고 있다는 점. (아래는 전에 봤던것)

gf.animation = function(options){
    var defaultValues =
    {
        url : false,
        width : 64,
        height : 64,
        startFrame : 0,
        endFrame : 0,
        numberOfFrame : 1,
        currentFrame : 0,
        rate : 30
    };

    $.extend(this, defaultValues, options); // this = defaultValues + options 이런식으로 합쳐서 만들어냄.
}

2. CSS relative vs absolute에 대하여

position:absolute; left:50px; top:50px;

- 절대위치, 우리가 알고있는 상식적 위치를 지정하게 됨. 단점은 겹칠 수 있다는거.

position:relative; left:50px; top:50px;

- 다른 이웃 요소를 고려해서 위치 정함. 액션버튼이 끝난이후 50px 50px씩 잡아서 위치를 잡음. 애초에 relative옵션은 위치지정이나 설정없이도 여러 요소들이 겹치지않고 차곡차곡 배치되게할때 사용하면 좋을듯. 

3. parseInt

gf.x = function(divId, position)
{
    if(position)
    {
        $("#"+divId).css("left", position);
    }
    else
    {
        return parseInt($("#"+divId).css("left"));
    }
}

gf.y = function(divId, position)
{
    if(position)
    {
        $("#"+divId).css("top", position);
    }
    else
    {
        return parseInt($("#"+divId).css("top"));
    }
}

Point1. parseInt 메소드는 정수값으로 바꾸는 함수로 소숫점에 뭐가있던 다 날려버리고 정수로 만들어버린다.

parseInt(1.89329423) -> 결과 : 1

Point2. 해당 함수들은 하달된 위치값이 있으면 해당위치로 바꾸고 아니면 위치값을 정수형으로 반환하는 함수.

4. 프리로드

gf.imagesToPreload = [];
gf.addImage = function(url)
{
    if($.inArray(url, gf.imagesToPreload) < 0)
    {
        gf.imagesToPreload.push();
    }
}

gf.startPreloading = function(endCallback, progressCallback)
{
    var images = [];
    var total = gf.imagesToPreload.length;
    for (var i = 0; i < total; i++)
    {
        var image = new Images();
        image.src = gf.imagesToPreload[i];
        images.push(image);
    }

    var preloadingPoller = setInterval(function()
        {
            var counter = 0;
            var total = gf.imagesToPreload.length;
            for(var i = 0; i < total; i++)
            {
                if(images[i].complete)
                {
                    counter++;
                }
            }
            if(counter == total)
            {
                clearInterval(preloadingPoller);
                endCallback();
            }
            else
            {
                if(progressCallback)
                {
                    progressCallback(parseInt(counter / total * 100));
                }
            }

        }, 100);
}

function imageloadprogress(howmuch)
{
    console.log(howmuch + "%");
}

function imageloadend()
{
    console.log("Image Loading is completed!");
}

Point1. 주소를 배열에 모으고 모아진 배열로 이미지 객체를 각각 생성, 로딩이 완료됬는지 얼마나 됬는지 알려줄수있는 함수.

Point2. 함수를 파라미터로 즉, 콜백함수로 전달하고 있음.