Add Par 3 Challenge golf game

README.md

@@ -1,2 +1,48 @@
-# base44-zip
-base 44 app
+# Par 3 Challenge
+
+A browser-based golf game where players try to complete 9 par-3 holes with the fewest strokes possible.
+
+## How to Play
+
+1. Open `index.html` in a web browser
+2. Use the **Aim** slider to adjust your shot direction
+3. Select the appropriate **Club** for the distance:
+   - **Driver**: Long distance shots
+   - **Iron**: Medium distance shots
+   - **Wedge**: Short distance, good for bunker escapes
+   - **Putter**: Very short distances, ideal near the hole
+4. Click and hold the **Swing!** button to build power
+5. Release to hit the ball
+
+## Game Features
+
+- 9 unique holes with different layouts
+- Water hazards (penalty stroke if ball lands in water)
+- Sand bunkers (reduced ball speed and power)
+- Power meter with timing-based mechanics
+- Score tracking relative to par
+
+## Scoring
+
+- **Hole in One**: Ball in the hole in 1 stroke
+- **Eagle**: 2 under par (1 stroke on a par 3)
+- **Birdie**: 1 under par (2 strokes on a par 3)
+- **Par**: Expected strokes (3 strokes on a par 3)
+- **Bogey**: 1 over par (4 strokes on a par 3)
+
+## Project Structure
+
+```
+├── index.html      # Main game page
+├── css/
+│   └── style.css   # Game styling
+├── js/
+│   └── game.js     # Game logic and physics
+└── README.md       # This file
+```
+
+## Technologies
+
+- Pure HTML5, CSS3, and vanilla JavaScript
+- Canvas API for game rendering
+- No external dependencies required

css/style.css

@@ -0,0 +1,253 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #1a5f2c 0%, #0d3016 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#game-container {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    max-width: 850px;
+    width: 100%;
+}
+
+header {
+    background: linear-gradient(135deg, #2d8a4e 0%, #1a5f2c 100%);
+    color: white;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+header h1 {
+    font-size: 1.8rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+#scoreboard {
+    display: flex;
+    gap: 20px;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+#scoreboard span {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 8px 15px;
+    border-radius: 8px;
+}
+
+main {
+    padding: 20px;
+}
+
+#game-canvas {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    border: 4px solid #1a5f2c;
+    cursor: crosshair;
+    display: block;
+    margin-bottom: 20px;
+}
+
+#controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+    background: #f5f5f5;
+    border-radius: 12px;
+    margin-bottom: 15px;
+}
+
+#power-control {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#power-meter {
+    width: 150px;
+    height: 20px;
+    background: #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 2px solid #333;
+}
+
+#power-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, #4CAF50, #FFC107, #f44336);
+    transition: width 0.05s linear;
+}
+
+#power-value {
+    font-weight: bold;
+    min-width: 40px;
+}
+
+#aim-control {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#aim {
+    width: 120px;
+    cursor: pointer;
+}
+
+#club-selection {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#club {
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 2px solid #1a5f2c;
+    background: white;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+#swing-btn {
+    padding: 12px 30px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: transform 0.1s, box-shadow 0.1s;
+    user-select: none;
+}
+
+#swing-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
+}
+
+#swing-btn:active {
+    transform: scale(0.95);
+}
+
+#swing-btn:disabled {
+    background: #999;
+    cursor: not-allowed;
+    transform: none;
+}
+
+#message-area {
+    text-align: center;
+    padding: 10px;
+}
+
+#game-message {
+    font-size: 1.1rem;
+    color: #333;
+    font-weight: 500;
+}
+
+.hidden {
+    display: none !important;
+}
+
+#game-over {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+    text-align: center;
+    z-index: 1000;
+}
+
+#game-over::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: -1;
+}
+
+#game-over h2 {
+    font-size: 2rem;
+    color: #1a5f2c;
+    margin-bottom: 20px;
+}
+
+#game-over p {
+    font-size: 1.3rem;
+    margin: 10px 0;
+    color: #333;
+}
+
+#score-description {
+    font-weight: bold;
+    color: #2d8a4e;
+}
+
+#play-again-btn {
+    margin-top: 20px;
+    padding: 12px 40px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    background: linear-gradient(135deg, #2d8a4e 0%, #1a5f2c 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: transform 0.1s;
+}
+
+#play-again-btn:hover {
+    transform: scale(1.05);
+}
+
+/* Mobile responsive styles */
+@media (max-width: 600px) {
+    header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    #scoreboard {
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    #controls {
+        flex-direction: column;
+    }
+
+    #power-meter {
+        width: 200px;
+    }
+}

index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Par 3 Challenge</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div id="game-container">
+        <header>
+            <h1>Par 3 Challenge</h1>
+            <div id="scoreboard">
+                <span id="hole-info">Hole: <span id="current-hole">1</span>/9</span>
+                <span id="strokes-info">Strokes: <span id="current-strokes">0</span></span>
+                <span id="total-score-info">Total: <span id="total-score">0</span></span>
+            </div>
+        </header>
+
+        <main>
+            <canvas id="game-canvas" width="800" height="600"></canvas>
+
+            <div id="controls">
+                <div id="power-control">
+                    <label for="power">Power:</label>
+                    <div id="power-meter">
+                        <div id="power-fill"></div>
+                    </div>
+                    <span id="power-value">0%</span>
+                </div>
+
+                <div id="aim-control">
+                    <label for="aim">Aim: <span id="aim-value">0°</span></label>
+                    <input type="range" id="aim" min="-45" max="45" value="0" step="1">
+                </div>
+
+                <div id="club-selection">
+                    <label for="club">Club:</label>
+                    <select id="club">
+                        <option value="driver">Driver (Long)</option>
+                        <option value="iron" selected>Iron (Medium)</option>
+                        <option value="wedge">Wedge (Short)</option>
+                        <option value="putter">Putter</option>
+                    </select>
+                </div>
+
+                <button id="swing-btn">Swing!</button>
+            </div>
+
+            <div id="message-area">
+                <p id="game-message">Click and hold "Swing!" to build power, release to hit!</p>
+            </div>
+        </main>
+
+        <div id="game-over" class="hidden">
+            <h2>Game Over!</h2>
+            <p>Final Score: <span id="final-score">0</span></p>
+            <p>Par: 27</p>
+            <p id="score-description"></p>
+            <button id="play-again-btn">Play Again</button>
+        </div>
+    </div>
+
+    <script src="js/game.js"></script>
+</body>
+</html>