how to make clicker game in html

Solutions on MaxInterview for how to make clicker game in html by the best coders in the world

showing results for - "how to make clicker game in html"
11 Jan 2020
1<html style="font-size: 10px;font-family: Roboto, Arial, sans-serif;" lang="id-ID" system-icons="" typography="" typography-spacing="" standardized-themed-scrollbar=""><head>
2    
3    <title>QWZXC|clicker game</title>
4    <style>
5        body {
6            background-color: black;
7            text-align: center;
8        }
9
10        h1 {
11            color: orange;
12        }
13
14        h2 {
15            color: white;
16        }
17
18        p {
19            color: white;
20            font-size: 1.2em;
21        }
22
23        img {
24            padding: 20px;
25            border: 3px solid grey;
26            border-radius: 10px;
27        }
28
29        img:hover {
30            border: 3px solid maroon;
31        }
32    </style>
33</head>
34
35<body>
36
37    <h1>QWZXC|clicker game</h1>
38
39    <p>Click the button to get a higher score!</p>
40
41    <p id="scoreText">Score: 0</p>
42
43    <button id="score">Click me!</button>
44
45    <h2>Store</h2>
46    <p>Clicker: 10 clicks</p>
47    <img id="buy" src="https://th.bing.com/th/id/OIP.4SvG0GMsFRM6KJez4DjukQHaLG?pid=ImgDet&amp;rs=1" width="50px">
48    <p id="clicker">x2</p>
49
50    <p>Auto Clicker: 1000 clicks</p>
51    <img id="" src="https://th.bing.com/th/id/OIP.4SvG0GMsFRM6KJez4DjukQHaLG?pid=ImgDet&amp;rs=1" width="50px" https:="" th.bing.com="" th="">
52    <p id="auto-clickers">x1</p><h3 id="">PRE ALPHA</h3>
53
54
55    <script>
56
57        let score = 0;
58        let clickers = 1;
59        let autoClickers = 0;
60
61        document.getElementById("score").addEventListener("click", function () {
62            score = score + clickers;
63            document.getElementById("scoreText").innerText = "Score: " + score;
64        });
65
66        document.getElementById("buy").addEventListener("click", function () {
67            if (score >= 10) {
68                clickers = clickers + 1;
69                score = score - 10;
70                document.getElementById("clicker").innerText = "x" + clickers;
71                document.getElementById("scoreText").innerText = "Score: " + score;
72            }
73        });
74
75        document.getElementById("buy-auto-clicker").addEventListener("click", function () {
76            if (score >= 1000) {
77                autoClickers = autoClickers + 1;
78                score = score - 1000;
79                document.getElementById("scoreText").innerText = "Score: " + score;
80                document.getElementById("auto-clickers").innerText = "x" + autoClickers;
81
82                setInterval(function () {
83                    score = score + clickers;
84                    document.getElementById("scoreText").innerText = "Score: " + score;
85                }, 1000);
86            }
87        });
88
89    </script>
90
91
92
93</body></html>