javascript 如何在p5.js中对DOM元素及其方法进行分组？

z9smfwbn 于 2022-12-25 发布在 Java

关注(0)|答案(1)|浏览(165)

我在p5.js中为一个游戏制作了一个菜单，我希望菜单简单，但呈现良好，非常具有交互性。另外，我希望有一小段代码。我已经达到了第一个条件，但我仍然认为我的代码非常大。
我鼓励您更改/编辑/删除我的代码，并以更好的方式编写相同的想法

let modes = [];
var mode1, mode2, mode3, mode4;

function setup() {
  createCanvas(400, 500);
  mode1 = createP("Mode 1");
  mode2 = createP("Mode 2");
  mode3 = createP("Mode 3");
  mode4 = createP("Mode 4");
  mode1.class("mode");
  mode2.class("mode");
  mode3.class("mode");
  mode4.class("mode");
  modes = selectAll(".mode");
  for (var i = 0; i < modes.length; i++) {
    modes[i].style("font-size", "50px");
  }
  mode1.position(40, 115);
  mode2.position(215, 115);
  mode3.position(40, 300);
  mode4.position(215, 300);
}

function draw() {
  background("#befecd");
  noFill();
  strokeWeight(8);
  rect(20, 100, 360, 360);
  line(20, 280, 380, 280);
  line(200, 100, 200, 460);
  fill(0);
  textSize(64);
  text("MENU", 100, 70);
  mode1.mouseOver(function () {
    mode1.html("Mode 1<br>description");
    mode1.style("font-size", "35px");
  });
  mode2.mouseOver(function () {
    mode2.html("Mode 2<br>description");
    mode2.style("font-size", "35px");
  });
  mode3.mouseOver(function () {
    mode3.html("Mode 3<br>description");
    mode3.style("font-size", "35px");
  });
  mode4.mouseOver(function () {
    mode4.html("Mode 4<br>description");
    mode4.style("font-size", "35px");
  });
  mode1.mouseOut(function () {
    mode1.html("Mode 1");
    mode1.style("font-size", "35px");
  });
  mode2.mouseOut(function () {
    mode2.html("Mode 2");
    mode2.style("font-size", "50px");
  });
  mode3.mouseOut(function () {
    mode3.html("Mode 3");
    mode3.style("font-size", "50px");
  });
  mode4.mouseOut(function () {
    mode4.html("Mode 4");
    mode4.style("font-size", "50px");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>

以下是我思考过的一些想法：

做那个

HTML页面上的元素

保持变量变量的不同属性，并且所有DOM元素只有一个mouseOver（）/mouseOut（）函数
正如你所看到的，我已经得到了另一个变量的所有元素，但是我还没有使用它，可以吗？
换一种编程语言。有时候我做游戏或者这类事情的时候，我觉得p5.js不是很舒服。我问你换一种编程语言（不是最好的或者个人的意见，我只想知道其他的选择）

JavaScript

来源：https://stackoverflow.com/questions/73567483/how-to-group-dom-elements-and-their-methods-in-p5-js

1条答案

按热度按时间

gmxoilav1#

在几乎所有语言中，thing1、thing2、thing3 ... thingN的解决方案都是数组和迭代（在命令式语言中通常是循环）。
您可以从每个重复的逻辑块中分离出变量部分，并归纳为表示原始数据的结构，然后循环使用它，并从这些变量构建您的元素。

const modeData = [
  {description: "foo foo foo", position: [40, 115]},
  {description: "bar bar bar", position: [215, 115]},
  {description: "baz baz baz", position: [40, 300]},
  {description: "quux quux", position: [215, 300]},
];
const modes = [];

function setup() {
  createCanvas(400, 500);
  modeData.forEach(({description, position: [x, y]}, i) => {
    const p = createP(`Mode ${i + 1}`);
    modes.push(p);
    p.class("mode");
    p.style("font-size", "45px");
    p.position(x, y);
    p.mouseOver(() => {
      p.html(`Mode ${i + 1}<br>${description}`);
      p.style("font-size", "35px");
    });
    p.mouseOut(() => {
      p.html(`Mode ${i + 1}`);
      p.style("font-size", "50px");
    });
  });
}

function draw() {
  background("#befecd");
  noFill();
  strokeWeight(8);
  rect(20, 100, 360, 360);
  line(20, 280, 380, 280);
  line(200, 100, 200, 460);
  fill(0);
  textSize(64);
  text("MENU", 100, 70);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>

如您所见，鼠标悬停/移出侦听器不应在draw中的每一帧上重新添加，而在setup中只应添加一次。
撇开UI/UX/app设计不谈，像这样把画布绘图和DOM元素结合起来有点奇怪，尤其是涉及到调整大小的时候。当描述文本很小时，你可以看到在特定的鼠标位置上鼠标悬停/移出之间有一些奇怪的 Flink 。我可能会使用CSS样式的DOM <div>元素而不是画布线条来创建框。如果文本内容很大，问题就消失了。但这一点是成立的，因为还有其他布局问题可能发生。您的用例可能是一个例外，所以这只是一个经验法则。
还要注意，你从45px开始，然后在鼠标出后返回到50px。也许这两个数字应该是相同的。

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 如何在p5.js中对DOM元素及其方法进行分组？

1条答案

相关问题

热门标签

最新问答