Akamaru/PonyWave-Tools
1
0
Fork 0
Code Issues

Emoji Rain: Komplett überarbeitet

Browse Source
This commit is contained in:
Akamaru 2025-03-20 15:18:34 +01:00
parent e13009e5ad
commit 63d6c4a516
2 changed files with 101 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
emoji/icon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

131
emoji/index.html
View File

@ -1,94 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Gravity and Collision</title>
<meta property="og:title" content="Emoji Gravity and Collision">
<title>Emoji Rain | PonyWave Tools</title>
<link rel="icon" href="https://tools.ponywave.de/emoji/icon.jpg">
<meta property="og:title" content="Emoji Rain | PonyWave Tools">
<meta property="og:description" content="Spiele mit Emojis und der Schwerkraft">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tools.ponywave.de/emoji">
<meta property="og:image" content="https://tools.ponywave.de/emoji/icon.jpg">
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="emoji"></script>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
min-height: 100vh;
position: relative;
}
.emoji {
position: absolute;
font-size: 24px;
user-select: none;
}
.info {
position: fixed;
top: 20px;
left: 0;
right: 0;
text-align: center;
color: #333;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
z-index: 100;
user-select: none;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem 0;
color: #333;
font-size: 0.9rem;
text-align: center;
border-top: 1px solid #ddd;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
user-select: none;
height: 40px;
}
footer a {
color: #4CAF50;
text-decoration: none;
transition: color 0.3s;
}
footer a:hover {
text-decoration: underline;
}
.heart {
color: #e74c3c;
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="info">Klicke oder ziehe mit der Maus, um Emojis zu erzeugen!</div>
<footer>
<p>
<a href="https://tools.ponywave.de/">Zurück zur Startseite</a> |
&copy; <span id="current-year"></span> Akamaru | Made with <span class="heart">❤️</span> by Claude
</p>
</footer>
<script>
const emojis = ['😀', '😂', '😊', '😉', '😎', '😍', '🤔', '😜', '🥳', '🤩'];
let isMouseDown = false;
function getRandomEmoji() {
return emojis[Math.floor(Math.random() * emojis.length)];
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
class Emoji {
constructor(x, y) {
this.element = document.createElement('div');
this.element.className = 'emoji';
this.element.textContent = getRandomEmoji();
document.body.appendChild(this.element);
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 2; // Random horizontal velocity
this.vy = (Math.random() - 0.5) * 2; // Random vertical velocity
this.ax = 0;
this.ay = 0.1; // Gravity acceleration
this.updatePosition();
}
updatePosition() {
this.vx += this.ax;
this.vy += this.ay;
this.x += this.vx;
this.y += this.vy;
if (this.y + this.element.offsetHeight > window.innerHeight) {
this.y = window.innerHeight - this.element.offsetHeight;
// 80px statt 60px, damit die Emojis nicht hinter dem Footer verschwinden
if (this.y + this.element.offsetHeight > window.innerHeight - 80) {
this.y = window.innerHeight - this.element.offsetHeight - 80;
this.vy *= -0.7; // Bounce effect
}
if (this.x + this.element.offsetWidth > window.innerWidth || this.x < 0) {
this.vx *= -0.7; // Bounce effect
}
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
requestAnimationFrame(() => this.updatePosition());
}
}
document.addEventListener('click', (event) => {
const count = getRandomInt(3, 7);
function createEmojis(x, y) {
const count = getRandomInt(2, 4);
for (let i = 0; i < count; i++) {
new Emoji(event.clientX, event.clientY);
new Emoji(x, y);
}
}
// Klick-Event
document.addEventListener('click', (event) => {
createEmojis(event.clientX, event.clientY);
});
// Maus-Zieh-Events
document.addEventListener('mousedown', () => {
isMouseDown = true;
});
document.addEventListener('mousemove', (event) => {
if (isMouseDown) {
// Bei Mausbewegung mit gedrückter Maustaste weniger Emojis erzeugen
if (Math.random() < 0.2) {
createEmojis(event.clientX, event.clientY);
}
}
});
document.addEventListener('mouseup', () => {
isMouseDown = false;
});
document.addEventListener('mouseleave', () => {
isMouseDown = false;
});
// Jahr für das Copyright aktualisieren
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</body>
</html>
<script>
</script>
</body>
</html>
</html>