如何在p5.js中分组DOM元素及其方法？附游戏菜单代码优化请求

原始需求 #

我用p5.js制作了一个游戏菜单，要求菜单简洁美观且交互性强，同时希望代码精简。目前已满足前两项要求，但代码仍显冗余，需要修改以实现相同功能。

优化后的代码 #

JavaScript 代码

// 统一存储菜单模式的核心数据：名称、描述、位置
const modeData = [
  { name: "Mode 1", desc: "Mode 1<br>description", x: 40, y: 115 },
  { name: "Mode 2", desc: "Mode 2<br>description", x: 215, y: 115 },
  { name: "Mode 3", desc: "Mode 3<br>description", x: 40, y: 300 },
  { name: "Mode 4", desc: "Mode 4<br>description", x: 215, y: 300 }
];
let modes = [];

function setup() {
  createCanvas(400, 500);
  
  // 批量创建菜单元素并绑定事件
  modeData.forEach(data => {
    const mode = createP(data.name);
    mode.class("mode");
    mode.style("font-size", "50px");
    mode.position(data.x, data.y);
    
    // 绑定共用的鼠标事件
    mode.mouseOver(onModeMouseOver.bind(null, data));
    mode.mouseOut(onModeMouseOut.bind(null, data));
    
    modes.push(mode);
  });
}

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

// 共用的鼠标悬停事件处理函数
function onModeMouseOver(data, element) {
  element.html(data.desc);
  element.style("font-size", "35px");
}

// 共用的鼠标离开事件处理函数
function onModeMouseOut(data, element) {
  element.html(data.name);
  element.style("font-size", "50px");
}

HTML 代码

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

对优化思路的解答 #

• 在HTML页面中创建

  元素：可以实现，但用p5.js批量创建的方式更贴合p5开发流程，能把数据和逻辑统一管理。若需分离结构，也可在HTML中提前写好

  标签，再用p5的selectAll获取后批量绑定事件。

• 共用mouseOver/mouseOut函数：优化代码已实现这一点，通过提取共用事件处理函数，并用bind传递对应数据，彻底避免重复编写相同逻辑。
• 是否使用存入的modes变量：必须使用，这个数组用于统一管理所有菜单元素，后续新增、修改菜单只需调整modeData数组即可，无需逐个操作变量，大幅提升可维护性。
• 其他游戏开发可选编程语言/框架：
  • JavaScript：Phaser.js
  • Python：Pygame、Pyglet
  • C#：Unity（配套C#）、MonoGame
  • C++：SFML、SDL
  • Java：LibGDX

内容的提问来源于stack exchange，提问作者MarcoGaLo