Spaces:

offerpk3
/

farminggame

Running

App Files Files Community

offerpk3 commited on Jun 12, 2025

Commit

6b1e608

verified ·

1 Parent(s): e5e4a4b

Update index.html

Browse files

Files changed (1) hide show

index.html +646 -19

index.html CHANGED Viewed

@@ -1,19 +1,646 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Adventure Farming Game</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%);
+            overflow: hidden;
+            height: 100vh;
+        }
+        .game-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .game-area {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            width: 100%;
+            height: 100%;
+            gap: 2px;
+        }
+        .zone {
+            position: relative;
+            border: 3px solid #8B4513;
+            border-radius: 15px;
+            overflow: hidden;
+        }
+        .farm-zone {
+            background: linear-gradient(45deg, #90EE90, #98FB98);
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+            gap: 5px;
+            padding: 10px;
+        }
+        .farm-plot {
+            background: #8B4513;
+            border: 2px solid #654321;
+            border-radius: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .farm-plot:hover {
+            transform: scale(1.05);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        }
+        .farm-plot.planted {
+            background: #228B22;
+        }
+        .farm-plot.ready {
+            background: #FFD700;
+            animation: glow 1s infinite alternate;
+        }
+        @keyframes glow {
+            from { box-shadow: 0 0 5px #FFD700; }
+            to { box-shadow: 0 0 15px #FFD700, 0 0 25px #FFD700; }
+        }
+        .jungle-zone {
+            background: linear-gradient(45deg, #228B22, #006400);
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+            gap: 3px;
+            padding: 10px;
+        }
+        .tree {
+            background: #8B4513;
+            border: none;
+            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+            cursor: pointer;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .tree:hover {
+            transform: scale(1.1);
+        }
+        .tree.cut {
+            background: #654321;
+            opacity: 0.5;
+        }
+        .water-zone {
+            background: linear-gradient(45deg, #4169E1, #1E90FF);
+            position: relative;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 48px;
+        }
+        .water-wave {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2));
+            animation: wave 2s infinite linear;
+        }
+        @keyframes wave {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .shop-zone {
+            background: linear-gradient(45deg, #DEB887, #F4A460);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .shop-item {
+            background: #FFE4B5;
+            border: 2px solid #DEB887;
+            border-radius: 8px;
+            padding: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-align: center;
+            font-weight: bold;
+        }
+        .shop-item:hover {
+            background: #FFEFD5;
+            transform: translateY(-2px);
+        }
+        .ui-panel {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(255,255,255,0.9);
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            z-index: 100;
+        }
+        .resource {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            margin: 5px 0;
+            font-weight: bold;
+        }
+        .clouds {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 50;
+        }
+        .cloud {
+            position: absolute;
+            background: white;
+            border-radius: 50px;
+            opacity: 0.7;
+            animation: float 20s infinite linear;
+        }
+        .cloud:before {
+            content: '';
+            position: absolute;
+            background: white;
+            border-radius: 50px;
+        }
+        .cloud1 {
+            width: 80px;
+            height: 40px;
+            top: 20%;
+            animation-duration: 25s;
+        }
+        .cloud1:before {
+            width: 50px;
+            height: 50px;
+            top: -25px;
+            left: 10px;
+        }
+        .cloud2 {
+            width: 60px;
+            height: 30px;
+            top: 40%;
+            animation-duration: 30s;
+        }
+        .cloud2:before {
+            width: 40px;
+            height: 40px;
+            top: -20px;
+            left: 15px;
+        }
+        @keyframes float {
+            0% { transform: translateX(-100px); }
+            100% { transform: translateX(calc(100vw + 100px)); }
+        }
+        .rain {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 40;
+            opacity: 0;
+            transition: opacity 1s ease;
+        }
+        .rain.active {
+            opacity: 1;
+        }
+        .raindrop {
+            position: absolute;
+            width: 2px;
+            height: 15px;
+            background: rgba(173, 216, 230, 0.8);
+            animation: fall 1s infinite linear;
+        }
+        @keyframes fall {
+            0% { transform: translateY(-100vh); }
+            100% { transform: translateY(100vh); }
+        }
+        .wind {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 30;
+        }
+        .wind-line {
+            position: absolute;
+            width: 30px;
+            height: 2px;
+            background: rgba(255, 255, 255, 0.5);
+            animation: windMove 3s infinite linear;
+        }
+        @keyframes windMove {
+            0% { transform: translateX(-50px) translateY(0px); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateX(calc(100vw + 50px)) translateY(-20px); opacity: 0; }
+        }
+        .timer-display {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            background: rgba(255, 255, 255, 0.8);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .notification {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 5px;
+            z-index: 200;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .notification.show {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div class="ui-panel">
+            <div class="resource">💰 Gold: <span id="gold">100</span></div>
+            <div class="resource">💧 Water: <span id="water">0</span></div>
+            <div class="resource">🌱 Seeds: <span id="seeds">2</span></div>
+            <div class="resource">🌾 Crops: <span id="crops">0</span></div>
+        </div>
+        <div class="clouds">
+            <div class="cloud cloud1"></div>
+            <div class="cloud cloud2"></div>
+        </div>
+        <div class="rain" id="rain"></div>
+        <div class="wind" id="wind"></div>
+        <div class="game-area">
+            <div class="zone farm-zone" id="farmZone">
+                <!-- Farm plots will be generated here -->
+            </div>
+            <div class="zone jungle-zone" id="jungleZone">
+                <!-- Trees will be generated here -->
+            </div>
+            <div class="zone water-zone" id="waterZone">
+                <div class="water-wave"></div>
+                💧
+            </div>
+            <div class="zone shop-zone">
+                <h3 style="text-align: center; margin-bottom: 10px;">🏪 SHOP</h3>
+                <div class="shop-item" onclick="buySeeds()">
+                    🌱 Buy Seeds (10 Gold)
+                </div>
+                <div class="shop-item" onclick="buyWaterBucket()">
+                    🪣 Buy Water Bucket (15 Gold)
+                </div>
+                <div class="shop-item" onclick="sellCrops()">
+                    💰 Sell Crops (20 Gold each)
+                </div>
+            </div>
+        </div>
+        <div class="notification" id="notification"></div>
+    </div>
+    <script>
+        // Game state
+        let gameState = {
+            gold: 100,
+            water: 0,
+            seeds: 2,
+            crops: 0,
+            farmPlots: [],
+            trees: [],
+            weather: 'sunny'
+        };
+        // Initialize game
+        function initGame() {
+            createFarmPlots();
+            createTrees();
+            createWeatherEffects();
+            updateUI();
+            startWeatherCycle();
+        }
+        // Create farm plots
+        function createFarmPlots() {
+            const farmZone = document.getElementById('farmZone');
+            for (let i = 0; i < 9; i++) {
+                const plot = document.createElement('div');
+                plot.className = 'farm-plot';
+                plot.onclick = () => handleFarmPlot(i);
+                farmZone.appendChild(plot);
+                gameState.farmPlots.push({
+                    planted: false,
+                    ready: false,
+                    plantTime: null,
+                    growthTimer: null
+                });
+            }
+        }
+        // Create trees
+        function createTrees() {
+            const jungleZone = document.getElementById('jungleZone');
+            for (let i = 0; i < 12; i++) {
+                const tree = document.createElement('div');
+                tree.className = 'tree';
+                tree.innerHTML = '🌳';
+                tree.onclick = () => cutTree(i);
+                jungleZone.appendChild(tree);
+                gameState.trees.push({ cut: false, regrowTimer: null });
+            }
+        }
+        // Handle farm plot interaction
+        function handleFarmPlot(index) {
+            const plot = gameState.farmPlots[index];
+            const plotElement = document.querySelectorAll('.farm-plot')[index];
+            if (plot.ready) {
+                // Harvest crop
+                gameState.crops++;
+                plot.planted = false;
+                plot.ready = false;
+                plotElement.className = 'farm-plot';
+                plotElement.innerHTML = '';
+                showNotification('🌾 Crop harvested!');
+                updateUI();
+            } else if (!plot.planted && gameState.seeds > 0 && gameState.water > 0) {
+                // Plant seed
+                gameState.seeds--;
+                gameState.water--;
+                plot.planted = true;
+                plot.plantTime = Date.now();
+                plotElement.className = 'farm-plot planted';
+                plotElement.innerHTML = '🌱';
+                // Add timer display
+                const timerDiv = document.createElement('div');
+                timerDiv.className = 'timer-display';
+                plotElement.appendChild(timerDiv);
+                // Start growth timer (1 minute = 60000ms)
+                plot.growthTimer = setTimeout(() => {
+                    plot.ready = true;
+                    plotElement.className = 'farm-plot ready';
+                    plotElement.innerHTML = '🌾';
+                    showNotification('🌾 Crop is ready to harvest!');
+                }, 60000);
+                // Update timer display every second
+                const timerInterval = setInterval(() => {
+                    if (!plot.planted || plot.ready) {
+                        clearInterval(timerInterval);
+                        return;
+                    }
+                    const elapsed = Date.now() - plot.plantTime;
+                    const remaining = Math.max(0, 60000 - elapsed);
+                    const seconds = Math.ceil(remaining / 1000);
+                    timerDiv.textContent = `${seconds}s`;
+                    if (seconds === 0) {
+                        clearInterval(timerInterval);
+                        timerDiv.remove();
+                    }
+                }, 1000);
+                showNotification('🌱 Seed planted!');
+                updateUI();
+            } else if (!plot.planted && gameState.seeds === 0) {
+                showNotification('❌ No seeds! Buy from shop.');
+            } else if (!plot.planted && gameState.water === 0) {
+                showNotification('❌ No water! Collect from water zone.');
+            }
+        }
+        // Cut tree
+        function cutTree(index) {
+            const tree = gameState.trees[index];
+            const treeElement = document.querySelectorAll('.tree')[index];
+            if (!tree.cut) {
+                tree.cut = true;
+                treeElement.className = 'tree cut';
+                treeElement.innerHTML = '🪵';
+                gameState.gold += 5;
+                showNotification('🪵 Tree cut! +5 Gold');
+                updateUI();
+                // Regrow tree after 30 seconds
+                tree.regrowTimer = setTimeout(() => {
+                    tree.cut = false;
+                    treeElement.className = 'tree';
+                    treeElement.innerHTML = '🌳';
+                }, 30000);
+            }
+        }
+        // Collect water
+        document.getElementById('waterZone').onclick = function() {
+            gameState.water += 3;
+            showNotification('💧 Water collected! +3 Water');
+            updateUI();
+        };
+        // Shop functions
+        function buySeeds() {
+            if (gameState.gold >= 10) {
+                gameState.gold -= 10;
+                gameState.seeds += 3;
+                showNotification('🌱 Seeds purchased! +3 Seeds');
+                updateUI();
+            } else {
+                showNotification('❌ Not enough gold!');
+            }
+        }
+        function buyWaterBucket() {
+            if (gameState.gold >= 15) {
+                gameState.gold -= 15;
+                gameState.water += 10;
+                showNotification('🪣 Water bucket purchased! +10 Water');
+                updateUI();
+            } else {
+                showNotification('❌ Not enough gold!');
+            }
+        }
+        function sellCrops() {
+            if (gameState.crops > 0) {
+                const goldEarned = gameState.crops * 20;
+                gameState.gold += goldEarned;
+                gameState.crops = 0;
+                showNotification(`💰 Crops sold! +${goldEarned} Gold`);
+                updateUI();
+            } else {
+                showNotification('❌ No crops to sell!');
+            }
+        }
+        // Update UI
+        function updateUI() {
+            document.getElementById('gold').textContent = gameState.gold;
+            document.getElementById('water').textContent = gameState.water;
+            document.getElementById('seeds').textContent = gameState.seeds;
+            document.getElementById('crops').textContent = gameState.crops;
+        }
+        // Show notification
+        function showNotification(message) {
+            const notification = document.getElementById('notification');
+            notification.textContent = message;
+            notification.classList.add('show');
+            setTimeout(() => {
+                notification.classList.remove('show');
+            }, 2000);
+        }
+        // Weather effects
+        function createWeatherEffects() {
+            createRaindrops();
+            createWindLines();
+        }
+        function createRaindrops() {
+            const rain = document.getElementById('rain');
+            for (let i = 0; i < 50; i++) {
+                const drop = document.createElement('div');
+                drop.className = 'raindrop';
+                drop.style.left = Math.random() * 100 + '%';
+                drop.style.animationDelay = Math.random() * 2 + 's';
+                drop.style.animationDuration = (Math.random() * 0.5 + 0.5) + 's';
+                rain.appendChild(drop);
+            }
+        }
+        function createWindLines() {
+            const wind = document.getElementById('wind');
+            for (let i = 0; i < 20; i++) {
+                const line = document.createElement('div');
+                line.className = 'wind-line';
+                line.style.top = Math.random() * 100 + '%';
+                line.style.animationDelay = Math.random() * 3 + 's';
+                wind.appendChild(line);
+            }
+        }
+        // Weather cycle
+        function startWeatherCycle() {
+            setInterval(() => {
+                const weatherTypes = ['sunny', 'rainy', 'windy'];
+                const newWeather = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
+                if (newWeather !== gameState.weather) {
+                    gameState.weather = newWeather;
+                    updateWeather();
+                }
+            }, 15000); // Change weather every 15 seconds
+        }
+        function updateWeather() {
+            const rain = document.getElementById('rain');
+            switch (gameState.weather) {
+                case 'rainy':
+                    rain.classList.add('active');
+                    showNotification('🌧️ It\'s raining! Crops grow faster!');
+                    // Speed up crop growth during rain
+                    gameState.farmPlots.forEach((plot, index) => {
+                        if (plot.planted && !plot.ready && plot.growthTimer) {
+                            clearTimeout(plot.growthTimer);
+                            plot.growthTimer = setTimeout(() => {
+                                plot.ready = true;
+                                const plotElement = document.querySelectorAll('.farm-plot')[index];
+                                plotElement.className = 'farm-plot ready';
+                                plotElement.innerHTML = '🌾';
+                                showNotification('🌾 Crop is ready to harvest!');
+                            }, 30000); // Faster growth in rain
+                        }
+                    });
+                    break;
+                case 'sunny':
+                    rain.classList.remove('active');
+                    break;
+                case 'windy':
+                    rain.classList.remove('active');
+                    showNotification('💨 It\'s windy! Trees sway in the breeze!');
+                    break;
+            }
+        }
+        // Start the game
+        initGame();
+    </script>
+</body>
+</html>