Add 1 files

index.html

@@ -29,18 +29,11 @@
             50% { transform: translateY(-10px); }
         }
         
-        @keyframes moveRandom {
-            0% { transform: translate(0, 0); }
-            25% { transform: translate(100px, 80px); }
-            50% { transform: translate(50px, -50px); }
-            75% { transform: translate(-80px, 30px); }
-            100% { transform: translate(0, 0); }
-        }
-        
         .stain {
             animation: fadeIn 0.3s ease-in;
             transition: transform 0.2s;
             cursor: pointer;
+            position: absolute;
         }
         
         .stain:hover {
@@ -48,11 +41,33 @@
         }
         
         .moving-stain {
-            animation: moveRandom 3s linear infinite;
+            animation: moveRandom 4s linear infinite;
+        }
+        
+        @keyframes moveRandom {
+            0% { 
+                transform: translate(0, 0);
+                left: var(--start-x);
+                top: var(--start-y);
+            }
+            25% { 
+                transform: translate(calc(var(--move-x1) * 1px), calc(var(--move-y1) * 1px));
+            }
+            50% { 
+                transform: translate(calc(var(--move-x2) * 1px), calc(var(--move-y2) * 1px));
+            }
+            75% { 
+                transform: translate(calc(var(--move-x3) * 1px), calc(var(--move-y3) * 1px));
+            }
+            100% { 
+                transform: translate(0, 0);
+            }
         }
         
         .game-container {
             background-image: linear-gradient(to bottom, #f0f9ff, #e0f2fe);
+            position: relative;
+            overflow: hidden;
         }
         
         .progress-bar {
@@ -320,27 +335,28 @@
             gameInterval = setInterval(checkGameState, 500);
         }
 
-        // Create a new stain (now covering the whole screen)
+        // Create a new stain with full screen movement
         function createStain() {
             if (!gameActive) return;
             
             const gameAreaRect = gameArea.getBoundingClientRect();
-            const x = Math.random() * (gameAreaRect.width - 100);
-            const y = Math.random() * (gameAreaRect.height - 100);
+            const maxX = gameAreaRect.width - 100;
+            const maxY = gameAreaRect.height - 100;
             
-            // Determine if this should be a moving or penalty stain
+            // Position aléatoire initiale
+            const startX = Math.random() * maxX;
+            const startY = Math.random() * maxY;
+            
+            // Determine stain type
             let stainTypeIndex;
             
-            // Prevent too many penalty stains (max 1 penalty stain for every 3 normal stains)
             if (penaltyStainCount >= Math.ceil(stainCount / 3) && Math.random() < penaltyStainChance) {
                 stainTypeIndex = Math.floor(Math.random() * (stainTypes.length - 2));
             } else {
-                // Chance for moving stain (higher now)
                 if (Math.random() < movingStainChance) {
                     stainTypeIndex = Math.floor(Math.random() * (stainTypes.length - 2));
                 }
                 
-                // Chance for penalty stain
                 if (Math.random() < penaltyStainChance) {
                     stainTypeIndex = Math.floor(Math.random() * 2) + (stainTypes.length - 2);
                 } else {
@@ -351,26 +367,46 @@
             const stainType = stainTypes[stainTypeIndex];
             
             const stain = document.createElement('div');
-            stain.className = `stain rounded-full absolute ${stainType.class} ${stainType.size}`;
-            stain.style.left = `${x}px`;
-            stain.style.top = `${y}px`;
-            
-            // Add moving class if needed (more stains will move now)
+            stain.className = `stain rounded-full ${stainType.class} ${stainType.size}`;
+            stain.style.setProperty('--start-x', `${startX}px`);
+            stain.style.setProperty('--start-y', `${startY}px`);
+            
+            // Définir des mouvements aléatoires plus grands
+            const moveX1 = (Math.random() * maxX - startX) * 0.5;
+            const moveY1 = (Math.random() * maxY - startY) * 0.5;
+            const moveX2 = (Math.random() * maxX - startX) * 0.5;
+            const moveY2 = (Math.random() * maxY - startY) * 0.5;
+            const moveX3 = (Math.random() * maxX - startX) * 0.5;
+            const moveY3 = (Math.random() * maxY - startY) * 0.5;
+            
+            stain.style.setProperty('--move-x1', moveX1);
+            stain.style.setProperty('--move-y1', moveY1);
+            stain.style.setProperty('--move-x2', moveX2);
+            stain.style.setProperty('--move-y2', moveY2);
+            stain.style.setProperty('--move-x3', moveX3);
+            stain.style.setProperty('--move-y3', moveY3);
+            
+            // Add moving class if needed (now most stains will move)
             if (stainType.moving || Math.random() < movingStainChance) {
                 stain.classList.add('moving-stain');
+                // Make movement faster for moving stains
+                stain.style.animationDuration = `${3 + Math.random() * 2}s`;
             }
             
             // Add data attributes
             stain.dataset.points = stainType.points;
             stain.dataset.penalty = stainType.penalty;
             
+            // Position initiale
+            stain.style.left = `${startX}px`;
+            stain.style.top = `${startY}px`;
+            
             // Add click event
             stain.addEventListener('click', cleanStain);
             
             gameArea.appendChild(stain);
             stainCount++;
             
-            // Track penalty stains
             if (stainType.penalty) {
                 penaltyStainCount++;
             }
@@ -384,16 +420,13 @@
             const points = parseInt(stain.dataset.points);
             const isPenalty = stain.dataset.penalty === 'true';
             
-            // Remove stain
             stain.remove();
             stainCount--;
             
-            // Update penalty stain count
             if (isPenalty) {
                 penaltyStainCount = Math.max(0, penaltyStainCount - 1);
             }
             
-            // Update combo
             const now = Date.now();
             if (now - lastCleanTime < 1000) {
                 combo++;
@@ -408,7 +441,6 @@
             }
             lastCleanTime = now;
             
-            // Update score
             if (isPenalty) {
                 score += points;
                 showPenaltyEffect(stain, points);
@@ -421,7 +453,6 @@
             
             updateScore();
             
-            // Check level up
             if (stainsCleaned >= level * 10) {
                 levelUp();
             }
@@ -485,14 +516,12 @@
             level++;
             stainsCleaned = 0;
             
-            // Increase difficulty
-            stainSpeed = Math.max(stainSpeed - 100, 300); // Faster spawn (min 300ms)
-            movingStainChance = Math.min(movingStainChance + 0.05, 0.8); // More moving stains
-            penaltyStainChance = Math.min(penaltyStainChance + 0.02, 0.4); // More penalty stains
+            stainSpeed = Math.max(stainSpeed - 100, 300);
+            movingStainChance = Math.min(movingStainChance + 0.05, 0.8);
+            penaltyStainChance = Math.min(penaltyStainChance + 0.02, 0.4);
             
             updateLevel();
             
-            // Show level up effect
             const levelUpEffect = document.createElement('div');
             levelUpEffect.className = 'absolute inset-0 flex items-center justify-center';
             levelUpEffect.innerHTML = `