html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Created by Christopher Benoit
Improved by @visph -->
<!DOCTYPE html>
<html>
<head>
<title>Gold Clicker</title>
</head>
<body>
<div id="area">
<span id="gold1">Gold: </span>
<span id="gold">0</span>
<br><br>
<button id="gButton" onclick="earnGold()">Earn Gold</button>
<br>
<span id="cost">50 Gold: </span>
<button id="upgrade1" onclick="upgrade()">Upgrade 1</button>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by Christopher Benoit
Improved by @visph */
#gButton {
border:1px solid darkyellow;
background-color: yellow;
padding: 15px 30px;
border-radius:30px;
color: white;
font-size: 30;
margin: 0 auto;
margin-bottom:20px;
}
#gButton:hover {
cursor:pointer;
}
#area {
background-color: #ff9a02;
border: 2px solid #bf7a02;
border-radius:30px;
padding: 70px 20px;
margin:0 auto;
text-align:center;
}
#gold {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Created by Christopher Benoit
// Improved by @visph
var gold = 0;
var gold_inc = [1,2,4];
var cost = [50,100,200];
var cost_txt = ['Upgrade 1','Upgrade 2','Upgrade 3'];
var idx = 0;
function earnGold(number=null) {
gold += number || gold_inc[idx];
document.getElementById('gold').innerHTML = gold;
}
function upgrade() {
if (gold >= cost[idx]) {
earnGold(-cost[idx]);
if (idx < cost.length-1) {
idx++;
document.getElementById ('upgrade1').innerHTML = cost_txt[idx];
document.getElementById('cost').innerHTML = cost[idx]+' Gold:'
}
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run