Forked from movienerd/clickerGame
Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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
/**
* This clicker game allows users to earn virtual money by clicking.
* It includes an upgrade system where users can purchase multiple auto-clickers and dime-smithers.
* Each upgrade adds to the overall effect, increasing earnings per second.
* Upgrades are hidden until they are unlocked for the first time.
* The game state is stored client-side using localStorage for persistence.
* React is used for the UI, and setInterval for the auto-upgrade functionality.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [money, setMoney] = useState(() => {
const saved = localStorage.getItem("money");
return saved ? parseFloat(saved) : 0;
});
const [autoClickers, setAutoClickers] = useState(() => {
const saved = localStorage.getItem("autoClickers");
return saved ? parseInt(saved) : 0;
});
const [dimeSmiths, setDimeSmiths] = useState(() => {
const saved = localStorage.getItem("dimeSmiths");
return saved ? parseInt(saved) : 0;
});
const [autoClickerUnlocked, setAutoClickerUnlocked] = useState(() => {
return localStorage.getItem("autoClickerUnlocked") === "true";
});
const [dimeSmitherUnlocked, setDimeSmitherUnlocked] = useState(() => {
return localStorage.getItem("dimeSmitherUnlocked") === "true";
});
useEffect(() => {
localStorage.setItem("money", money.toString());
localStorage.setItem("autoClickers", autoClickers.toString());
localStorage.setItem("dimeSmiths", dimeSmiths.toString());
localStorage.setItem("autoClickerUnlocked", autoClickerUnlocked.toString());
localStorage.setItem("dimeSmitherUnlocked", dimeSmitherUnlocked.toString());
}, [money, autoClickers, dimeSmiths, autoClickerUnlocked, dimeSmitherUnlocked]);
useEffect(() => {
const interval = setInterval(() => {
setMoney(m => m + (0.01 * autoClickers) + (0.1 * dimeSmiths));
}, 1000);
return () => clearInterval(interval);
}, [autoClickers, dimeSmiths]);
useEffect(() => {
if (money >= 0.25 && !autoClickerUnlocked) {
setAutoClickerUnlocked(true);
}
if (money >= 5 && !dimeSmitherUnlocked) {
setDimeSmitherUnlocked(true);
}
}, [money, autoClickerUnlocked, dimeSmitherUnlocked]);
const handleClick = () => {
setMoney(m => m + 0.01);
};
const buyAutoClicker = () => {
const cost = 0.25 * Math.pow(1.15, autoClickers);
if (money >= cost) {
setMoney(m => m - cost);
setAutoClickers(ac => ac + 1);
}
};
const buyDimeSmith = () => {
const cost = 5 * Math.pow(1.15, dimeSmiths);
if (money >= cost) {
setMoney(m => m - cost);
setDimeSmiths(ds => ds + 1);
}
};
const formatMoney = (amount: number) => {
return amount.toFixed(2);
};
return (
<div className="container">
<h1>💰 Money Clicker Game</h1>
<p>Current Money: ${formatMoney(money)}</p>
<button onClick={handleClick} className="click-button">Click to earn $0.01</button>
{autoClickerUnlocked && (
<button
onClick={buyAutoClicker}
className="upgrade-button"
disabled={money < 0.25 * Math.pow(1.15, autoClickers)}
>
Buy Auto-Clicker (${formatMoney(0.25 * Math.pow(1.15, autoClickers))})
</button>
)}
{dimeSmitherUnlocked && (
<button onClick={buyDimeSmith} className="upgrade-button" disabled={money < 5 * Math.pow(1.15, dimeSmiths)}>
Buy Dime-Smither (${formatMoney(5 * Math.pow(1.15, dimeSmiths))})
</button>
)}
{autoClickers > 0 && <p>Auto-Clickers: {autoClickers} (Earning ${formatMoney(0.01 * autoClickers)} per second)