JavaScript点击器游戏开发：如何实现商店弹窗或独立界面？

结合你代码里的mouse.dist判断，你应该用的是p5.js环境，下面通过状态控制+分层绘制来实现商店弹窗，直接上可落地的步骤和代码：

1. 修正商店按钮的触发逻辑 #

你当前代码是鼠标悬停就打开商店，不符合常规交互，改成点击按钮才切换商店状态，把逻辑放到mousePressed()函数里：

// 全局变量
let shopMenu = false;
let shopColor = "gray";
let shop = {x: 100, y: 50}; // 商店按钮坐标，可自行调整
let clickCount = 0; // 玩家累计点击数
let clickMultiplier = 1; // 点击增益倍数

function mousePressed() {
  // 点击商店按钮，切换弹窗显示/隐藏
  if (mouse.dist(shop.x, shop.y) < 40) {
    shopMenu = !shopMenu;
  }

  // 商店打开时，处理弹窗内的交互
  if (shopMenu) {
    // 关闭按钮点击检测（弹窗右上角）
    if (mouseX > width - 60 && mouseX < width - 20 && mouseY > 20 && mouseY < 60) {
      shopMenu = false;
    }

    // 道具1：点击倍增器，售价10点击数
    if (mouseX > 150 && mouseX < 350 && mouseY > 100 && mouseY < 150) {
      if (clickCount >= 10) {
        clickCount -= 10;
        clickMultiplier += 1;
      }
    }

    // 道具2：自动点击器，售价50点击数（示例）
    if (mouseX > 150 && mouseX < 350 && mouseY > 180 && mouseY < 230) {
      if (clickCount >= 50) {
        clickCount -= 50;
        // 这里可添加自动点击逻辑，比如用setInterval定时增加clickCount
      }
    }
  } else {
    // 商店关闭时，点击主区域增加点击数
    clickCount += clickMultiplier;
  }
}

2. 分层绘制界面 #

在draw()函数里先画游戏主界面，再根据shopMenu状态绘制商店弹窗（弹窗会覆盖主界面，实现独立界面效果）：

function draw() {
  background(220);

  // 绘制游戏主界面
  // 显示当前点击数
  textSize(32);
  text(`点击数: ${clickCount}`, 20, 50);
  // 绘制商店按钮
  fill(shopColor);
  ellipse(shop.x, shop.y, 80, 80);
  fill("white");
  text("商店", shop.x - 20, shop.y + 5);

  // 鼠标悬停商店按钮时变色
  if (mouse.dist(shop.x, shop.y) < 40) {
    shopColor = "firebrick";
  } else {
    shopColor = "gray";
  }

  // 商店菜单打开时，绘制弹窗
  if (shopMenu) {
    // 半透明遮罩，挡住主界面，突出弹窗
    fill(0, 0, 0, 150);
    rect(0, 0, width, height);

    // 弹窗面板
    fill(255);
    rect(100, 50, width - 200, height - 100, 10);

    // 弹窗标题
    fill(0);
    textSize(28);
    text("商店", width/2 - 30, 90);

    // 关闭按钮
    fill("firebrick");
    rect(width - 60, 20, 40, 40);
    fill("white");
    textSize(24);
    text("X", width - 45, 45);

    // 道具1：点击倍增器
    fill("#f0f0f0");
    rect(150, 100, 200, 50, 5);
    fill(0);
    textSize(18);
    text(`点击倍增器 (+1) - 10点击`, 160, 130);

    // 道具2：自动点击器
    fill("#f0f0f0");
    rect(150, 180, 200, 50, 5);
    text(`自动点击器 - 50点击`, 160, 210);
  }
}

核心逻辑说明 #

• 状态控制：用shopMenu布尔变量开关商店，点击按钮或关闭按钮时切换状态。
• 分层绘制：弹窗在主界面之后绘制，半透明遮罩能明确区分界面层级，避免玩家误操作主游戏。
• 购买逻辑：每个道具做独立点击检测，先判断点击数是否足够，满足条件就扣除点数并生效增益。

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