的代码的基础是由约翰·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（）），但我无法访问实际绘制切片的其他方法。或者，也许我必须制作该对象的副本，更改并返回它？但它非常复杂。
我认为可能更容易调整被引入“引擎”（上面的数组）的数组值，而不是改变引擎如何计算正在绘制的内容。你能证实这一点吗？