2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Floating Particles

Browse Source
This commit is contained in:
Evelyn Sucitro 2025-12-02 22:54:15 +07:00
parent 79a0cfc00f
commit 3d57de6a93
3 changed files with 115 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
2048.css
View File

@ -1200,6 +1200,70 @@ h1 {
100% { transform: translateY(-45px) translateX(-18px); } 100% { transform: translateY(-45px) translateX(-18px); }
} }
/* Floating Particles from Bottom */
.floating-particles {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0; /* Di bawah semua elemen game */
}
.floating-particle {
position: absolute;
bottom: -20px;
width: 8px;
height: 8px;
background: rgba(0, 234, 255, 0.6);
border-radius: 50%;
filter: blur(1px);
box-shadow: 0 0 15px currentColor;
animation: floatUp linear infinite;
}
@keyframes floatUp {
0% {
transform: translateY(0) translateX(0) scale(0.5);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-100vh) translateX(var(--drift, 0)) scale(1.2);
opacity: 0;
}
}
/* Different particle colors */
.floating-particle.cyan {
background: rgba(0, 234, 255, 0.7);
box-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
}
.floating-particle.pink {
background: rgba(255, 0, 255, 0.6);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.7);
}
.floating-particle.purple {
background: rgba(200, 100, 255, 0.6);
box-shadow: 0 0 20px rgba(200, 100, 255, 0.7);
}
.floating-particle.green {
background: rgba(0, 255, 200, 0.6);
box-shadow: 0 0 20px rgba(0, 255, 200, 0.7);
}
.floating-particle.orange {
background: rgba(255, 170, 0, 0.6);
box-shadow: 0 0 20px rgba(255, 170, 0, 0.7);
}
.starfield { .starfield {
position: fixed; position: fixed;
inset: 0; inset: 0;

2
2048.html
View File

@ -15,6 +15,7 @@
<body> <body>
<!-- Background Effects --> <!-- Background Effects -->
<div class="particles" aria-hidden="true"></div> <div class="particles" aria-hidden="true"></div>
<div class="floating-particles" id="floating-particles" aria-hidden="true"></div>
<div class="starfield" aria-hidden="true"></div> <div class="starfield" aria-hidden="true"></div>
<div class="cursor-light" aria-hidden="true"></div> <div class="cursor-light" aria-hidden="true"></div>
@ -381,6 +382,7 @@
<script src="2048.js"></script> <script src="2048.js"></script>
<script src="Audio_2048.js"></script> <script src="Audio_2048.js"></script>
<script src="Visual_Effects_2048.js"></script> <script src="Visual_Effects_2048.js"></script>
<script src="Floating_Particles_2048.js"></script>
<script src="User_Interface_2048.js"></script> <script src="User_Interface_2048.js"></script>
<script src="2048_Logic.js"></script> <script src="2048_Logic.js"></script>
<script src="2048_Controls.js"></script> <script src="2048_Controls.js"></script>

48
Floating_Particles_2048.js Normal file
View File

@ -0,0 +1,48 @@
// Floating Particles System - Particles rising from bottom
(function() {
const container = document.getElementById('floating-particles');
if (!container) return;
const particleColors = ['cyan', 'pink', 'purple', 'green', 'orange'];
const particleCount = 25; // Number of particles
function createParticle() {
const particle = document.createElement('div');
particle.className = `floating-particle ${particleColors[Math.floor(Math.random() * particleColors.length)]}`;
// Random horizontal position
const leftPos = Math.random() * 100;
particle.style.left = leftPos + '%';
// Random drift amount (horizontal movement during float)
const drift = (Math.random() - 0.5) * 150; // -75px to +75px
particle.style.setProperty('--drift', drift + 'px');
// Random animation duration (slower = more dramatic)
const duration = 8 + Math.random() * 10; // 8-18 seconds
particle.style.animationDuration = duration + 's';
// Random delay for staggered effect
const delay = Math.random() * 5;
particle.style.animationDelay = delay + 's';
// Random size variation
const size = 6 + Math.random() * 8; // 6-14px
particle.style.width = size + 'px';
particle.style.height = size + 'px';
container.appendChild(particle);
// Remove and recreate after animation completes
setTimeout(() => {
particle.remove();
createParticle();
}, (duration + delay) * 1000);
}
// Initialize particles
for (let i = 0; i < particleCount; i++) {
// Stagger initial creation
setTimeout(() => createParticle(), i * 200);
}
})();