在 JavaScript 和 P5 中创建游戏 - 几个基本问题

Question

我目前正在开发一款需要使用 HTML、JavaScript、CSS 和 P5 来完成的游戏。

想法是让角色需要进入地图上的出口门的标准 2d 游戏。主要功能是使用 Q 和 E 按钮将“地图”或“canvas”旋转 90 度。类似于现有游戏 Rotate 的游戏。旋转时地图角色保持在相同位置，因此它唯一的背景在旋转。

我有以下关于最佳方法的问题：

我是否应该手动编写地图，即在地图上分配每个边界（地板、墙壁等）的位置，然后在将地图旋转 90 度时仅在数学上将边界调整为不同的位置地点？这是最好的方法还是有更省时更聪明的方法？
我是否应该使用 P5，或者这一切都可以在 HTML 中通过 dom 操作完成？
我想通过只显示地图的正方形来获得相机效果 - 这样角色始终居中 - 当向左移动时地图会移动而不是角色。使地图始终在角色当前点-地图中心旋转。

我很感激任何提前的建议或建议。

谢谢！

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;
}

在 JavaScript 和 P5 中创建游戏 - 几个基本问题

Creating game in JavaScript and P5 - few fundamental questions

html

javascript

css

dom

p5.js

在 JavaScript 和 P5 中创建游戏 - 几个基本问​​题

Creating game in JavaScript and P5 - few fundamental questions

html

javascript

css

dom

p5.js

在 JavaScript 和 P5 中创建游戏 - 几个基本问题