Tkinter按钮生成游戏开发问题：代码重复生成同名按钮，需实现指定逻辑

核心功能逻辑需求 #

• 初始界面仅显示Button1
• 点击Button1生成Button2；后续点击任意已存在的按钮，生成编号递增的新按钮（如点击任意按钮生成Button3，再点击任意按钮生成Button4，以此类推）
• 系统随机指定一个获胜按钮编号，点击该按钮即判定获胜

当前代码问题 #

仅能重复生成名为Button1的按钮，无法实现按钮编号递增、点击任意按钮生成新按钮的核心逻辑

待实现功能清单 #

• 点击开始按钮后启动游戏并生成初始按钮
• 随机生成并提示获胜按钮编号
• 添加计时器，实时显示游戏耗时
• 随机选定获胜按钮（与提示编号对应）
• 触发获胜后显示专属胜利界面
• 界面底部固定添加退出按钮

代码修正核心思路与示例 #

关键修正点 #

1. 维护按钮编号计数器：用全局变量记录当前最大按钮编号，每生成一个新按钮就递增计数器，确保按钮编号唯一且有序
2. 统一点击事件绑定：所有按钮绑定同一个点击处理函数，函数内判断是否点击了获胜按钮，未获胜则生成下一个编号的按钮
3. 随机获胜目标逻辑：游戏初始化时生成随机目标编号，可自定义目标范围
4. 计时器实现：用setInterval实时更新时间显示，获胜时清除计时器
5. 界面布局调整：固定退出按钮位置，获胜时隐藏游戏按钮、显示胜利界面

可运行示例代码 #

<!-- HTML结构 -->
<div id="gameArea">
  <div id="buttonContainer"></div>
  <div id="timerDisplay">00:00</div>
  <div id="winPrompt" style="display:none;">
    <h2>🎉 恭喜获胜！</h2>
    <p>总耗时：<span id="finalTime"></span></p>
  </div>
</div>
<button id="startGameBtn">开始游戏</button>
<button id="exitBtn" style="position:fixed;bottom:20px;right:20px;">退出游戏</button>

// 全局状态变量
let currentMaxBtnNum = 1;
let targetWinNum = 0;
let timerInterval;
let gameStartTime;

// 绑定初始化事件
document.getElementById('startGameBtn').addEventListener('click', initGame);
document.getElementById('exitBtn').addEventListener('click', () => window.close());

// 游戏初始化函数
function initGame() {
  // 重置游戏状态
  currentMaxBtnNum = 1;
  targetWinNum = Math.floor(Math.random() * 10) + 1; // 1-10随机选获胜按钮
  document.getElementById('buttonContainer').innerHTML = '';
  document.getElementById('winPrompt').style.display = 'none';
  
  // 启动计时器
  gameStartTime = Date.now();
  timerInterval = setInterval(updateTimer, 1000);
  
  // 生成初始按钮
  createNewButton(currentMaxBtnNum);
  // 可在页面添加提示：`当前获胜目标按钮：Button${targetWinNum}`
}

// 创建新按钮
function createNewButton(btnNum) {
  const btn = document.createElement('button');
  btn.textContent = `Button${btnNum}`;
  btn.style.margin = '8px';
  btn.addEventListener('click', handleButtonClick);
  document.getElementById('buttonContainer').appendChild(btn);
}

// 按钮点击处理逻辑
function handleButtonClick(e) {
  const clickedBtnNum = parseInt(e.target.textContent.replace('Button', ''));
  
  // 判定是否获胜
  if (clickedBtnNum === targetWinNum) {
    clearInterval(timerInterval);
    const totalSeconds = Math.floor((Date.now() - gameStartTime) / 1000);
    document.getElementById('finalTime').textContent = `${totalSeconds}秒`;
    document.getElementById('winPrompt').style.display = 'block';
    document.getElementById('buttonContainer').innerHTML = '';
    return;
  }
  
  // 生成下一个编号的按钮
  currentMaxBtnNum++;
  createNewButton(currentMaxBtnNum);
}

// 更新计时器显示
function updateTimer() {
  const elapsedSeconds = Math.floor((Date.now() - gameStartTime) / 1000);
  const minutes = String(Math.floor(elapsedSeconds / 60)).padStart(2, '0');
  const seconds = String(elapsedSeconds % 60).padStart(2, '0');
  document.getElementById('timerDisplay').textContent = `${minutes}:${seconds}`;
}

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