如何实现类似于滑动的相机/运动样式.IO？答案

【问题标题】：How can I achieve a camera/movement style similar to Slither.io?如何实现类似于滑动的相机/运动样式.IO？
【发布时间】：2021-12-11 19:59:54
【问题描述】：

我知道这已经被问过几次了，但他们都在使用其他库，我需要它只使用 P5.js 和 JavaScript 来工作。

我有一个基本的游戏设置，玩家使用 Express 和 Socket.io 加入一个房间并作为一艘船生成。 我希望有一个可玩的地图区域，并且客户认为是该地图的一部分，客户的船在中间

如何通过 p5.js 使用 HTML 画布实现此目的？

我尝试过的一种方法是将整个可玩区域上的船坐标映射到客户端浏览器的宽度。这很好用，但客户的船没有在中心，所以如果移动足够，他们就会从屏幕上飘出来。

这是一个图表来解释我想要实现的目标：

黑框代表整个可玩区域（地图）。每个绿色圆圈是一艘船，每个红色框代表控制该船的客户以及他们可以看到的地图部分

【问题讨论】：

标签： javascript html5-canvas p5.js

【解决方案1】：

您正在寻找的是translate 函数：

指定在显示窗口内移动对象的量。 x参数指定左/右平移，y参数指定上/下平移。

您希望播放器位于屏幕的中心，因此您应该翻译以使播放器位于中心。

translate(width/2 - player.x, height/2 - player.y);

我整理了一个非常简单的示例，应该可以为您指明正确的方向。它基本上只是一个你可以在游戏世界中移动的圆圈，我在其中添加了几个矩形，因此很明显你正在使用箭头键移动玩家：

let player;
function setup() {
  createCanvas(400, 400);
  player = {
    x: width/2,
    y: height/2
  }
}

function draw() {
  background(220);
  translate(width/2 - player.x, height/2 - player.y);  
  
  rect(-100, 100, 50, 50);
  rect(100, 50, 50, 50);
  
  if (keyIsDown(LEFT_ARROW)) {
    player.x--;
  } else if (keyIsDown(RIGHT_ARROW)) {
    player.x++;
  } else if (keyIsDown(UP_ARROW)) {
    player.y--;
  } else if (keyIsDown(DOWN_ARROW)) {
    player.y++;
  }
  
  ellipse(player.x, player.y, 10, 10);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

另外，这里是p5.js sketch的链接

【讨论】：

这基本上正是我想要的。我遇到的问题是，如果我在绘制循环中有翻译部分，那么它们都会立即堆叠起来，所以我在每个循环中一遍又一遍地翻译，玩家就会立即离开屏幕
啊，我明白了我的问题。因为我的游戏是多人游戏，所以我在服务器端使用循环将事件发送到客户端，而不是使用 draw() 循环，因为需要同步同一大厅中的客户端。 translate() 函数的文档指出“如果在 draw() 中调用 translate()，则在循环再次开始时将重置转换”。由于我没有使用绘图功能，因此它没有重置。因此，在我自己的循环开始时，我按您建议的量（重置翻译）翻译回来，效果很好。感谢您的帮助！