HTML5画布绘制地形设置

喜欢的东西我有地形设置：HTML5画布绘制地形设置

0, 1, 2, 3, 4, 5, 
6, 7, 8, 9, 10, 11, 
12, 13, 14, 15, 16, 
17, 18, 19, 20

我的地形设置抽奖代码：

var image = new Image(); 
image.src = '32x32.png'; 
var tile = 5; 
var tileSize = 32; 
var x = 100; 
var y = 100; 
context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, y, tileSize, tileSize);

这码抽奖“5”瓦，但像如何绘制10瓦？或15瓦而不添加tileX，tileY。我需要像瓦等于15 - 画15瓦。

对不起，我英语不好。

谢谢！

来源

2012-03-10 unuooo

把这些坐标系坐标放在一个（多维）数组中，这样你可以遍历数据并显示结果。这意味着如果有10个项目，你的代码将遍历所有十个项目。如果有15，那么很好，它会遍历全部15.

当然，如果通过使用for循环并指定结束条件为“i < tile”（假设你的计数从0开始）。

让我知道如果我还没有完全理解你。下面是我为我的一个项目创建的绘制图块的函数示例。它可能会给你一些你想要做的事情的线索。

function renderMap(ctx, mapObj) 
{ 
var rgt = mapObj.data();   

for (matrixY in rgt) { 
    for (matrixX in rgt[matrixY]) { 

     var matrixArray = rgt[matrixY][matrixX].split(','); 

     var x = matrixArray[0]; 
     var y = matrixArray[1]; 

     var sx = (x-1) * mapObj.tileWidth(); 
     var sy = (y-1) * mapObj.tileHeight(); 

     var dx = (matrixX) * mapObj.tileWidth(); 
     var dy = (matrixY) * mapObj.tileHeight(); 

     ctx.drawImage(mapObj.mapTilesImg(), sx, sy, mapObj.tileWidth(), mapObj.tileHeight(), dx, dy, mapObj.tileWidth(), mapObj.tileHeight()); 
    } 
} 
}

并用于（一个轨道对象的一部分）的数据：

rgt: [ ['1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7'], 
      ['1,2', '2,1', '4,4', '2,1', '2,4', '2,1', '2,1', '2,2'], 
      ['3,4', '4,5', '1,7', '1,7', '4,13', '1,7', '1,7', '1,4'], 
      ['4,3', '1,7', '3,7', '1,7', '1,7', '1,2', '2,1', '2,6'], 
      ['1,1', '1,15', '1,7', '1,7', '2,7', '1,4', '1,7', '1,7'], 
      ['1,6', '2,1', '2,1', '2,4', '4,1', '2,6', '1,7', '1,7'] 
     ]

我用坐标。例如。 '1,7'=一个横过，7下降在我的精灵表上。

来源

2012-03-12 21:41:07 Jarrod

HTML5画布绘制地形设置

回答

相关问题