如何实现类似于 Slither.io 的 camera/movement 样式？

Question

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

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

如何通过 HTML canvas 到 p5.js 实现此目的？

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

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

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

Answer 1

您要查找的是 translate 函数：

specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.

您希望玩家位于屏幕的中心，因此您应该进行翻译以使玩家位于中心。

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>

此外，这里有一个 link 到 p5.js sketch

如何实现类似于 Slither.io 的 camera/movement 样式？

How can I achieve a camera/movement style similar to Slither.io?

javascript

html5-canvas

p5.js