js游戏中的相机，跟随玩家

Question

所以最近我一直在尝试制作一款类似 2D 塞尔达传说的游戏。我想做一个相机跟随玩家。

所以我在搜索中查看了 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations 和其他一些内容（MDN 上有一篇关于它的文章，但我无法关注，尽管它看起来不像我要找的东西）。

我也不想只让玩家居中，我想要一个有限制的相机，所以你必须离开相机一定距离才能让地图开始滚动。

function camera(data) {
    var x, y;

    if(I.x <= 2 && I.x >= -2 && I.y <= 2 && I.y >= -2) { x = 0; y = 0;}
    if(I.x >  2) { x = -I.size; y = 0; }
    if(I.x < -2) { x =  I.size; y = 0; }
    if(I.y >  2) { x = 0; y = -I.size; }
    if(I.y < -2) { x = 0; y =  I.size; }

    ctx.translate(x, y);

    draw.map();
    draw.camera();
    draw.players(data);

    ctx.resetTransform();
}

draw.map() 绘制方块。 draw.camera() 画了一个小虚线框，所以我知道相机的边界。 draw.players(data) 吸引所有玩家。 I.size 是指每个图块的大小（在本例中为 16）。 I.x & I.y 是不言自明的。

我有一个工作版本（使用节点和 socket.io）： http://dais-jaackotorus.codeanyapp.com:8080/

编辑：

差点忘了！这段代码的问题是它只跟随玩家一个方块，然后就不再跟随玩家了，它超出了摄像机范围而不是留在摄像机范围内，我不明白为什么。

Answer 1

这是一个简化的例子：

https://jsfiddle.net/2xbo0kas/

诀窍是开始绘制玩家周围的世界。因此，在 jsfiddle 中，您可以看到玩家静止但地图移动，因此玩家始终位于视口的中心。

fiddle 没有显示的是到达地图边缘后玩家的最终位置（您将在此处绘制静止地图但更新玩家矩形）。

function draw() {
  var startx = Math.max([player.x - size.width], 0);
  var endx = Math.min(startx + size.width, map.length);
  var starty = Math.max([player.y - size.height], 0);
  var endy = Math.min(starty + size.height, map[0].length);

  for (var x = startx; x < endx; x++) {
    for (var y = starty; y < endy; y++) {
      var drawx = x - startx;
      var drawy = y - starty;

      //draw tile
    }
  }

  //draw player
}

js游戏中的相机，跟随玩家

camera in a js game, follow player

javascript

camera

canvas

transformation