1

代码的基础来自 John E. Graham 的博客http://johnegraham2.com/blog/2010/09/25/project-javascript-2d-tile-engine-with-html5-canvas-part-4-using-进一步优化的区域/

它非常适合绘制屏幕的瓷砖，但我一生无法弄清楚如何根据向上、向下、向左或向右键一次调整 1 行/列。

这是一个透明度示例，可帮助可视化区域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 是门和其他几个随机砖。

这正是加载到屏幕上的内容，但我无法弄清楚如何根据输入向上、向下、向左、向右移动所有 1 个图块。

我现在倾向于的一个想法就是使用上面的数组作为渲染的基础，并根据键盘输入从另一个数组以某种方式将新值输入其中。也许从另一个更大的数组中切片（保存整个级别的所有图块）并使用该切片来填充实际渲染的数组？？？

那就是每帧都替换每个图块...

为了获得我正在使用的玩家输入：

//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（））触发一些操作，但我无法访问实际绘制瓷砖的其他方法。或者也许我必须复制该对象，更改它并返回它？但这很复杂。

我认为调整输入“引擎”（上面的数组）的数组值可能更容易，而不是改变引擎如何计算正在绘制的内容。你能证实这一点吗？

4

1 回答 1

0

添加可以在地图上四处移动的相机抽象，然后根据相机位置移动绘图位置。当相机向南移动 10px 时，所有瓦片向北移动 10px，东西向相同。由于您只绘制可见的图块，因此不会有太多的性能损失。

渲染器查看相机以确定需要绘制的内容，您可以将相机对象暴露在外部以对其进行操作。这样，您只需更改相机位置即可更改屏幕上显示的内容。

一年前，我在概念验证平铺引擎中做到了这一点，我能够平滑地滚动和缩放巨大的平铺地图。

如果您开始更改数组本身，您的性能将受到影响并且您将无法平滑滚动，因为您只能以一个图块而不是一个像素为单位进行操作。

于 2012-02-19T21:33:33.923 回答