JAVASCRIPT#62 - 자바스크립트 물체 움직이기, 다중 객체 제어

Watching her strolling in night, so white....wondering, why its only after dark..

JAVASCRIPT#62 - 자바스크립트 물체 움직이기, 다중 객체 제어

1. 스프라이트 추가하는 함수

gameFramework.addSprite = function(obj, where)
{
    var options = $.extend({
        parentId: "field",
        x: 0,
        y: 0
    }, where); // 생성 기본 옵션

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

    alert("added!");
}

- 씬에 물체를 추가할때 append 메소드를 이용한다.

- style 쪽에서 "+내용+" 형태로 값을 전달하고 있는것이 보인다. background-image 같은경우 전달값이 url("주소")형태의 스트링이여 하며 이때 이중 따옴표형식이 틀리면 절대 안되는데, 항상 작은것'' 안에 큰것""이 들어가야 한다.

예를 들면 이런식으로 var AJ = new Unit("AJ", 640, 640, 'url("AJ.png")');

.extend 메소드가 다시나왔는데 얘는 합치는 메소드로 기본값 + 사용자정의 값을 종합해준다.

2. 스프라이트 위치 설정및 반환용 함수

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

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

별로 볼건없고 좌우로 움직이거나 전달받은 divId에 해당하는 객체의 x위치나 y위치를 반환하는 함수이다.

3. 다중유닛 소환및 각자 따로 관리하기

var i = 0;
var unit_group = new Array();

function Unit(divId, frameWidth, frameHeight, url)
{
    this.divId = divId + "_" + i; // div아이디는 고유하게 가지게 만듬.
    this.frameWidth = frameWidth;
    this.frameHeight = frameHeight;
    this.url = url;

    this.animqueue = new Array();
    i = i + 1;

    unit_group.push(this); // 만들고 유닛그룹에 넣어서 관리하기. 모두 AJ라는 이름이지만 unit_group[0~] 식으로 따로 불러낼수있음.
}

for(var v=0; v < 20; v++) // 내사랑 애플잭 20명 소환하기
{
    var AJ = new Unit("AJ", 640, 640, 'url("AJ.png")');
}

alert(unit_group[0].divId);
alert(unit_group[12].divId);

$("#walk_button").on("click", function(){

    for(var k = 0; k<unit_group.length; k++)
    {
        gameFramework.playanimation(unit_group[k], walk, true);
    }
});
$("#stand_button").on("click", function(){
   
    for(var k = 0; k<unit_group.length; k++)
    {
        gameFramework.playanimation(unit_group[k], stand, false);
    }
});

var newposition = {
    x:1000
};

for(var k = 0; k<unit_group.length; k++)
    {
        gameFramework.addSprite(unit_group[k], newposition);
        newposition.x = newposition.x - 100;
    }

배열을 이용해서 애플잭 다중소환 이후 애플잭 한꺼번에 제어하는 코드.

같은 이름의 객체 20개이지만 각자 다른 DIV ID를 가짐으로 다중으로 동시 제어가 가능하게 만듬.

이런식으로 스타크레프트처럼 유닛그룹생성, 다중선택 제어도 가능할듯.

mygame 페이즈2.zip