javascript - 用 JavaScript 和 P5 创建游戏 - 几个基本问​​题

Question

我目前正在开发一款需要使用 HTML、JavaScript、CSS 和 P5 完成的游戏。
想法是拥有标准的 2d 游戏，其中 Angular 色需要进入 map 上的导出门。主要功能是使用 Q 和 E 按钮将“ map ”或“ Canvas ”旋转 90 度。游戏类似于已经存在的名为 Rotate 的游戏。当旋转 map 字符时，它会保持在相同的位置，所以它只有旋转的背景。
关于最佳方法，我有以下问题:

我是否应该手动编写 map ，即在 map 上指定每个边界(地板、墙壁等)的位置，然后在将 map 旋转 90 度时，只需在数学上将边界调整到不同的位置？这是最好的方法还是有更省时更聪明的方法？

我应该完全使用 P5 还是这一切都可以通过 dom 操作在 HTML 中完成？

我想通过只显示 map 的正方形来获得相机效果 - 这样 Angular 色总是居中 - 当走到左边时， map 会移动而不是 Angular 色。这样 map 就可以一直在人物的当前点—— map 的中心旋转。

我提前感谢任何建议或建议。
谢谢!

Answer 1

您可以使用以下公式相对于中心放置所有对象:xpos = distance * sin(angle), ypos = distance * cos(angle);这是您可以引用的示例:

let a;
let dist = 50;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  a = PI;
}

function draw() {
  background(220);
  translate(width / 2, height / 2);
  let x = dist * sin(a);
  let y = dist * cos(a);
  rect(x, y, 20, 20);
  line(0, 0, x, y);
}

function keyTyped() {
  if (key == 'q' || key == 'Q')
    a += PI / 2;
  if (key == 'e' || key == 'E')
    a -= PI / 2;
}