Clicker-Game/index.html at main · htmljsgames/Clicker-Game · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicker Game</title>
</head>
<body>
    <h1>Clicker Game</h1>
    <div>Clicks: <span id="click-count">0</span></div>
    <button id="click-btn">Click me!</button>
    <div id="upgrades"></div>
    <script>
        let clicks = 0;
        const clickBtn = document.getElementById('click-btn');
        const upgradesDiv = document.getElementById('upgrades');

        // Upgrade types: click multiplier, flat bonus, auto-click, bonus on next click, reset penalty, random bonus, temporary boost, etc.
        const baseUpgrades = [
            { type: 'mult', label: 'Double Clicks', unlock: 1, value: 2, price: 10 },
            { type: 'add', label: '+3 Clicks', unlock: 2, value: 3, price: 5 },
            { type: 'mult', label: 'Triple Clicks', unlock: 4, value: 3, price: 20 },
            { type: 'add', label: '+7 Clicks', unlock: 6, value: 7, price: 15 },
            { type: 'auto', label: 'Auto-Clicker (1/sec)', unlock: 8, value: 1, price: 25 },
            { type: 'mult', label: 'Quadruple Clicks', unlock: 12, value: 4, price: 40 },
            { type: 'add', label: '+15 Clicks', unlock: 16, value: 15, price: 30 },
            { type: 'bonus', label: 'Next Click +50', unlock: 20, value: 50, price: 50 },
            { type: 'auto', label: 'Auto-Clicker (2/sec)', unlock: 25, value: 2, price: 60 },
            { type: 'mult', label: 'Quintuple Clicks', unlock: 32, value: 5, price: 80 },
            { type: 'add', label: '+30 Clicks', unlock: 40, value: 30, price: 70 },
            { type: 'mult', label: 'Sextuple Clicks', unlock: 50, value: 6, price: 100 },
            { type: 'auto', label: 'Auto-Clicker (5/sec)', unlock: 60, value: 5, price: 120 },
            { type: 'add', label: '+60 Clicks', unlock: 75, value: 60, price: 150 },
            { type: 'mult', label: '10x Clicks', unlock: 90, value: 10, price: 200 },
            { type: 'bonus', label: 'Next Click +200', unlock: 110, value: 200, price: 250 },
            { type: 'auto', label: 'Auto-Clicker (10/sec)', unlock: 130, value: 10, price: 300 },
            { type: 'add', label: '+200 Clicks', unlock: 150, value: 200, price: 350 },
            { type: 'mult', label: '20x Clicks', unlock: 180, value: 20, price: 400 },
            { type: 'reset', label: 'Risky: Reset to 0, Next Click x100', unlock: 220, value: 100, price: 500 },
            { type: 'random', label: 'Random Bonus (10-100)', unlock: 250, value: [10,100], price: 600 },
            { type: 'temp-mult', label: '10x for 5 clicks', unlock: 300, value: {mult:10, turns:5}, price: 700 },
            { type: 'temp-auto', label: 'Auto-Clicker (50/sec for 10s)', unlock: 350, value: {auto:50, time:10}, price: 800 },
        ];

        // Upgrades repeat: after all are unlocked, start again with higher unlock cost
        let upgradeLevel = 0;
    let upgrades = [];
    let upgradeCounts = [];
        let clickMult = 1;
        let clickAdd = 0;
        let autoClick = 0;
        let bonusNext = 0;
        let resetNext = false;

        function getUpgradeSet(level) {
            // Each repeat increases unlock cost, value, and price
            return baseUpgrades.map((upg, i) => {
                let factor = Math.pow(2, level);
                let unlock = upg.unlock * (level + 1);
                let value = upg.value;
                let price = upg.price * (level + 1);
                if (upg.type === 'mult' || upg.type === 'auto') value = upg.value * factor;
                if (upg.type === 'add' || upg.type === 'bonus') value = upg.value * factor;
                if (upg.type === 'reset') value = upg.value * factor;
                return { ...upg, unlock, value, price, label: `Upgrade ${i+1+level*baseUpgrades.length}: ${upg.label}` };
            });
        }

        function addNextUpgradeSet() {
            upgrades = upgrades.concat(getUpgradeSet(upgradeLevel));
            upgradeCounts = upgradeCounts.concat(Array(baseUpgrades.length).fill(0));
            upgradeLevel++;
        }

        addNextUpgradeSet();

        function renderUpgrades() {
            upgradesDiv.innerHTML = '';
            document.getElementById('click-count').textContent = clicks;
            let allUnlocked = true;
            upgrades.forEach((upg, i) => {
                if (clicks >= upg.unlock) {
                    allUnlocked = false;
                    const btn = document.createElement('button');
                    btn.textContent = `${upg.label} (Price: ${upg.price}, Bought: ${upgradeCounts[i]})`;
                    btn.onclick = () => {
                        if (clicks < upg.price) return;
                        clicks -= upg.price;
                        if (upg.type === 'mult') clickMult = upg.value;
                        if (upg.type === 'add') clickAdd += upg.value;
                        if (upg.type === 'auto') autoClick += upg.value;
                        if (upg.type === 'bonus') bonusNext += upg.value;
                        if (upg.type === 'reset') { resetNext = true; }
                        if (upg.type === 'random') {
                            const min = upg.value[0], max = upg.value[1];
                            clickAdd += Math.floor(Math.random() * (max - min + 1)) + min;
                        }
                        if (upg.type === 'temp-mult') {
                            tempMult = {mult: upg.value.mult, turns: upg.value.turns};
                        }
                        if (upg.type === 'temp-auto') {
                            tempAuto = {auto: upg.value.auto, time: upg.value.time, start: Date.now()};
                        }
                        upgradeCounts[i]++;
                        // Increase price and value for next purchase
                        upgrades[i].price = Math.floor(upgrades[i].price * 1.5 + 1);
                        if (typeof upgrades[i].value === 'number') upgrades[i].value = Math.floor(upgrades[i].value * 1.2 + 1);
                        renderUpgrades();
                    };
                    upgradesDiv.appendChild(btn);
                } else {
                    allUnlocked = false;
                }
            });
            // If all upgrades unlocked, add next set
            if (allUnlocked) {
                addNextUpgradeSet();
                renderUpgrades();
            }
        }

        // Temporary upgrades
        let tempMult = null; // {mult, turns}
        let tempAuto = null; // {auto, time, start}

        clickBtn.addEventListener('click', () => {
            if (resetNext) {
                clicks = 0;
                resetNext = false;
                bonusNext = 0;
                clickMult = 1;
                clickAdd = 0;
                autoClick = 0;
                tempMult = null;
                tempAuto = null;
            } else {
                let add = 1 + clickAdd + (bonusNext > 0 ? bonusNext : 0); // Always add at least 1 per click
                let mult = clickMult;
                if (tempMult) {
                    mult *= tempMult.mult;
                    tempMult.turns--;
                    if (tempMult.turns <= 0) tempMult = null;
                }
                clicks += add * mult;
                if (bonusNext > 0) bonusNext = 0;
            }
            renderUpgrades();
        });

        // Auto-clicker and temporary auto
        setInterval(() => {
            let totalAuto = autoClick;
            if (tempAuto) {
                if ((Date.now() - tempAuto.start) / 1000 < tempAuto.time) {
                    totalAuto += tempAuto.auto;
                } else {
                    tempAuto = null;
                }
            }
            if (totalAuto > 0) {
                clicks += totalAuto;
                renderUpgrades();
            } else {
                // Still update click count display
                document.getElementById('click-count').textContent = clicks;
            }
        }, 1000);

        renderUpgrades();
    </script>
</body>
</html>