97 lines
3.1 KiB
HTML
97 lines
3.1 KiB
HTML
<!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> |