how to make clicker game in HTML
<html style="font-size: 10px;font-family: Roboto, Arial, sans-serif;" lang="id-ID" system-icons="" typography="" typography-spacing="" standardized-themed-scrollbar=""><head>
<title>QWZXC|clicker game</title>
<style>
body {
background-color: black;
text-align: center;
}
h1 {
color: orange;
}
h2 {
color: white;
}
p {
color: white;
font-size: 1.2em;
}
img {
padding: 20px;
border: 3px solid grey;
border-radius: 10px;
}
img:hover {
border: 3px solid maroon;
}
</style>
</head>
<body>
<h1>QWZXC|clicker game</h1>
<p>Click the button to get a higher score!</p>
<p id="scoreText">Score: 0</p>
<button id="score">Click me!</button>
<h2>Store</h2>
<p>Clicker: 10 clicks</p>
<img id="buy" src="https://th.bing.com/th/id/OIP.4SvG0GMsFRM6KJez4DjukQHaLG?pid=ImgDet&rs=1" width="50px">
<p id="clicker">x2</p>
<p>Auto Clicker: 1000 clicks</p>
<img id="" src="https://th.bing.com/th/id/OIP.4SvG0GMsFRM6KJez4DjukQHaLG?pid=ImgDet&rs=1" width="50px" https:="" th.bing.com="" th="">
<p id="auto-clickers">x1</p><h3 id="">PRE ALPHA</h3>
<script>
let score = 0;
let clickers = 1;
let autoClickers = 0;
document.getElementById("score").addEventListener("click", function () {
score = score + clickers;
document.getElementById("scoreText").innerText = "Score: " + score;
});
document.getElementById("buy").addEventListener("click", function () {
if (score >= 10) {
clickers = clickers + 1;
score = score - 10;
document.getElementById("clicker").innerText = "x" + clickers;
document.getElementById("scoreText").innerText = "Score: " + score;
}
});
document.getElementById("buy-auto-clicker").addEventListener("click", function () {
if (score >= 1000) {
autoClickers = autoClickers + 1;
score = score - 1000;
document.getElementById("scoreText").innerText = "Score: " + score;
document.getElementById("auto-clickers").innerText = "x" + autoClickers;
setInterval(function () {
score = score + clickers;
document.getElementById("scoreText").innerText = "Score: " + score;
}, 1000);
}
});
</script>
</body></html>