的代碼的基礎是由約翰·E. Graham的博客http://johnegraham2.com/blog/2010/09/25/project-javascript-2d-tile-engine-with-html5-canvas-part-4-using-zones-for-further-optimization/製作的Javascript TileEngine滾動的帆布
它完美地繪製磚的屏幕的價值，但我不能爲我的生活弄清楚如何調整它是按上，下，左或右鍵一次一行/一列。
下面是一個透明度的例子，用於幫助顯示區域http://simplehotkey.com/Javascript/canvas.html（加載位置爲1,188個瓷磚，但僅畫幾百個填充屏幕）我使用它加載了一個包含70,000個條目的數組，它仍然很快，因爲它只繪製什麼在屏幕上，但無法弄清楚如何滑動一切基於輸入...
我想出了一對夫婦的想法，我不知道什麼是最好的方式。瓦片
相當於一個畫面如下所示：
tilesArray = [
0,0,0,0,0,0,0,1,2,9,6,0,0,7,0,0,1,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,9,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,9,0,
0,9,9,9,9,9,9,0,7,2,0,0,0,0,0,1,2,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
0,9,0,7,2,9,9,9,9,9,9,9,9,9,9,9,9,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
];
其中0是一個壁磚（約周長），9一地板磚，7的門和幾個其他的隨機瓷磚。
這正是加載到屏幕上的內容，但我無法弄清楚如何根據輸入向上，向下，向左，向右移動任何方向上的所有內容。
我傾向於現在的一個想法，就是使用上面的數組作爲渲染的基礎，並以某種方式基於鍵盤輸入從另一個數組中提取新值。也許從另一個更大的數組切片（保存整個關卡的所有切片）並使用該切片填充實際呈現的數組？
這是每幀雖然更換每瓦...
用於獲取玩家輸入我用的是：
//Key listener
document.onkeydown = function(e){
e = e?e:window.event;
console.log(e.keyCode + "Down");
switch (e.keyCode){
case 38:
//UP KEY
Game.inputReaction('up');
//Game.moveDir('up');
break;
case 40:
//DOWN KEY
//Game.inputReaction(40);
//Game.moveDir('down');
break;
case 37:
//Left Key
//Game.inputReaction(37);
break;
}
}
另一種方法是嘗試已經調整屏幕上的瓦片，並添加新瓷磚，但這個引擎不使用全局變量，所以我不知道如何基於輸入以編程方式影響瓷磚引擎....就像我可以添加另一種方法（inputReaction（num）），並從我的鍵盤輸入中觸發一些操作（console.log（）），但我無法訪問實際繪製切片的其他方法。或者，也許我必須製作該對象的副本，更改並返回它？但它非常複雜。
我認爲可能更容易調整被引入「引擎」（上面的數組）的數組值，而不是改變引擎如何計算正在繪製的內容。你能證實這一點嗎？