I am currently developing a game where players collect resources, spend them to create more resources, and engage in various activities. However, I'm facing an issue where the resource count goes into negative numbers when too much of a certain item is purchased. I need assistance in disabling the button to prevent this from happening.
In addition, I'm looking for a way to display the percentage of total trees in the game. Any help on how to achieve this would be greatly appreciated.
For reference, here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<script>
function collectSeeds() {
document.getElementById("Seeds").stepUp(1);
}
function plantTree() {
document.getElementById("Seeds").stepDown(10);
document.getElementById("Trees").stepUp(1);
}
function plantTrees10() {
document.getElementById("Seeds").stepDown(100);
document.getElementById("Trees").stepUp(10);
}
</script>
</head>
<body>
<button onclick="collectSeeds()">Collect Seeds</button>
<button type="button" id="plantTree"
onClick="myTimer = setInterval(collectSeeds, 1000); plantTree();">Plant Tree</button>
<button
onClick="plantTrees10(); myTimer = setInterval(collectSeeds,100);">Plant Trees (10)</button>
<p>Seeds
<br/>
<input type="number" id="Seeds" disabled></input>
<p>Trees
<br/>
<input type="number" id="Trees" disabled></input>
<div style="position: fixed; bottom: 0; right: 0;">Progress:</div>
</body>
</html>