如何在JavaScript中实现点击器游戏的点击升级按钮功能？

要实现「Upgrade click」按钮的功能，我们需要添加变量控制每次点击收益、升级成本，并给按钮绑定对应的逻辑。以下是修改后的完整代码：

修改后的JavaScript代码 #

"use strict";

// 初始化货币数量、每次点击收益、升级成本
let currency = 0;
let clickValue = 1;
let upgradeCost = 10;

// 获取页面元素
const dollarButton = document.getElementById('dollarButton');
const scoreElement = document.getElementById('score');
const upgradeButton = document.getElementById('updaCash');
const upgradeTextElement = document.getElementById('updaCash_text');

// 统一更新界面显示的辅助函数
function updateUI() {
  scoreElement.innerHTML = "$" + currency;
  // 动态显示升级按钮的当前价格
  upgradeTextElement.textContent = `Upgrade click - $${upgradeCost}`;
}

// 点击赚钱的逻辑
function earnMoney() {
  currency += clickValue;
  updateUI();
}

// 升级点击的逻辑
function upgradeClick() {
  // 检查是否有足够货币完成升级
  if (currency >= upgradeCost) {
    currency -= upgradeCost;
    clickValue += 1; // 每次升级增加1点点击收益，可按需调整数值
    // 升级成本递增，这里设置为每次乘1.5，也可改为固定数值增加
    upgradeCost = Math.floor(upgradeCost * 1.5);
    updateUI();
  }
}

// 绑定点击事件
dollarButton.addEventListener('click', earnMoney);
upgradeButton.addEventListener('click', upgradeClick);

// 初始化界面显示
updateUI();

修改后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="dollarButton" style="
    border: none;
    top: 45%;
    left: 20%;
    position: absolute;
    cursor: pointer;
  ">
    <img src="https://www.pngfind.com/pngs/m/94-940164_button-images-png-button-background-image-green-transparent.png" />
  </button>
  <h1 id="score"></h1>
  <div id="updaCash" class="button red" style="cursor: pointer;">
    <span id="updaCash_text" class="color-white"></span>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS代码（优化升级按钮样式） #

img {
  width: 200px;
}

/* 给升级按钮添加基础样式，提升交互辨识度 */
.button.red {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #ff4444;
  border-radius: 5px;
}

.color-white {
  color: white;
  font-size: 18px;
}

关键改动说明： #

• 新增clickValue变量控制每次点击产生的货币量，初始值为1
• 新增upgradeCost变量控制升级所需货币，初始值为10，每次升级后成本递增
• 封装updateUI函数统一处理界面更新，避免重复代码
• 升级按钮逻辑中先校验货币是否充足，再执行扣钱、提升收益、更新成本的操作
• 给升级按钮添加了鼠标指针样式和基础外观，优化交互体验

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