javascript 2d array tile map srcoling

Question

我已經搜索了幾個星期，但找不到正確的教程。
假設我們有一個 800x800 的畫布。

<canvas id='draw' width=800 height=800></canvas>

我們有一個瓦片地圖（0 將是方形障礙，1 將是空氣）。

var tileMap = [ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] 
]

如何讓地圖滾動，以便在玩家移動時只能看到 3x3 的方塊？ 例如：

canvas screen-->           [0,0,0]
                           [0,1,1]      <-- just this part to be seen
                           [0,0,0]         

當玩家移動時：

canvas screen-->           [0,0,0]
                           [1,1,1]     <-- now this part will be seen
                           [0,0,0]

那么如何讓瓦片地圖移動以產生玩家正在移動的錯覺呢？

Answer 1

tileMap不應該被修改，而是創建一些代表當前視圖中心的對象，例如播放器，並在您的顯示功能中使用它。 每當您想滾動時，只需移動視圖中心即可。

 var tileMap = [ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] ] var hero = { position: { x: 0, y: 1 } }; const air = 1; const barrier = 0; display(hero,tileMap); // move player instead of scrolling data // tileMap is untouched hero.position.x += 3; display(hero,tileMap); // use player position to display only portion of map function display(player,map) { var result = [ "", "", "" ]; for(var y = 0, i = player.position.y - 1; y < 3; i++,y++) { if (i >= 0 && i < map.length) { for(var x = 0, j = player.position.x - 1; x < 3; j++,x++) { if ( j >= 0 && j < map[i].length) { result[y] += map[i][j] + ","; } else { // outside map only ait result[y] += air+ ","; } } } else { // outside map only ait result[y] += air +","+ air +","+air+","; } } console.log(result); }

Answer 2

你沒有解釋你的數組如何與你的畫布和動畫相關 - 因此一個明確的猜測是你只關心你的數組。

您需要一個由相機cam位置和大小值指定的視口數組viewMap 。
在下面的示例中，它的錨點位於左/上（您可能希望稍后更改邏輯以使用 center/center，由您決定）。

• 在鍵盤事件上，更改相機xy位置並防止超出地圖邊界
• 填充您的viewMap數組並打印它：

 var tileMap = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], [0, 1, 4, 1, 1, 3, 3, 1, 1, 1, 1, 1, 1, 8, 8, 1, 0], [0, 6, 1, 1, 1, 3, 3, 1, 1, 1, 1, 1, 1, 9, 9, 1, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]; var cam = { x: 0, y: 0, width: 3, height: 3 }; // Create empty 2D viewMap of viewport var viewMap = []; for (var i = 0; i < cam.height; i++) viewMap[i] = new Array(cam.width); function tileViewport() { for (var y = 0; y < cam.height; y++) for (var x = 0; x < cam.width; x++) viewMap[y][x] = tileMap[y + cam.y][x + cam.x]; // PRINT console.clear(); console.log(viewMap.map(a => a.join(" ")).join("\\n")) } document.body.addEventListener("keydown", function(e) { var key = e.which; if( /^(37|38|39|40)$/.test(key) ) e.preventDefault(); // prevent browser default stuff if (key === 38) --cam.y; if (key === 40) ++cam.y; if (key === 37) --cam.x; if (key === 39) ++cam.x; // Fix movement to tileMap area boundary cam.y = Math.max(0, Math.min(cam.y, tileMap.length - cam.height)); cam.x = Math.max(0, Math.min(cam.x, tileMap[0].length - cam.width)); tileViewport(); }); // INITIALIZE tileViewport();

 Click here and user your keyboard arrows!

現在以上工作正常，您可以：

• 使用新的viewMap Array 添加障礙行為的邏輯
• 為您的畫布預取新圖塊，
• 根據運動為畫布設置動畫