Processing转p5.js代码语法错误排查与功能补全求助

一、语法错误修复 #

1. 类方法声明错误：JavaScript类中定义方法不需要加function关键字，这是你遇到Unexpected token错误的核心原因。所有updateXX、overRectXX、mouseClicked等方法都要去掉function前缀。
2. 类结构不完整：原代码中Buttons类缺失多个方法（比如updateCB、updateCC、overRectBA等），导致类结构不完整，引发Declaration or statement expected错误。

二、逻辑优化与问题解答 #

• return this.rectOver是否必要：当前代码中updateXX方法仅用来更新状态，不需要返回值；如果后续需要直接获取状态，保留返回语句也不影响，但当前场景下可以去掉。
• 重复逻辑简化：所有overRectXX方法逻辑完全一致，无需重复定义，只需要一个通用的overRect方法即可。
• rectOver状态冲突问题：原代码所有按钮共用一个rectOver变量，会导致鼠标悬停多个按钮时状态混乱，改为直接在绘制按钮时调用overRect判断状态即可解决。

三、完整修复后的代码 #

let scenarioA;
let buttons;

function setup() {
  createCanvas(400, 400);
  scenarioA = new ScenarioA();
  buttons = new Buttons();
}

function draw() {
  background(220);
  buttons.table();
  buttons.range();
  scenarioA.display();
  buttons.display();
}

function mouseClicked() {
  buttons.mouseClicked();
}

class ScenarioA {
  scenarioAA() {
    console.log("触发场景AA");
    // 补充原Processing中Scenario AA的实现代码
  }

  scenarioAB() {
    console.log("触发场景AB");
    // 补充原Processing中Scenario AB的实现代码
  }

  scenarioAC() {
    console.log("触发场景AC");
    // 补充原Processing中Scenario AC的实现代码
  }

  scenarioBA() {
    console.log("触发场景BA");
    // 补充原Processing中Scenario BA的实现代码
  }

  scenarioBB() {
    console.log("触发场景BB");
    // 补充原Processing中Scenario BB的实现代码
  }

  scenarioBC() {
    console.log("触发场景BC");
    // 补充原Processing中Scenario BC的实现代码
  }

  scenarioCA() {
    console.log("触发场景CA");
    // 补充原Processing中Scenario CA的实现代码
  }

  scenarioCB() {
    console.log("触发场景CB");
    // 补充原Processing中Scenario CB的实现代码
  }

  scenarioCC() {
    console.log("触发场景CC");
    // 补充原Processing中Scenario CC的实现代码
  }

  display() {
    // 补充原Processing中场景展示的实现代码
  }
}

class Buttons {
  constructor() {
    this.x1 = 189;
    this.x2 = 244;
    this.x3 = 299;
    this.y1 = 189;
    this.y2 = 224;
    this.y3 = 259;
    this.textspacingx = 14;
    this.textspacingy = 22;
    this.buttonlength = 50;
    this.buttonwidth = 50;
  }

  table() {
    strokeWeight(0.5);
    fill(255);
    stroke(0);
    rect(120, 130, 230, 160);
  }

  range() {
    text("Low", 145, 210);
    text("Mid", 145, 245);
    text("High", 145, 280);
    push();
    let angle2 = radians(270);
    translate(140, 260);
    rotate(angle2);
    let nuclear = createFont("Avenir-Light", 20);
    textFont(nuclear, 20);
    fill(0);
    textAlign(CORNER);
    text("Climate", 0, 0);
    pop();
    text("Low", 195, 185);
    text("Mid", 250, 185);
    text("High", 305, 185);
    text("Nuclear", 230, 155);
  }

  display() {
    this.drawButton(this.x1, this.y1);
    this.drawButton(this.x2, this.y1);
    this.drawButton(this.x3, this.y1);
    this.drawButton(this.x1, this.y2);
    this.drawButton(this.x2, this.y2);
    this.drawButton(this.x3, this.y2);
    this.drawButton(this.x1, this.y3);
    this.drawButton(this.x2, this.y3);
    this.drawButton(this.x3, this.y3);
  }

  drawButton(x, y) {
    fill(this.overRect(x, y) ? 220 : 240);
    stroke(200);
    rect(x, y, this.buttonlength, this.buttonwidth, 2);
    fill(0);
  }

  overRect(x, y) {
    return mouseX >= x && mouseX <= x + this.buttonlength && mouseY >= y && mouseY <= y + this.buttonwidth;
  }

  mouseClicked() {
    if (this.overRect(this.x1, this.y1)) scenarioA.scenarioAA();
    if (this.overRect(this.x2, this.y1)) scenarioA.scenarioAB();
    if (this.overRect(this.x3, this.y1)) scenarioA.scenarioAC();
    if (this.overRect(this.x1, this.y2)) scenarioA.scenarioBA();
    if (this.overRect(this.x2, this.y2)) scenarioA.scenarioBB();
    if (this.overRect(this.x3, this.y2)) scenarioA.scenarioBC();
    if (this.overRect(this.x1, this.y3)) scenarioA.scenarioCA();
    if (this.overRect(this.x2, this.y3)) scenarioA.scenarioCB();
    if (this.overRect(this.x3, this.y3)) scenarioA.scenarioCC();
  }
}

四、需要补全的内容 #

• 场景实现代码：ScenarioA类中的scenarioAA到scenarioCC方法需要补充原Processing中的对应逻辑，包括每个场景的图表绘制、数据展示等内容。
• 场景展示逻辑：ScenarioA的display方法需要补充默认场景的展示逻辑，或者根据当前选中的场景切换展示内容。

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