<!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>