Improve gameplay feel
This commit is contained in:
+98
-15
@@ -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;
|
||||
}
|
||||
</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
|
||||
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();
|
||||
|
||||
// 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
|
||||
setTimeout(generateNewTarget, 1000);
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user