JavaScript-Cookie-Clicker/web.html at main · seninet/JavaScript-Cookie-Clicker · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Cookie Clicker</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style2.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="container">
        <!--MODAL TT-->
        <div id="welcome" class="modal">
            <div class="modal-content">
                <h1>WELCOME TO THE COOKIE CLICKER GAME !</h1>
                <button id="play" class="play">PLAY</button>
                <img class="welcomeimg" src="https://i.gifer.com/9E93.gif" />
            </div>
        </div>
        <div class="row-1">
            <div class="row-11">
                <img src="/JavaScript-Cookie-Clicker/images/CookieClicker.png" id="logo" alt="cookie clicker logo" />
            </div>

            <!-- audio button -->
            <div class="row-12">
                <audio src="audio.mp3" id="myAudio"></audio>
                <button onClick="playAudio()">PlaySoundAudio</button>
                <button onClick="pauseAudio()">Pause Audio</button>
            </div>
        </div>
        <!-- instructions-->
        <div class="colonne-1">
            <div class="instrbox">
                <h3>Instructions:</h3>
                <p class="instructions">
                    Everytime you click on the cookie you will get 1 point. I you want to increase your score faster you can use some of your points (displayed in score box) to buy improvements (multiplier, bonus or autoclicker).
                </p>
                <p class="instructions">
                    <b style="font-size: 18px"> Multiplier:</b> will multiply each click by the number displayed in the button. The first time you buy it will be multiplied by 3. Then the price will increase and so will the multiplier.
                </p>
                <p class="instructions">
                    <b style="font-size: 18px"> Auto-clicker: </b>will allow you to increase your score without you clicking. It starts at 1clic/second, then 2 ...
                </p>
                <p class="instructions">
                    <b style="font-size: 18px"> Bonus: </b>will allow you to increase your score by 200% everytime you click on the cookie during 30seconds.
                </p>
            </div>
        </div>

        <div class="colonne-2">
            <!--Update -->
            <div class="update">
                <p id="currentpersecondcookies"></p>
                <p id="currentmultiplier"></p>
            </div>
            <!--image cookie -->
            <div class="centerimage">
                <button type="button" id="imagebtn" data-min="0">
            <img
              id="image"
              src="/JavaScript-Cookie-Clicker/images/cookie1.png"
              alt="un cookie"
            />
          </button>
            </div>
            <!-- Score box-->

            <div class="popup">
                <span class="popuptext" id="myPopup">You don't have enough points to buy this improvement! !</span
          >
        </div>
        <!-- Score box-->
        <div class="col-s-12 col-3">
          <h3 class="score">Score:</h3>
          <input type="text" name="scorebox" id="counter" value="0" min="0" />
        </div>
      </div>

      <div class="colonne-3">
        <!--3 buttons -->

        <h3>Buy improvements:</h3>
        <div class="col-s-12 col-3">
          <button type="button" id="btn-1" data-min="10">
            <p>Multiplier</p>
            <p id="amountmultiplier">your clicks x3</p>
            <p id="costmultiplier">30 pts</p>
          </button>
        </div>
        <div class="col-s-12 col-3">
          <button type="button" id="btn-2" data-min="10">
            <p>Bonus</p>
            <p id="timer">0.30</p>
            <p id="bonuscost">10 pts</p>
          </button>
        </div>
        <div class="col-s-12 col-3">
          <button type="button" id="btn-3" data-min="10">
            <p>Auto-clicker</p>
            <p id="persecondcookies">1 point(s)/second</p>
            <p id="costautoclick">20 pts</p>
          </button>
        </div>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>