引自免费微信小程序：皆我百晓生
为了实现金币、石头和木材的累积，并用于升级建筑和角色，你需要在HTML页面上创建一个用户界面（UI）来显示资源数量，并且编写JavaScript代码来处理这些资源的操作。这里是一个简单的示例，展示了如何创建基本的UI元素和一些基础的交互。
首先，我们创建HTML结构，包含资源显示和按钮用于增加资源：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resource Management</title>
<style>
.resources {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.resource {
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 5px;
}
button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="resources">
<div class="resource">Gold: <span id="gold-count">0</span></div>
<div class="resource">Stones: <span id="stones-count">0</span></div>
<div class="resource">Wood: <span id="wood-count">0</span></div>
</div>
<button onclick="addGold()">Add Gold</button>
<button onclick="addStones()">Add Stones</button>
<button onclick="addWood()">Add Wood</button>
<script src="script.js"></script>
</body>
</html>
接下来，我们创建一个名为script.js的文件，其中包含JavaScript代码来管理资源：
// 初始化资源计数
let gold = 0;
let stones = 0;
let wood = 0;
function addGold() {
gold += 10; // 增加10个金币
updateResourceDisplay('gold', gold);
}
function addStones() {
stones += 5; // 增加5个石头
updateResourceDisplay('stones', stones);
}
function addWood() {
wood += 3; // 增加3个木材
updateResourceDisplay('wood', wood);
}
function updateResourceDisplay(resourceType, value) {
const resourceElement = document.getElementById(`${resourceType}-count`);
resourceElement.textContent = value;
}
这个例子中，我们定义了三个全局变量来存储金币、石头和木材的数量。然后我们为每个资源类型创建了一个函数，当点击对应的按钮时，会调用这些函数增加资源并更新UI。updateResourceDisplay函数负责更新特定资源类型的显示文本。
请注意，这只是一个非常基础的例子。实际应用中，你可能需要更复杂的逻辑，比如限制资源的最大值、添加消耗资源的升级功能等。你还可以考虑将资源数据保存到浏览器的本地存储（localStorage），以便在用户关闭浏览器后仍能保留资源积累。如果你需要这些额外的功能，可以告诉我，我可以提供相应的代码示例。
