Spaces:

offerpk3
/

farminggame

Running

App Files Files Community

farminggame / index.html

offerpk3

Update index.html

6b1e608 verified 7 months ago

raw

history blame contribute delete

20.1 kB

	<!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>