Spaces:

BitDown
/

ajnet-jeu

Running

App Files Files Community

PAUTREL Johan commited on Apr 11

Commit

ddee145

verified ·

1 Parent(s): 7d0e83d

Add 1 files

Browse files

Files changed (1) hide show

index.html +88 -14

index.html CHANGED Viewed

@@ -88,6 +88,11 @@
             opacity: 0;
             animation: fadeIn 0.5s forwards, shake 0.5s forwards;
         }
     </style>
 </head>
 <body class="bg-gray-100 font-sans">
@@ -100,6 +105,9 @@
                     <h1 class="text-2xl font-bold">AJNET PRO</h1>
                 </div>
                 <div class="flex items-center space-x-4">
                     <div id="combo-counter" class="hidden bg-blue-800 px-3 py-1 rounded-full font-bold text-sm">
                         Combo x<span id="combo">0</span>
                     </div>
@@ -169,6 +177,52 @@
                     </div>
                 </div>
             </div>
         </main>
         <!-- Footer -->
@@ -187,14 +241,14 @@
         let timeInterval;
         let gameActive = false;
         let stainsCleaned = 0;
-        let maxStains = 10; // Reduced to make it harder
-        let stainSpeed = 1500; // Faster initial spawn
         let lastCleanTime = 0;
         let combo = 0;
         let maxCombo = 0;
         let comboTimeout;
-        let movingStainChance = 0.4; // 40% chance for moving stains
-        let penaltyStainChance = 0.2; // 20% chance for penalty stains
         let stainCount = 0;
         // DOM elements
@@ -213,6 +267,10 @@
         const shareBtn = document.getElementById('share-btn');
         const comboCounter = document.getElementById('combo-counter');
         const comboDisplay = document.getElementById('combo');
         // Stain types with different colors, sizes and behaviors
         const stainTypes = [
@@ -232,8 +290,8 @@
             timeLeft = 60;
             level = 1;
             stainsCleaned = 0;
-            maxStains = 10;
-            stainSpeed = 1500;
             combo = 0;
             maxCombo = 0;
             stainCount = 0;
@@ -252,6 +310,7 @@
             gameActive = true;
             startScreen.classList.add('hidden');
             gameOverScreen.classList.add('hidden');
             // Start timers
             timeInterval = setInterval(updateTimer, 1000);
@@ -261,16 +320,20 @@
             gameInterval = setInterval(checkGameState, 500);
         }
-        // Create a new stain
         function createStain() {
             if (!gameActive || stainCount >= maxStains) return;
             const gameAreaRect = gameArea.getBoundingClientRect();
-            const maxX = gameAreaRect.width - 100;
-            const maxY = gameAreaRect.height - 100;
-            const x = Math.floor(Math.random() * maxX);
-            const y = Math.floor(Math.random() * maxY);
             // Determine if this should be a moving or penalty stain
             let stainTypeIndex = Math.floor(Math.random() * (stainTypes.length - 2)); // Default to normal stains
@@ -419,9 +482,9 @@
             // Increase difficulty
             maxStains = Math.min(maxStains + 2, 20); // Cap at 20 stains
-            stainSpeed = Math.max(stainSpeed - 200, 500); // Faster spawn but not too fast
-            movingStainChance = Math.min(movingStainChance + 0.05, 0.6); // More moving stains
-            penaltyStainChance = Math.min(penaltyStainChance + 0.02, 0.3); // More penalty stains
             // Update display
             updateLevel();
@@ -509,6 +572,17 @@
         shareBtn.addEventListener('click', () => {
             alert(`Partagez votre score de ${score} points (Niveau ${level}) avec vos amis!`);
         });
         // Initialize game on load
         initGame();

             opacity: 0;
             animation: fadeIn 0.5s forwards, shake 0.5s forwards;
         }
+        .rules-modal {
+            max-height: 80vh;
+            overflow-y: auto;
+        }
     </style>
 </head>
 <body class="bg-gray-100 font-sans">
                     <h1 class="text-2xl font-bold">AJNET PRO</h1>
                 </div>
                 <div class="flex items-center space-x-4">
+                    <button id="rules-btn" class="bg-blue-800 px-3 py-1 rounded-full font-bold text-sm hover:bg-blue-700 transition">
+                        <i class="fas fa-info-circle mr-1"></i>Règles
+                    </button>
                     <div id="combo-counter" class="hidden bg-blue-800 px-3 py-1 rounded-full font-bold text-sm">
                         Combo x<span id="combo">0</span>
                     </div>
                     </div>
                 </div>
             </div>
+            <!-- Rules Modal -->
+            <div id="rules-modal" class="modal absolute inset-0 bg-blue-600 bg-opacity-90 hidden flex-col items-center justify-center text-white">
+                <div class="rules-modal bg-blue-800 p-6 rounded-xl max-w-md mx-4">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-2xl font-bold"><i class="fas fa-book mr-2"></i>Règles du Jeu</h2>
+                        <button id="close-rules-btn" class="text-white hover:text-blue-200 text-2xl">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="bg-blue-700 p-4 rounded-lg">
+                            <h3 class="font-bold text-lg mb-2"><i class="fas fa-broom mr-2"></i>Objectif</h3>
+                            <p>Nettoyer le maximum de taches en 60 secondes pour marquer des points.</p>
+                        </div>
+                        <div class="bg-blue-700 p-4 rounded-lg">
+                            <h3 class="font-bold text-lg mb-2"><i class="fas fa-star mr-2"></i>Points</h3>
+                            <ul class="list-disc pl-5 space-y-1">
+                                <li>Taches normales: 1-3 points selon la taille</li>
+                                <li>Taches mobiles: 2-4 points (plus difficiles à attraper)</li>
+                                <li>Bonus de combo: +1 point par niveau de combo</li>
+                            </ul>
+                        </div>
+                        <div class="bg-blue-700 p-4 rounded-lg">
+                            <h3 class="font-bold text-lg mb-2"><i class="fas fa-skull mr-2"></i>Pénalités</h3>
+                            <ul class="list-disc pl-5 space-y-1">
+                                <li>Taches noires: -3 points</li>
+                                <li>Taches rouges: -5 points</li>
+                            </ul>
+                        </div>
+                        <div class="bg-blue-700 p-4 rounded-lg">
+                            <h3 class="font-bold text-lg mb-2"><i class="fas fa-bolt mr-2"></i>Combo</h3>
+                            <p>Nettoyer plusieurs taches rapidement augmente votre combo (max x10). Le combo se réinitialise après 1 seconde sans nettoyer de tache.</p>
+                        </div>
+                        <div class="bg-blue-700 p-4 rounded-lg">
+                            <h3 class="font-bold text-lg mb-2"><i class="fas fa-level-up-alt mr-2"></i>Niveaux</h3>
+                            <p>Nettoyer 10 taches vous fait passer au niveau suivant. La difficulté augmente avec plus de taches mobiles et pénalisantes.</p>
+                        </div>
+                    </div>
+                    <div class="mt-6 text-center">
+                        <button id="start-from-rules-btn" class="btn-pulse bg-white text-blue-600 font-bold py-3 px-8 rounded-full text-lg hover:bg-blue-100 transition">
+                            COMMENCER
+                        </button>
+                    </div>
+                </div>
+            </div>
         </main>
         <!-- Footer -->
         let timeInterval;
         let gameActive = false;
         let stainsCleaned = 0;
+        let maxStains = 12; // Increased max stains
+        let stainSpeed = 800; // Much faster spawn rate
         let lastCleanTime = 0;
         let combo = 0;
         let maxCombo = 0;
         let comboTimeout;
+        let movingStainChance = 0.5; // 50% chance for moving stains
+        let penaltyStainChance = 0.25; // 25% chance for penalty stains
         let stainCount = 0;
         // DOM elements
         const shareBtn = document.getElementById('share-btn');
         const comboCounter = document.getElementById('combo-counter');
         const comboDisplay = document.getElementById('combo');
+        const rulesBtn = document.getElementById('rules-btn');
+        const rulesModal = document.getElementById('rules-modal');
+        const closeRulesBtn = document.getElementById('close-rules-btn');
+        const startFromRulesBtn = document.getElementById('start-from-rules-btn');
         // Stain types with different colors, sizes and behaviors
         const stainTypes = [
             timeLeft = 60;
             level = 1;
             stainsCleaned = 0;
+            maxStains = 12;
+            stainSpeed = 800;
             combo = 0;
             maxCombo = 0;
             stainCount = 0;
             gameActive = true;
             startScreen.classList.add('hidden');
             gameOverScreen.classList.add('hidden');
+            rulesModal.classList.add('hidden');
             // Start timers
             timeInterval = setInterval(updateTimer, 1000);
             gameInterval = setInterval(checkGameState, 500);
         }
+        // Create a new stain (now more centered)
         function createStain() {
             if (!gameActive || stainCount >= maxStains) return;
             const gameAreaRect = gameArea.getBoundingClientRect();
+            const centerX = gameAreaRect.width / 2;
+            const centerY = gameAreaRect.height / 2;
+            // Create stains more towards the center (within 60% of screen centered)
+            const areaWidth = gameAreaRect.width * 0.6;
+            const areaHeight = gameAreaRect.height * 0.6;
+            const x = centerX - (areaWidth / 2) + Math.random() * areaWidth;
+            const y = centerY - (areaHeight / 2) + Math.random() * areaHeight;
             // Determine if this should be a moving or penalty stain
             let stainTypeIndex = Math.floor(Math.random() * (stainTypes.length - 2)); // Default to normal stains
             // Increase difficulty
             maxStains = Math.min(maxStains + 2, 20); // Cap at 20 stains
+            stainSpeed = Math.max(stainSpeed - 100, 400); // Even faster spawn
+            movingStainChance = Math.min(movingStainChance + 0.05, 0.7); // More moving stains
+            penaltyStainChance = Math.min(penaltyStainChance + 0.02, 0.35); // More penalty stains
             // Update display
             updateLevel();
         shareBtn.addEventListener('click', () => {
             alert(`Partagez votre score de ${score} points (Niveau ${level}) avec vos amis!`);
         });
+        // Rules modal
+        rulesBtn.addEventListener('click', () => {
+            rulesModal.classList.remove('hidden');
+        });
+        closeRulesBtn.addEventListener('click', () => {
+            rulesModal.classList.add('hidden');
+        });
+        startFromRulesBtn.addEventListener('click', startGame);
         // Initialize game on load
         initGame();