移动大画布上的玩家javascript游戏

我写了这段代码。这是一个简单的游戏引擎。 仍然缺少一些东西（碰撞、声音、文本描述），但这只是开始：-） 玩家可以使用箭头控制。 但我有两个问题。也许有人会告诉我怎么做

移动玩家 现在，当玩家移动时，屏幕以不同的速度移动。 其效果是，在短时间后，玩家被屏幕边缘遮挡

我怀疑问题就在这里： 翻译（player.x，player.y）； 但我不知道我在这段代码中写错了什么

摄像机视图 默认情况下，画布将非常大，最多为10000 x 10000点。数百条路径和房间（绿色和沙矩形）将绘制在画布上。 我想现在整个画布都被渲染了，即使是屏幕外的部分。 这可能是对计算机资源的极大浪费。 但是我不知道怎么做

当然，如果这里还有什么需要改进的地方，我将非常感激地接受任何建议

window.addEventListener（'load'，函数（事件）{
initCanvas（）；
});
让ctx；
设cW=3000；//画布宽度
设cH=3000；//帆布高度
让playerImgTop；
让玩家在游戏中沉沦；
让玩家离开；
让玩乐者放光；
让玩家速度=20；
让playerDir=0；
函数initCanvas（）{
ctx=document.getElementById（'mycanvas'）.getContext（'2d'）；
ctx.canvas.width=cW；
ctx.canvas.height=cH；
让animateInterval=setInterval（渲染，1000/30）；
playerImgTop=新图像（）；
playerImgTop.src=”http://www.itbvega.pl/io/img/player-top.png";
playerImgBottom=新图像（）；
playerImgBottom.src=”http://www.itbvega.pl/io/img/player-bottom.png";
playerImgLeft=新图像（）；
playerImgLeft.src=”http://www.itbvega.pl/io/img/player-left.png";
playerImgRight=新图像（）；
playerImgRight.src=”http://www.itbvega.pl/io/img/player-right.png";
让游戏位置=[
{“id”：“room0”，“x”：180，“y”：180，“rw”：60，“rh”：60，“type”：“room”}，
{“id”：“room1”，“x”：160，“y”：380，“rw”：100，“rh”：100，“type”：“room”}，
{“id”：“path0”，“x”：200，“y”：240，“rw”：20，“rh”：140，“type”：“path”}
];
函数renderGameLocations（）{
for（设i=0；i
你的问题涉及面太广，无法给出详细的答案。我把它分为两个主题，游戏场和视图，以及四叉树，它们将简要地涵盖你的两个问题

我添加了一个在最基本的级别实现这两个主题的示例。使用该示例探索更精细的细节。如果您有问题，请在评论中提出，或作为新的SO问题

运动场与风景
操场就是整个地图。（参见示例
playfield
）
它不包含像素，只包含要显示和交互的项目。（参见示例
playfield.quadMap
playfield.visibleItems
和
mapItems
）

视图是画布

它不大于显示器，仅包含像素

该视图独立于运动场，可以定位、旋转和缩放。该示例仅定位视图

视图是相对于运动场中感兴趣的内容设置的。比如球员。（参见示例
playfield.setView
）

您可以设置视图（
top
left
），方法是将玩家的位置减去视图宽度和高度的一半

要确保视图不超出运动场，请检查左上角不小于0，左上角加上视图宽度和高度不大于运动场宽度和高度。（参见示例
playfield.setView
）

要使用视图，请设置画布变换，使原点为
-top
和
-left
，然后在正常位置绘制项目

四叉树
当你有一个有很多物品的大操场时，要让设备画出所有物品可能需要很多工作。即使是视图中的项目也会占用一点CPU时间，这会增加游戏的速度

要提高性能，只需绘制（和更新）可见的项。但是，查找可见项的过程可能会增加与调用draw函数一样多的负载。您需要使用一种可以快速找到可见项目的方法，而无需测试操场上的每个项目

在2D中，这可以使用一种称为四叉树的特殊类型的链表来完成


四叉树是由正方形组成的