Web应用树木种植功能故障求助：已种树木点击新种后消失

你现在的逻辑是复用同一个<img id="treeImage">元素：点击"Add to my garden"只是把这个元素移动到随机位置，但点击"Plant a new tree"启动新定时器时，startTimer函数会重置这个元素的尺寸（变回初始大小），并且它会回到原来的.tree-container里，导致你以为“树消失了”——实际上是这个唯一的树元素被重新用来生长新树了，之前的位置没有保留独立的树实例。

要实现多棵树保留的效果，核心是每次点击添加时克隆当前生长完成的树，把克隆体放到花园区域，原树保留作为新树的生长载体。具体步骤如下：

1. 给HTML添加花园容器 #

在<body>里新增一个专门存放已种植树木的容器，确保它能覆盖整个屏幕，且不干扰其他交互：

<div id="garden" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></div>

2. 修改Timer.js代码 #

关键修改点： #

• 移除全局的randomX/randomY，改为每次添加树时生成新的随机位置
• 点击"Add to my garden"时克隆树元素，将克隆体添加到花园
• 重置原树的尺寸和位置，准备下一次生长
• 修复按钮禁用的错误，确保定时器结束后启用添加按钮

修改后的完整Timer.js：

// Get the elements
const startButton = document.querySelector('#start');
const minutesLabel = document.querySelector('#minutes');
const secondsLabel = document.querySelector('#seconds');
const addButton = document.querySelector('#add');
const countLabel = document.querySelector('#count');
const garden = document.getElementById('garden');
const treeConstant = document.getElementById('treeImage');
// 初始树的尺寸，用于重置
const initialTreeWidth = 30; // 根据你初始的树大小调整，这里假设初始是30px
const initialTreeHeight = 30;

// Set the timer length (in seconds)
const timerLength = 25 * 60; // 25分钟，等价于原来的1500

// Initialize the timer values --------------------------------------------
let secondsRemaining = timerLength;
let intervalId;
let count = 0;

// 生成随机位置的工具函数
function getRandomTreePosition() {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  const x = Math.floor(Math.random() * (windowWidth - treeConstant.width));
  // 避免树被底部按钮遮挡，预留底部空间
  const y = Math.floor(Math.random() * (windowHeight - treeConstant.height - 100));
  return { x, y };
}

// Define a function to start the timer------------------------------------
function startTimer() {
  // Disable the button during the timer
  startButton.disabled = true;
  addButton.disabled = true;

  // 重置原树到初始位置和尺寸，准备新的生长
  treeConstant.style.position = 'static';
  treeConstant.style.width = `${initialTreeWidth}px`;
  treeConstant.style.height = `${initialTreeHeight}px`;

  // Set the interval to update the timer every second
  intervalId = setInterval(() => {
    // Calculate the remaining minutes and seconds
    const minutes = Math.floor(secondsRemaining / 60);
    const seconds = secondsRemaining % 60;

    // Update the timer display
    minutesLabel.textContent = minutes.toString().padStart(2, '0');
    secondsLabel.textContent = seconds.toString().padStart(2, '0');

    // Update the tree growth
    const percentComplete = 100 - (secondsRemaining / timerLength * 100);
    const growSize = (percentComplete / 100) * 150; // 最终生长到150px
    treeConstant.style.width = `${initialTreeWidth + growSize}px`;
    treeConstant.style.height = `${initialTreeHeight + growSize}px`;

    // Check if the timer is finished
    if (secondsRemaining <= 0) {
      // Stop the timer interval
      clearInterval(intervalId);

      //Reset the timer values
      secondsRemaining = timerLength;
      minutesLabel.textContent = '25';
      secondsLabel.textContent = '00';
      
      //Re-enable both buttons
      startButton.disabled = false;
      addButton.disabled = false;
    }
    // Decrement the remaining seconds
    secondsRemaining--;
  }, 1000);
}

// When the "Add to my garden" button is pressed...
function addToGarden() {
    addButton.disabled = true;
    count++;
    countLabel.textContent = count;

    // 克隆当前生长完成的树
    const clonedTree = treeConstant.cloneNode(true);
    // 生成随机位置
    const { x, y } = getRandomTreePosition();
    // 设置克隆树的定位
    clonedTree.style.position = 'absolute';
    clonedTree.style.left = `${x}px`;
    clonedTree.style.top = `${y}px`;
    clonedTree.style.pointerEvents = 'auto'; // 如果需要树有交互可以开启
    // 添加到花园容器
    garden.appendChild(clonedTree);
}

// Attach the startTimer function to the button click event----------------
startButton.addEventListener('click', startTimer);
addButton.addEventListener('click', addToGarden);

3. 修正HTML里的treeImage标签错误 #

你的HTML里treeImage的src属性写错了，把<img id="treeImage" src="img src="images/spacer.gif" width="305" height="312" alt="tree">改成：

<img id="treeImage" src="images/spacer.gif" width="30" height="30" alt="tree">

（这里把初始宽高改成30px，对应JS里的初始尺寸，你可以根据实际需求调整）

• 可以给花园里的树添加不同的样式或随机图片，增加多样性
• 限制最大种植数量（比如20棵），超过后禁用添加按钮
• 给树添加拖拽功能，让用户可以调整位置

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