Improve gameplay feel

golf-game.html

@@ -160,13 +160,15 @@
 
         /* Animation for ball movement */
         @keyframes hitAnimation {
-            0% { transform: translateX(0); }
+            0% { transform: translateX(0) translateY(0); }
-            50% { transform: translateX(100px) translateY(-50px); }
+            25% { transform: translateX(50px) translateY(-30px); }
+            50% { transform: translateX(100px) translateY(0); }
+            75% { transform: translateX(150px) translateY(-10px); }
             100% { transform: translateX(200px) translateY(0); }
         }
 
         .hit-animation {
-            animation: hitAnimation 1s ease-out;
+            animation: hitAnimation 2s ease-out;
         }
     </style>
 </head>
@@ -277,23 +279,73 @@
             gameState.distance = distance;
             gameState.money += Math.floor(distance / 2); // Earn money based on distance
             
-            // Update display
-            updateDisplay();
-            
             // Animate the ball
             animateBall(distance);
             
-            // Show result message
+            // Show result message with popup
-            showMessage(`You hit the ball ${distance} meters!`);
+            showResultPopup(distance);
+        }
 
-            // Generate new target for next round
+        // Disable hit button
-            setTimeout(generateNewTarget, 1000);
+        function disableHitButton() {
+            hitButton.disabled = true;
+            hitButton.style.opacity = '0.5';
+            hitButton.style.cursor = 'default';
+        }
+
+        // Enable hit button
+        function enableHitButton() {
+            hitButton.disabled = false;
+            hitButton.style.opacity = '1';
+            hitButton.style.cursor = 'pointer';
+        }
+
+        // Show result popup
+        function showResultPopup(distance) {
+            // Disable hit button while waiting for continue
+            disableHitButton();
+            
+            // Create popup element
+            const popup = document.createElement('div');
+            popup.id = 'resultPopup';
+            popup.innerHTML = `
+                <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+                            background-color: rgba(255, 255, 255, 0.95); padding: 30px; 
+                            border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
+                            text-align: center; z-index: 1000; border: 3px solid #2E8B57;">
+                    <h2>Shot Result</h2>
+                    <p style="font-size: 1.2em; margin: 10px 0;">Distance: <strong>${distance} meters</strong></p>
+                    <p style="font-size: 1.2em; margin: 10px 0;">Money Earned: <strong>$${Math.floor(distance / 2)}</strong></p>
+                    <button id="continueButton" style="background-color: #2E8B57; color: white; border: none; 
+                                padding: 12px 25px; font-size: 1.1em; border-radius: 5px; cursor: pointer; 
+                                margin-top: 20px;">Continue</button>
+                </div>
+            `;
+            
+            // Add popup to body
+            document.body.appendChild(popup);
+            
+            // Add event listener to continue button
+            document.getElementById('continueButton').addEventListener('click', function() {
+                // Remove popup
+                document.body.removeChild(popup);
+                
+                // Enable hit button for next shot
+                enableHitButton();
+                
+                // Update display
+                updateDisplay();
+                
+                // Generate new target for next round
+                generateNewTarget();
+            });
         }
 
         // Animate the ball movement
         function animateBall(distance) {
             // Reset ball position
             ballElement.style.left = '20px';
+            ballElement.style.bottom = '40px';
             
             // Calculate how far to move the ball (max 600px for visualization)
             const gameArea = document.querySelector('.game-area');
@@ -301,14 +353,45 @@
             const maxDistance = Math.min(distance, 200); // Cap at 200 meters for visualization
             const moveDistance = (maxDistance / 200) * (gameWidth - 50);
             
-            // Add animation class
+            // Create a more realistic animation with multiple phases
-            ballElement.classList.add('hit-animation');
+            ballElement.style.transition = 'none';
+            ballElement.style.transform = 'translate(0, 0)';
             
-            // Move the ball
+            // Phase 1: Initial hit (upward trajectory)
             setTimeout(() => {
-                ballElement.style.left = `${moveDistance}px`;
+                ballElement.style.transition = 'transform 0.5s ease-out';
-                ballElement.classList.remove('hit-animation');
+                ballElement.style.transform = `translate(${moveDistance * 0.3}px, -60px)`;
-            }, 100);
+            }, 10);
+            
+            // Phase 2: Fall down
+            setTimeout(() => {
+                ballElement.style.transition = 'transform 0.3s ease-in';
+                ballElement.style.transform = `translate(${moveDistance * 0.6}px, 0px)`;
+            }, 500);
+            
+            // Phase 3: Bounce
+            setTimeout(() => {
+                ballElement.style.transition = 'transform 0.2s ease-out';
+                ballElement.style.transform = `translate(${moveDistance * 0.7}px, -20px)`;
+            }, 800);
+            
+            setTimeout(() => {
+                ballElement.style.transition = 'transform 0.2s ease-in';
+                ballElement.style.transform = `translate(${moveDistance * 0.75}px, 0px)`;
+            }, 1000);
+            
+            // Phase 4: Roll to final position
+            setTimeout(() => {
+                ballElement.style.transition = 'transform 0.8s linear';
+                ballElement.style.transform = `translate(${moveDistance}px, 0px)`;
+            }, 1200);
+            
+            // Reset after animation completes
+            setTimeout(() => {
+                // Reset to starting position
+                ballElement.style.transition = 'none';
+                ballElement.style.transform = 'translate(0, 0)';
+            }, 2000);
         }
 
         // Show upgrades panel