JS/jQuery/Canvas - 배열 타일 맵, 행과 열의 배열 값을 찾습니다.

Question

작은 www 게임의 등각 투영 타일 맵을 만들고,지도 데이터, 열 및 행 번호를 저장할 배열을 만들었습니다. 타일의 높이와 너비. 그런 다음이 배열의 끝에있는 웹에서 getTile 함수를 발견했습니다. 나에게 나중에 타일의 가치를 부여해야합니다. 그것은 다음과 같습니다 루프가 실행될 때 내가 타일 변수로 console_log 또는 경고를 실행할 때, 지금

for (var c = 0; c < map.cols; c++) { 
    for (var r = 0; r < map.rows; r++) { 

    var tile = map.getTile(c, r); 

     var screenX = (c - r) * map.twidth/2; 
     var screenY = (c + r) * map.theight/2; 
     var screenX = screenX+1000; 

     if(tile == 1) { 
      var element = "area_grass_01"; 
     } 

     if(tile == 2) { 
      var element = "area_road_01"; 
     } 

     var img = document.getElementById(element); 


     ctxObj.drawImage(img, (tile - 1) * map.twidth, 0, map.twidth, map.theight, screenX, screenY, map.twidth, map.theight); 
    } 
} 

:

var map = { 
    cols: 13, 
    rows: 11, 
    twidth: 200, 
    theight: 100, 
    tiles: [ 
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 
    1, 1, 1, 2, 2, 2, 1, 1, 1, 2, 1, 1, 1, 
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 
    1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 2, 2, 1, 
    1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 
    2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 2, 1, 
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 
    ], 
    getTile: function(col, row) { 
    return this.tiles[row * map.cols + col] 
    } 
}; 

가 그럼 난 캔버스에 그림을 그리하는 코드가 있습니다. map.tiles에 포함 된 모든 숫자를 하나씩 보여줍니다. 나는 이런 식으로 그려되어야하는 이미지를 찾으려고하지만 때

if(tile == 1) { 
     var element = "area_grass_01"; 
    } 

    if(tile == 2) { 
     var element = "area_road_01"; 
    } 
    var img = document.getElementById(element); 

을 그것은 단지 나머지는 미연 유지 값 1. 제목을 그립니다.

Map render

지금 나는 실제로 내가 map.tiles 안에 넣어 한 배열 수에 따라 이미지를 설정하는 방법을 물어보고 싶은 :이처럼?

또 다른 질문은이 사실을 잘 알고있는 사람에게 있습니다. 타일 ​​너비가 200이고 높이가 100 인 경우, 훨씬 더 높은 건물을 어떻게 말합니까? 나는 그 그림의 높이를 찾고 그것을 그림 크기 - 타일 높이 (100)로 높이거나 더 높은 요소를 그리는 방법에 대한 다른 조언이 있습니까?

var screenX = (c - r) * map.twidth/2; 
    var screenY = (c + r) * map.theight/2; 

그러나 screenY에 map.theight의 조정과 : 그리고 난 아직이에 대해 동일한 도면 기술을 사용합니까?

Answer 1

두 번째 및 세 번째 매개 변수가 원본 X 및 Y 값인 drawImage 오버로드를 사용 중입니다. 당신은 당신처럼 보이지 않는 스프라이트 시트를 사용하고 있다면 이것을 사용할 필요가있다. 해당 함수 호출의 두 번째 매개 변수를 0으로 바꾸십시오.

자세한 내용은 sx, sy, swidth 및 sheight 매개 변수 here을보십시오.