房屋设计游戏开发：如何将PNG设为按钮，点击生成可无限创建的可拖拽PNG？

针对你开发房屋设计游戏的需求，我们可以在现有代码基础上添加固定生成器和克隆逻辑，来实现点击固定位置花盆生成可拖拽副本的功能，具体修改如下：

1. 调整HTML结构 #

首先在页面中添加一个固定位置的"生成触发花盆"，把它放在#images容器里，通过CSS固定位置并做视觉区分，让玩家能快速识别它的功能：

<div id="buttons">
  <span class="button" id="up">up</span>
  <span class="button" id="down">down</span>
  <div><span>Z-index: </span><span id="index"></span></div>
</div>
<div id="images">
  <img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
  <!-- 新增固定位置的生成触发花盆 -->
  <img src="http://i64.tinypic.com/jac9sj.jpg" id="pot-spawner" style="position: fixed; bottom: 20px; left: 20px; cursor: pointer; border: 2px solid #fff;">
  <img class="draggable" src="http://i64.tinypic.com/jac9sj.jpg">
  <img class="draggable" src="http://i64.tinypic.com/se6gia.jpg">
  <img class="draggable" src="http://i65.tinypic.com/205p9v6.jpg">
  <!--more img.draggable elements -->
</div>

这里给生成器加了白色边框、固定定位和指针光标，明确告诉玩家这是可交互的生成按钮。

2. 修改JavaScript逻辑 #

接下来更新JS代码，添加克隆生成、绑定拖拽和层级控制的逻辑，同时优化原有功能的健壮性：

$(function() {
  // 初始化现有可拖拽元素
  $(".draggable").draggable();
  // 绑定层级选择事件到已有元素
  bindLayerSelection(".draggable");

  // 固定生成器的点击事件：克隆花盆
  $("#pot-spawner").click(function() {
    // 创建新的可拖拽花盆元素
    const newPot = $("<img>", {
      class: "draggable",
      src: "http://i64.tinypic.com/jac9sj.jpg", // 可替换为你指定的花盆PNG链接
      css: {
        position: "absolute",
        top: "100px",
        left: "100px",
        zIndex: 2 // 初始层级高于背景（背景默认z-index为1）
      }
    });

    // 将新花盆添加到页面容器
    $("#images").append(newPot);
    // 初始化拖拽功能
    newPot.draggable();
    // 绑定层级选择事件，让新花盆支持层级调整
    bindLayerSelection(newPot);
  });
});

// 复用层级选择逻辑，避免重复代码
function bindLayerSelection(element) {
  $(element).click(function() {
    selectedLayer = this;
    $("#index").html(parseInt($(selectedLayer).css("z-index")));
  });
}

var selectedLayer;
$("#up").click(function() {
  if (!selectedLayer) return; // 未选中元素时不执行，避免报错
  const newZIndex = parseInt($(selectedLayer).css("z-index")) + 1;
  $(selectedLayer).css('z-index', newZIndex);
  $("#index").html(newZIndex);
});

$("#down").click(function() {
  if (!selectedLayer) return; // 未选中元素时不执行，避免报错
  let newZIndex = parseInt($(selectedLayer).css("z-index")) - 1;
  newZIndex = Math.max(newZIndex, 1); // 限制最低层级不低于背景
  $(selectedLayer).css('z-index', newZIndex);
  $("#index").html(newZIndex);
});

关键修改说明： #

• 提取了bindLayerSelection复用函数，让新生成的花盆也能继承点击选中层级的功能，不用重复编写相同逻辑。
• 点击固定生成器时，会创建一个新的花盆元素，设置好初始位置、层级和样式，添加到页面后自动初始化拖拽功能。
• 给层级调整按钮添加了空值判断，避免玩家未选中任何元素时点击报错；同时限制down操作的最低层级为1，防止花盆被背景遮挡。
• 新花盆的初始位置设置在页面上方，避免和左下角的生成器重叠，提升操作体验。

这样修改后，玩家点击左下角带白框的花盆，就能无限生成可拖拽的花盆副本，每个新生成的花盆都支持拖拽移动和层级调整功能，完全符合你的需求。

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