I have just finished the Javascript course and have created an Idle Game with Bitcoin mining as the theme. I wanted all of you to take a look at my progress(I barely knew how to write in HTML at the start). I also wanted to post this here for criticism, perhaps I could have used arrays and objects instead of variables etc.
The game is going to be an ongoing project with the following things will be added as the game develops:
Game Features:
Balance - I know right now the game probably isn’t balanced, some equipment is probably more valuable than others for their price.
Achievements
Vanity Items
More mining equipment
Save feature(I believe I will need to learn how to work with servers which is something I really want to do as I feel like it will take my abilities to a new level)
Design Feature:
I want to optimize the layout so that it looks much better
I want to add better graphics, backgrounds, and images as well.
I also want to make the header section scroll when the user scrolls. I’ll do some research later on how to achieve this.
Back End Code:
Definitely want to learn how to implement servers into javascript. IF you guys have any recommendations on courses that do this please let me know!
I want to see if their is an alternative way I can write this code using arrays and objects for example(please give me suggestions!)
Below is my code and I will post the images I used as well in this thread.
<!DOCTYPE html>
<html>
<head>
<title>Bitcoin Miner</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 align=center>Idle Bitcoin Miner</h1>
<h2 id="bitcoinBalance" align=center>Bitcoin Balance:</h2>
<h3 align=center>Mining Equipment</h3>
<div align=center>
<p>Home Computer</P>
<img src="computerpic.png" width=150 height=150>
<p>Price: 0.01 Bitcoin</p>
<p id="cqty">QTY: 1</p>
<button type="button" id="compButton" onclick="compFunction()">Buy 1</button>
</div>
<!-- clicking the button will add 1 Mining Equpipment.-->
<div align=center>
<p>Graphics Card</p>
<img src="gpu.png" width=150 height=150>
<p>Price: 0.1 Bitcoin</p>
<p id="gqty">QTY: 0</p>
<button type="button" id="gpuButton" onclick="gpuFunction()">Buy 1</button>
</div>
<div align=center>
<p>ASIC</p>
<img src="asic.png" width=150 height=150>
<p>Price: 1 Bitcoin</p>
<p id="aqty">QTY: 0</p>
<button type="button" id="asicButton" onclick="asicFunction()">Buy 1</button>
</div>
<div align=center>
<p>Mining Farm</p>
<img src="farm.jpg" width=150 height=150>
<p>Price: 5 Bitcoin</p>
<p id="fqty">QTY: 0</p>
<button type="button" id="farmButton" onclick="farmFunction()">Buy 1</button>
</div>
<script>
/* these variables are for monitoring the quantity of equipment and total balance of bitcoin the player has */
var balance = 0;
var compQty = 1;
var gpuQty = 0;
var asicQty = 0;
var farmQty = 0;
/* the below functions are launched when the button to buy an equipment is clicked. */
function compFunction(){
if(balance > .01){
balance = balance - .01;
compQty = compQty + 1;
document.getElementById("cqty").innerHTML = "QTY: " + compQty;}
else{
alert("You do not have enough Bitcoin!");
};
};
function gpuFunction(){
if(balance > .1){
balance = balance - .1;
gpuQty = gpuQty + 1;
document.getElementById("gqty").innerHTML = "QTY: " + gpuQty;}
else{
alert("You do not have enough Bitcoin!");
};
};
function asicFunction(){
if(balance > 1){
balance = balance - 1;
asicQty = asicQty + 1;
document.getElementById("aqty").innerHTML = "QTY: " + asicQty;}
else{
alert("You do not have enough Bitcoin!");
};
};
function farmFunction(){
if(balance > 5){
balance = balance - 5;
farmQty = farmQty + 1;
document.getElementById("fqty").innerHTML = "QTY: " + farmQty;}
else{
alert("You do not have enough Bitcoin!");
};
};
//The intervals below will trigger the incremental functions
setInterval(compOutput, 1000);
setInterval(gpuOutput, 1000);
setInterval(asicOutput, 1000);
setInterval(farmOutput, 1000);
setInterval(balanceUpdate, 1000);
//the function below will increment the balance
function compOutput(){
balance = balance + (.0001 * compQty);
}
function gpuOutput(){
balance = balance + (.001 * gpuQty);
}
function asicOutput(){
balance = balance + (.01 * asicQty);
}
function farmOutput(){
balance = balance + (1 * farmQty);
}
//the function below will update the standing balance
function balanceUpdate(){
document.getElementById("bitcoinBalance").innerHTML = "Bitcoin Balance: " + balance;}
</script>
</body>
</html>
