diff --git a/golf-game.html b/golf-game.html
index ab3c4bc..3128552 100644
--- a/golf-game.html
+++ b/golf-game.html
@@ -160,13 +160,15 @@
/* Animation for ball movement */
@keyframes hitAnimation {
- 0% { transform: translateX(0); }
- 50% { transform: translateX(100px) translateY(-50px); }
+ 0% { transform: translateX(0) translateY(0); }
+ 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;
}
@@ -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
- showMessage(`You hit the ball ${distance} meters!`);
+ // Show result message with popup
+ showResultPopup(distance);
+ }
+
+ // Disable hit button
+ 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();
- // Generate new target for next round
- setTimeout(generateNewTarget, 1000);
+ // Create popup element
+ const popup = document.createElement('div');
+ popup.id = 'resultPopup';
+ popup.innerHTML = `
+
+
Shot Result
+
Distance: ${distance} meters
+
Money Earned: $${Math.floor(distance / 2)}
+
+
+ `;
+
+ // 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
- ballElement.classList.add('hit-animation');
+ // Create a more realistic animation with multiple phases
+ 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.classList.remove('hit-animation');
- }, 100);
+ ballElement.style.transition = 'transform 0.5s ease-out';
+ ballElement.style.transform = `translate(${moveDistance * 0.3}px, -60px)`;
+ }, 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