commit b1f93fc8524bf7df1bfbcecfb510f75346070380 Author: David Bowerman Date: Sat Aug 1 12:46:28 2026 -0400 initial diff --git a/golf-game.html b/golf-game.html new file mode 100644 index 0000000..ab3c4bc --- /dev/null +++ b/golf-game.html @@ -0,0 +1,360 @@ + + + + + + Simple Golf Game + + + +

Simple Golf Game

Distance: 0m

Power: 50

Accuracy: 50

Money: $0

+ +

+ + +

+ + + +

+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..957450a --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + Simple Golf Game + + + +

Simple Golf Game

Distance: 0m

Power: 50

Accuracy: 50

Money: $0

+ +

+ + +

+ +

Upgrades:

+ Power Upgrade (+5): + +

+ Accuracy Upgrade (+5): + +

+ +

+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..49af2d1 --- /dev/null +++ b/script.js @@ -0,0 +1,148 @@ +// Game state variables +let gameState = { + distance: 0, + power: 50, + accuracy: 50, + money: 0, + targetDistance: 0 +}; + +// DOM elements +const distanceElement = document.getElementById('distance'); +const powerElement = document.getElementById('power'); +const accuracyElement = document.getElementById('accuracy'); +const moneyElement = document.getElementById('money'); +const ballElement = document.getElementById('ball'); +const targetElement = document.getElementById('target'); +const hitButton = document.getElementById('hitButton'); +const upgradeButton = document.getElementById('upgradeButton'); +const powerUpgradeButton = document.getElementById('powerUpgrade'); +const accuracyUpgradeButton = document.getElementById('accuracyUpgrade'); +const messageElement = document.getElementById('message'); + +// Initialize game +function initGame() { + updateDisplay(); + generateNewTarget(); + + // Add event listeners + hitButton.addEventListener('click', hitBall); + upgradeButton.addEventListener('click', showUpgrades); + powerUpgradeButton.addEventListener('click', upgradePower); + accuracyUpgradeButton.addEventListener('click', upgradeAccuracy); +} + +// Update display with current game state +function updateDisplay() { + distanceElement.textContent = gameState.distance; + powerElement.textContent = gameState.power; + accuracyElement.textContent = gameState.accuracy; + moneyElement.textContent = `$${gameState.money}`; +} + +// Generate a new target distance +function generateNewTarget() { + // Target distance between 50 and 200 meters + gameState.targetDistance = Math.floor(Math.random() * 151) + 50; + + // Position the target at the calculated distance + const gameArea = document.querySelector('.game-area'); + const gameWidth = gameArea.offsetWidth; + const targetPosition = (gameState.targetDistance / 200) * (gameWidth - 50); + targetElement.style.right = `${Math.max(20, gameWidth - targetPosition - 30)}px`; +} + +// Hit the ball +function hitBall() { + // Calculate distance based on power and accuracy + const powerFactor = gameState.power / 100; + const accuracyFactor = gameState.accuracy / 100; + + // Add some randomness to make it interesting + const randomFactor = Math.random() * 0.5 + 0.75; // Between 0.75 and 1.25 + + // Calculate the actual distance + let distance = Math.floor(powerFactor * accuracyFactor * 200 * randomFactor); + + // Update game state + 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!`); + + // Generate new target for next round + setTimeout(generateNewTarget, 1000); +} + +// Animate the ball movement +function animateBall(distance) { + // Reset ball position + ballElement.style.left = '20px'; + + // Calculate how far to move the ball (max 600px for visualization) + const gameArea = document.querySelector('.game-area'); + const gameWidth = gameArea.offsetWidth; + 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'); + + // Move the ball + setTimeout(() => { + ballElement.style.left = `${moveDistance}px`; + ballElement.classList.remove('hit-animation'); + }, 100); +} + +// Show upgrades panel +function showUpgrades() { + const upgradesPanel = document.getElementById('upgrades'); + if (upgradesPanel.style.display === 'none') { + upgradesPanel.style.display = 'block'; + } else { + upgradesPanel.style.display = 'none'; + } +} + +// Upgrade power +function upgradePower() { + if (gameState.money >= 100) { + gameState.money -= 100; + gameState.power += 5; + updateDisplay(); + showMessage('Power upgraded!'); + } else { + showMessage('Not enough money for upgrade!'); + } +} + +// Upgrade accuracy +function upgradeAccuracy() { + if (gameState.money >= 100) { + gameState.money -= 100; + gameState.accuracy += 5; + updateDisplay(); + showMessage('Accuracy upgraded!'); + } else { + showMessage('Not enough money for upgrade!'); + } +} + +// Show message +function showMessage(text) { + messageElement.textContent = text; + setTimeout(() => { + messageElement.textContent = ''; + }, 3000); +} + +// Initialize the game when page loads +window.addEventListener('load', initGame); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3c0a2e6 --- /dev/null +++ b/style.css @@ -0,0 +1,163 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(to bottom, #87CEEB, #98FB98); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.game-container { + background-color: rgba(255, 255, 255, 0.9); + border-radius: 15px; + padding: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + text-align: center; + max-width: 800px; + width: 100%; +} + +h1 { + color: #2E8B57; + margin-bottom: 20px; + font-size: 2.5em; +} + +.stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + margin-bottom: 20px; + background-color: #f0f8ff; + padding: 15px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.stat { + font-size: 1.2em; + font-weight: bold; + margin: 5px; + color: #333; +} + +.game-area { + position: relative; + height: 300px; + background-color: #90EE90; + border: 3px solid #228B22; + border-radius: 10px; + margin-bottom: 20px; + overflow: hidden; +} + +.ball { + position: absolute; + width: 20px; + height: 20px; + background-color: white; + border: 2px solid #333; + border-radius: 50%; + bottom: 40px; + left: 20px; + transition: all 1s ease-out; +} + +.target { + position: absolute; + width: 30px; + height: 30px; + background-color: #FF4500; + border-radius: 50%; + bottom: 40px; + right: 20px; + box-shadow: 0 0 10px rgba(255, 69, 0, 0.8); +} + +.ground { + position: absolute; + bottom: 0; + width: 100%; + height: 40px; + background-color: #8B4513; +} + +.controls { + margin-bottom: 20px; +} + +button { + background-color: #2E8B57; + color: white; + border: none; + padding: 12px 20px; + margin: 0 10px; + font-size: 1.1em; + border-radius: 5px; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: #3CB371; + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); +} + +button:active { + transform: translateY(0); +} + +.upgrades { + background-color: #f0f8ff; + padding: 15px; + border-radius: 10px; + margin-bottom: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.upgrade-item { + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 0; + padding: 10px; + background-color: #e6f3ff; + border-radius: 5px; +} + +.upgrade-item button { + background-color: #FF8C00; + padding: 8px 15px; +} + +.upgrade-item button:hover { + background-color: #FFA500; +} + +.message { + font-size: 1.2em; + font-weight: bold; + color: #2E8B57; + min-height: 30px; + margin-top: 10px; +} + +/* Animation for ball movement */ +@keyframes hitAnimation { + 0% { transform: translateX(0); } + 50% { transform: translateX(100px) translateY(-50px); } + 100% { transform: translateX(200px) translateY(0); } +} + +.hit-animation { + animation: hitAnimation 1s ease-out; +} \ No newline at end of file