JAVASCRIPT#72 - 자바스크립트 2차원 배열을 통해서 타일셋 만들기.

This Ain't no place for the hero..

JAVASCRIPT#72 - 자바스크립트 2차원 배열을 통해서 타일셋 만들기

이제 프로그에서 넘어가서 횡스크롤 게임 만드는것 같은데... 일단 타일셋 소환하는

함수 내입맛대로 만들어봄.

// tile //

function tileMap(url, width, height, tilewidth, tileheight, map)
{
    this.url = url;

    this.parentId = "mygame";

    // Total tilemap size
    this.width = width;
    this.height = height;

    // Starting point of first tile
    this.x = 0;
    this.y = 0;

    // A tile unit width and height
    this.tilewidth = tilewidth;
    this.tileheight = tileheight;

    this.map = map;
}

/// DEMO1 : mytilemap = new tilemap('url("Images/tiles.png")', 640, 480, 70, 70, mapob);
/// DEMO2 : Map object demo
/*
var mapob =     [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 [0, 0, 0, 2, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7],
                 [5, 5, 5, 5, 5, 6, 6, 5, 5, 5, 5, 6, 6, 6, 5, 5, 5, 6, 6, 5, 5, 5, 5, 5, 5, 5, 6, 6, 5, 5, 5, 5, 6, 6, 6, 5, 5, 5, 6, 6, 5, 5]];
*/

function addtilemap(whattileMap)
{
    for(var i = 0; i < whattileMap.height; i++)
    {
        for(var j = 0; j < whattileMap.width; j++)
        {
            var mapindex = whattileMap.map[i][j];
            if(mapindex > 0)
            {
                var tileinfo =
                {
                    // Where should i put tiles?
                    x: whattileMap.x + j*whattileMap.tilewidth,
                    y: whattileMap.y + i*whattileMap.tileheight,

                    // Each tile's divId
                    tilediv: "tile_" + i + "_" + j
                 }
                // Creating a tile
                $("#" + whattileMap.parentId).append("<div id='"+tileinfo.tilediv+"' style='position:absolute; background-image:"+whattileMap.url+"; width:"+whattileMap.tilewidth+"px; height:"+whattileMap.tileheight+"px; left:"+tileinfo.x+"px; top:"+tileinfo.y+"px;'></div>");
                // Setting tile image
                $("#" + tileinfo.tilediv).css("backgroundPosition", "" + -1 * (mapindex - 1) * whattileMap.tilewidth + "px 0px");
            }
        }
    }
}

var mapob =     [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 [0, 0, 0, 2, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0],
                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7],
                 [5, 5, 5, 5, 5, 6, 6, 5, 5, 5, 5, 6, 6, 6, 5, 5, 5, 6, 6, 5, 5, 5, 5, 5, 5, 5, 6, 6, 5, 5, 5, 5, 6, 6, 6, 5, 5, 5, 6, 6, 5, 5]];

mytilemap = new tileMap('url("Images/tiles.png")', 40, 7, 70, 70, mapob);
addtilemap(mytilemap);

전체적으로 꾀나 지저분해 보이는데 사실 별거없다. addsprite의 변형형으로 정보처리기능사 알고리즘에서 질리도록한

이중반복문과 이차배열을 이용해서 알맞는 타일을을 소환해내는 역할을 하고 있다.

대충 이런모습... 에셋은 예제에 들어있는거 가져다씀.