cookie clicker

2025-04-23 21:26:17 +02:00
parent 75aca82533
commit 74cd5da810
8 changed files with 487 additions and 2 deletions
--- a/programmieren/spiele/cookie-klicker/cookie-clicker.html
+++ b/programmieren/spiele/cookie-klicker/cookie-clicker.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Cookie Clicker</title>
+  <style>
+    body {
+      text-align: center;
+      font-family: sans-serif;
+      color: rgb(255, 255, 255);
+      padding-top: 50px;
+      background:  #3498db;
+    }
+
+    #score, #highscore {
+      font-size: 2em;
+      margin-bottom: 10px;
+    }
+
+    #clickTarget {
+      width: 150px;
+      height: 150px;
+      cursor: pointer;
+      transition: transform 0.1s ease;
+      display: inline-block;
+    }
+    #clickTargetreversed {
+        width: 150px;
+        height: 150px;
+        cursor: pointer;
+        transition: transform 0.1s ease;
+        display: inline-block;
+      }
+
+    #clickTarget:active {
+      transform: scale(0.80);
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    #clickTarget.clicked {
+        filter: brightness(1.5);
+      }
+      
+  </style>
+</head>
+<body>
+
+  <div id="score">Score: 0</div>
+  <div id="highscore">Highscore: 0</div>
+
+  <!--  Klickbarer SVG-Button -->
+  <div id="clickTarget" onclick="addPoint()">
+    <svg id="cookie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path fill="#ffc23d" d="M247.2 17c-22.1-3.1-44.6 .9-64.4 11.4l-74 39.5C89.1 78.4 73.2 94.9 63.4 115L26.7 190.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9L388.9 57.5c-16.1-15.6-36.6-25.6-58.7-28.7L247.2 17zM208 144a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM144 336a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm224-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
+    </svg>
+    <audio id="clickSound" src="crunchy-bite-95979.mp3"></audio>
+  </div>
+  
+
+  <script>
+    let score = 0;
+    let highscore = localStorage.getItem('highscore') || 0;
+
+    document.getElementById('highscore').textContent = "Highscore: " + highscore;
+
+    function addPoint() {
+        score++;
+        document.getElementById('score').textContent = "Punkte: " + score;
+      
+        if (score > highscore) {
+          highscore = score;
+          localStorage.setItem('highscore', highscore);
+          document.getElementById('highscore').textContent = "Highscore: " + highscore;
+        }
+            
+        if (score % 100 == 0) {
+            const cookie = document.getElementById('clickTarget');
+            cookie.classList.add('clicked');
+            setTimeout(() => cookie.classList.remove('clicked'), 333);
+                       
+          }
+              
+        //  Sound abspielen
+        const clickSound = document.getElementById('clickSound');
+        clickSound.currentTime = 0; // damit der Sound bei mehreren schnellen Klicks neu startet
+        clickSound.play();
+      }
+      
+  </script>
+
+</body>
+<footer>Sound Effect by <a href="https://pixabay.com/users/freesound_community-46691455/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=95979">freesound_community</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=95979">Pixabay</a></footer>
+</html>