Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>中国农场模拟器</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Microsoft YaHei', sans-serif; | |
| } | |
| body { | |
| background-color: #e8f4ea; | |
| color: #333; | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| /* 游戏容器 */ | |
| .game-container { | |
| display: flex; | |
| height: 100vh; | |
| position: relative; | |
| } | |
| /* 侧边栏 - 信息面板 */ | |
| .sidebar { | |
| width: 250px; | |
| background-color: #4a6b3a; | |
| color: white; | |
| padding: 20px; | |
| box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); | |
| z-index: 10; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .sidebar-header { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .sidebar-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .stats { | |
| margin-bottom: 30px; | |
| } | |
| .stat-item { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .stat-value { | |
| font-weight: bold; | |
| } | |
| /* 工具栏 */ | |
| .toolbar { | |
| margin-top: auto; | |
| } | |
| .tool-btn { | |
| width: 100%; | |
| padding: 10px 15px; | |
| margin-bottom: 10px; | |
| background-color: #5d8a4c; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .tool-btn i { | |
| margin-right: 10px; | |
| } | |
| .tool-btn:hover { | |
| background-color: #6e9d5b; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| /* 农场区域 */ | |
| .farm-area { | |
| flex: 1; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(to bottom, #a8d8b4, #8fc19e); | |
| } | |
| /* 田地 */ | |
| .field { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| background-color: #8b704e; | |
| border: 2px solid #6a5238; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .field:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .field.planted { | |
| background-color: #5d8a4c; | |
| } | |
| .field.harvest-ready { | |
| background-color: #d4a017; | |
| box-shadow: 0 0 15px #f1c40f; | |
| } | |
| /* 作物显示 */ | |
| .crop { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| } | |
| /* 天气效果 */ | |
| .weather { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 5; | |
| } | |
| .sun { | |
| position: absolute; | |
| top: 50px; | |
| right: 100px; | |
| width: 80px; | |
| height: 80px; | |
| background-color: #f1c40f; | |
| border-radius: 50%; | |
| box-shadow: 0 0 30px #f39c12; | |
| } | |
| .cloud { | |
| position: absolute; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| border-radius: 50%; | |
| filter: blur(5px); | |
| animation: float 30s linear infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateX(-100px); | |
| } | |
| 100% { | |
| transform: translateX(calc(100vw + 100px)); | |
| } | |
| } | |
| .rain { | |
| position: absolute; | |
| width: 2px; | |
| height: 20px; | |
| background-color: rgba(174, 214, 241, 0.6); | |
| animation: rain linear infinite; | |
| } | |
| @keyframes rain { | |
| to { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| /* 动物 */ | |
| .animal { | |
| position: absolute; | |
| font-size: 2rem; | |
| animation: wander 10s linear infinite alternate; | |
| z-index: 3; | |
| } | |
| @keyframes wander { | |
| 0% { | |
| transform: translateX(0) rotateY(0deg); | |
| } | |
| 50% { | |
| transform: translateX(100px) rotateY(0deg); | |
| } | |
| 51% { | |
| transform: translateX(100px) rotateY(180deg); | |
| } | |
| 100% { | |
| transform: translateX(0) rotateY(180deg); | |
| } | |
| } | |
| /* 模态框 */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| width: 400px; | |
| max-width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .modal-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| color: #4a6b3a; | |
| text-align: center; | |
| } | |
| .crop-selection { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| } | |
| .crop-option { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| background-color: #f5f5f5; | |
| } | |
| .crop-option:hover { | |
| background-color: #e0e0e0; | |
| transform: scale(1.05); | |
| } | |
| .crop-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| } | |
| .crop-name { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .crop-details { | |
| font-size: 0.8rem; | |
| color: #666; | |
| text-align: center; | |
| } | |
| /* 通知 */ | |
| .notification { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: 100; | |
| } | |
| .notification.show { | |
| opacity: 1; | |
| } | |
| /* 季节指示器 */ | |
| .season-indicator { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| padding: 10px 15px; | |
| border-radius: 20px; | |
| font-weight: bold; | |
| color: #4a6b3a; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .season-icon { | |
| margin-right: 8px; | |
| font-size: 1.2rem; | |
| } | |
| /* 仓库 */ | |
| .warehouse { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80%; | |
| height: 100px; | |
| background-color: #8b704e; | |
| border-radius: 10px 10px 0 0; | |
| bottom: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 2; | |
| border-top: 5px solid #6a5238; | |
| } | |
| .warehouse-door { | |
| width: 100px; | |
| height: 80px; | |
| background-color: #6a5238; | |
| border-radius: 5px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: transform 0.5s ease; | |
| } | |
| .warehouse-door:hover { | |
| transform: translateY(-5px); | |
| } | |
| /* 水塘 */ | |
| .pond { | |
| position: absolute; | |
| width: 200px; | |
| height: 150px; | |
| background: linear-gradient(to bottom, #3498db, #2980b9); | |
| border-radius: 50%; | |
| border: 5px solid #1a5276; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <!-- 侧边栏 --> | |
| <div class="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="sidebar-title">中国农场</div> | |
| <div>第 <span id="day-count">1</span> 天</div> | |
| </div> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <span>资金:</span> | |
| <span class="stat-value" id="money">¥1000</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>声望:</span> | |
| <span class="stat-value" id="reputation">50</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>水稻:</span> | |
| <span class="stat-value" id="rice-count">0</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>小麦:</span> | |
| <span class="stat-value" id="wheat-count">0</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>玉米:</span> | |
| <span class="stat-value" id="corn-count">0</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>蔬菜:</span> | |
| <span class="stat-value" id="vegetable-count">0</span> | |
| </div> | |
| </div> | |
| <div class="toolbar"> | |
| <button class="tool-btn" id="market-btn"> | |
| <i class="fas fa-shopping-cart"></i> 市场 | |
| </button> | |
| <button class="tool-btn" id="inventory-btn"> | |
| <i class="fas fa-box-open"></i> 仓库 | |
| </button> | |
| <button class="tool-btn" id="weather-btn"> | |
| <i class="fas fa-cloud-sun"></i> 看天气 | |
| </button> | |
| <button class="tool-btn" id="next-day-btn"> | |
| <i class="fas fa-forward"></i> 下一天 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 农场区域 --> | |
| <div class="farm-area"> | |
| <!-- 田地将在这里动态生成 --> | |
| <!-- 天气效果 --> | |
| <div class="weather"> | |
| <div class="sun"></div> | |
| <!-- 云和雨将在这里动态生成 --> | |
| </div> | |
| <!-- 仓库 --> | |
| <div class="warehouse"> | |
| <div class="warehouse-door"> | |
| <i class="fas fa-warehouse"></i> | |
| </div> | |
| </div> | |
| <!-- 水塘 --> | |
| <div class="pond" style="top: 100px; right: 150px;"></div> | |
| <div class="pond" style="top: 300px; left: 100px;"></div> | |
| <!-- 季节指示器 --> | |
| <div class="season-indicator"> | |
| <i class="fas fa-sun season-icon" id="season-icon"></i> | |
| <span id="season-text">春季</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 作物选择模态框 --> | |
| <div class="modal" id="crop-modal"> | |
| <div class="modal-content"> | |
| <div class="modal-title">选择要种植的作物</div> | |
| <div class="crop-selection"> | |
| <div class="crop-option" data-crop="rice"> | |
| <div class="crop-icon">🌾</div> | |
| <div class="crop-name">水稻</div> | |
| <div class="crop-details">收获: ¥150<br>生长: 3天</div> | |
| </div> | |
| <div class="crop-option" data-crop="wheat"> | |
| <div class="crop-icon">🌾</div> | |
| <div class="crop-name">小麦</div> | |
| <div class="crop-details">收获: ¥120<br>生长: 2天</div> | |
| </div> | |
| <div class="crop-option" data-crop="corn"> | |
| <div class="crop-icon">🌽</div> | |
| <div class="crop-name">玉米</div> | |
| <div class="crop-details">收获: ¥180<br>生长: 4天</div> | |
| </div> | |
| <div class="crop-option" data-crop="vegetable"> | |
| <div class="crop-icon">🥬</div> | |
| <div class="crop-name">蔬菜</div> | |
| <div class="crop-details">收获: ¥200<br>生长: 1天</div> | |
| </div> | |
| <div class="crop-option" data-crop="cotton"> | |
| <div class="crop-icon">🧶</div> | |
| <div class="crop-name">棉花</div> | |
| <div class="crop-details">收获: ¥250<br>生长: 5天</div> | |
| </div> | |
| <div class="crop-option" data-crop="tea"> | |
| <div class="crop-icon">🍵</div> | |
| <div class="crop-name">茶叶</div> | |
| <div class="crop-details">收获: ¥300<br>生长: 6天</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 市场模态框 --> | |
| <div class="modal" id="market-modal"> | |
| <div class="modal-content"> | |
| <div class="modal-title">农产品市场</div> | |
| <div style="margin-bottom: 20px;"> | |
| <p style="margin-bottom: 10px;">根据季节变化，农产品的价格会有浮动。</p> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> | |
| <div style="background-color: #f5f5f5; padding: 10px; border-radius: 5px;"> | |
| <div style="font-weight: bold; margin-bottom: 5px;">当前价格</div> | |
| <div>水稻: ¥<span id="rice-price">150</span></div> | |
| <div>小麦: ¥<span id="wheat-price">120</span></div> | |
| <div>玉米: ¥<span id="corn-price">180</span></div> | |
| <div>蔬菜: ¥<span id="vegetable-price">200</span></div> | |
| </div> | |
| <div style="background-color: #f5f5f5; padding: 10px; border-radius: 5px;"> | |
| <div style="font-weight: bold; margin-bottom: 5px;">你有</div> | |
| <div>水稻: <span id="market-rice-count">0</span></div> | |
| <div>小麦: <span id="market-wheat-count">0</span></div> | |
| <div>玉米: <span id="market-corn-count">0</span></div> | |
| <div>蔬菜: <span id="market-vegetable-count">0</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="text-align: right;"> | |
| <button style="padding: 8px 20px; background-color: #4a6b3a; color: white; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;" id="sell-all-btn">卖出全部</button> | |
| <button style="padding: 8px 20px; background-color: #ccc; color: #333; border: none; border-radius: 5px; cursor: pointer;" id="close-market-btn">关闭</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 通知 --> | |
| <div class="notification" id="notification"></div> | |
| <script> | |
| // 游戏状态 | |
| const gameState = { | |
| money: 1000, | |
| reputation: 50, | |
| inventory: { | |
| rice: 0, | |
| wheat: 0, | |
| corn: 0, | |
| vegetable: 0 | |
| }, | |
| day: 1, | |
| season: 'spring', | |
| weather: 'sunny', | |
| fields: [], | |
| selectedField: null, | |
| prices: { | |
| rice: 150, | |
| wheat: 120, | |
| corn: 180, | |
| vegetable: 200 | |
| } | |
| }; | |
| // DOM元素 | |
| const elements = { | |
| money: document.getElementById('money'), | |
| reputation: document.getElementById('reputation'), | |
| 'rice-count': document.getElementById('rice-count'), | |
| 'wheat-count': document.getElementById('wheat-count'), | |
| 'corn-count': document.getElementById('corn-count'), | |
| 'vegetable-count': document.getElementById('vegetable-count'), | |
| 'day-count': document.getElementById('day-count'), | |
| 'season-text': document.getElementById('season-text'), | |
| 'season-icon': document.getElementById('season-icon'), | |
| cropModal: document.getElementById('crop-modal'), | |
| marketModal: document.getElementById('market-modal'), | |
| notification: document.getElementById('notification'), | |
| farmArea: document.querySelector('.farm-area'), | |
| weatherElement: document.querySelector('.weather') | |
| }; | |
| // 季节图标映射 | |
| const seasonIcons = { | |
| spring: 'fas fa-seedling', | |
| summer: 'fas fa-sun', | |
| autumn: 'fas fa-leaf', | |
| winter: 'fas fa-snowflake' | |
| }; | |
| // 作物信息 | |
| const cropsInfo = { | |
| rice: { emoji: '🌾', name: '水稻', growthTime: 3, value: 150, color: '#7cb342' }, | |
| wheat: { emoji: '🌾', name: '小麦', growthTime: 2, value: 120, color: '#d4b830' }, | |
| corn: { emoji: '🌽', name: '玉米', growthTime: 4, value: 180, color: '#f9a825' }, | |
| vegetable: { emoji: '🥬', name: '蔬菜', growthTime: 1, value: 200, color: '#66bb6a' }, | |
| cotton: { emoji: '🧶', name: '棉花', growthTime: 5, value: 250, color: '#a5d6a7' }, | |
| tea: { emoji: '🍵', name: '茶叶', growthTime: 6, value: 300, color: '#c8e6c9' } | |
| }; | |
| // 初始化游戏 | |
| function initGame() { | |
| createFields(); | |
| updateUI(); | |
| setupEventListeners(); | |
| updateWeather(); | |
| } | |
| // 创建田地 | |
| function createFields() { | |
| const farmWidth = elements.farmArea.clientWidth; | |
| const farmHeight = elements.farmArea.clientHeight; | |
| const cols = Math.floor(farmWidth / 100); | |
| const rows = Math.floor((farmHeight - 120) / 100); | |
| for (let row = 0; row < rows; row++) { | |
| for (let col = 0; col < cols; col++) { | |
| const field = document.createElement('div'); | |
| field.className = 'field'; | |
| field.style.left = `${50 + col * 100}px`; | |
| field.style.top = `${50 + row * 100}px`; | |
| field.dataset.id = gameState.fields.length; | |
| gameState.fields.push({ | |
| id: gameState.fields.length, | |
| planted: false, | |
| crop: null, | |
| growth: 0, | |
| ready: false | |
| }); | |
| field.addEventListener('click', () => handleFieldClick(field.dataset.id)); | |
| elements.farmArea.appendChild(field); | |
| } | |
| } | |
| } | |
| // 处理田地点击 | |
| function handleFieldClick(fieldId) { | |
| const fieldIndex = parseInt(fieldId); | |
| const field = gameState.fields[fieldIndex]; | |
| if (!field.planted) { | |
| // 如果田地是空的，打开作物选择模态框 | |
| gameState.selectedField = fieldIndex; | |
| elements.cropModal.classList.add('active'); | |
| } else if (field.ready) { | |
| // 如果作物已经成熟，收获 | |
| harvestCrop(fieldIndex); | |
| } | |
| } | |
| // 种植作物 | |
| function plantCrop(fieldIndex, cropType) { | |
| const field = gameState.fields[fieldIndex]; | |
| if (field.planted) return; | |
| field.planted = true; | |
| field.crop = cropType; | |
| field.growth = 0; | |
| field.ready = false; | |
| // 更新田地显示 | |
| const fieldElement = document.querySelector(`.field[data-id="${fieldIndex}"]`); | |
| fieldElement.classList.add('planted'); | |
| fieldElement.innerHTML = `<div class="crop" data-crop="${cropType}">${cropsInfo[cropType].emoji}</div>`; | |
| showNotification(`种植了${cropsInfo[cropType].name}`); | |
| } | |
| // 收获作物 | |
| function harvestCrop(fieldIndex) { | |
| const field = gameState.fields[fieldIndex]; | |
| const cropInfo = cropsInfo[field.crop]; | |
| // 更新库存 | |
| gameState.inventory[field.crop]++; | |
| gameState.money += cropInfo.value; | |
| // 重置田地 | |
| resetField(fieldIndex); | |
| showNotification(`收获了${cropInfo.name}，获得¥${cropInfo.value}`); | |
| updateUI(); | |
| } | |
| // 重置田地 | |
| function resetField(fieldIndex) { | |
| const field = gameState.fields[fieldIndex]; | |
| field.planted = false; | |
| field.crop = null; | |
| field.growth = 0; | |
| field.ready = false; | |
| // 更新田地显示 | |
| const fieldElement = document.querySelector(`.field[data-id="${fieldIndex}"]`); | |
| fieldElement.classList.remove('planted', 'harvest-ready'); | |
| fieldElement.innerHTML = ''; | |
| } | |
| // 更新天气 | |
| function updateWeather() { | |
| // 清除现有天气效果 | |
| elements.weatherElement.innerHTML = '<div class="sun"></div>'; | |
| // 根据季节设置天气 | |
| if (gameState.season === 'spring') { | |
| if (Math.random() < 0.7) { | |
| createClouds(4); | |
| if (Math.random() < 0.4) createRain(); | |
| } | |
| } else if (gameState.season === 'summer') { | |
| if (Math.random() < 0.5) { | |
| createClouds(2); | |
| } | |
| } else if (gameState.season === 'autumn') { | |
| if (Math.random() < 0.6) { | |
| createClouds(3); | |
| } | |
| } else if (gameState.season === 'winter') { | |
| if (Math.random() < 0.8) { | |
| createClouds(5); | |
| } | |
| } | |
| } | |
| // 创建云 | |
| function createClouds(count) { | |
| for (let i = 0; i < count; i++) { | |
| const cloud = document.createElement('div'); | |
| cloud.className = 'cloud'; | |
| // 随机大小 | |
| const width = Math.random() * 120 + 50; | |
| const height = Math.random() * 60 + 30; | |
| cloud.style.width = `${width}px`; | |
| cloud.style.height = `${height}px`; | |
| // 随机位置 | |
| cloud.style.top = `${Math.random() * 50}%`; | |
| cloud.style.left = `${Math.random() * 100}%`; | |
| // 随机动画延迟和时长 | |
| cloud.style.animationDelay = `${Math.random() * 10}s`; | |
| cloud.style.animationDuration = `${Math.random() * 30 + 20}s`; | |
| elements.weatherElement.appendChild(cloud); | |
| } | |
| } | |
| // 创建雨 | |
| function createRain() { | |
| for (let i = 0; i < 50; i++) { | |
| const rain = document.createElement('div'); | |
| rain.className = 'rain'; | |
| // 随机位置和长度 | |
| rain.style.left = `${Math.random() * 100}%`; | |
| rain.style.height = `${Math.random() * 30 + 20}px`; | |
| // 随机动画延迟和时长 | |
| rain.style.animationDelay = `${Math.random() * 2}s`; | |
| rain.style.animationDuration = `${Math.random() * 0.5 + 0.5}s`; | |
| elements.weatherElement.appendChild(rain); | |
| } | |
| } | |
| // 进入下一天 | |
| function nextDay() { | |
| gameState.day++; | |
| // 检查季节变化 | |
| if (gameState.day % 30 === 0) { | |
| changeSeason(); | |
| } | |
| // 更新天气 | |
| updateWeather(); | |
| // 更新作物生长 | |
| updateCrops(); | |
| // 更新UI | |
| updateUI(); | |
| showNotification(`第${gameState.day}天开始了`); | |
| } | |
| // 更新作物生长 | |
| function updateCrops() { | |
| gameState.fields.forEach((field, index) => { | |
| if (field.planted && !field.ready) { | |
| field.growth++; | |
| const cropInfo = cropsInfo[field.crop]; | |
| if (field.growth >= cropInfo.growthTime) { | |
| field.ready = true; | |
| // 更新田地显示为可收获状态 | |
| const fieldElement = document.querySelector(`.field[data-id="${index}"]`); | |
| fieldElement.classList.add('harvest-ready'); | |
| } | |
| } | |
| }); | |
| } | |
| // 改变季节 | |
| function changeSeason() { | |
| const seasons = ['spring', 'summer', 'autumn', 'winter']; | |
| const currentIndex = seasons.indexOf(gameState.season); | |
| const nextIndex = (currentIndex + 1) % seasons.length; | |
| gameState.season = seasons[nextIndex]; | |
| // 更新价格根据季节 | |
| updatePrices(); | |
| showNotification(`季节变换为${getSeasonName(gameState.season)}`); | |
| } | |
| // 获取季节名称 | |
| function getSeasonName(season) { | |
| const names = { | |
| spring: '春季', | |
| summer: '夏季', | |
| autumn: '秋季', | |
| winter: '冬季' | |
| }; | |
| return names[season]; | |
| } | |
| // 根据季节更新价格 | |
| function updatePrices() { | |
| const season = gameState.season; | |
| if (season === 'spring') { | |
| gameState.prices.rice = 180; | |
| gameState.prices.wheat = 140; | |
| gameState.prices.corn = 160; | |
| gameState.prices.vegetable = 220; | |
| } else if (season === 'summer') { | |
| gameState.prices.rice = 150; | |
| gameState.prices.wheat = 120; | |
| gameState.prices.corn = 180; | |
| gameState.prices.vegetable = 200; | |
| } else if (season === 'autumn') { | |
| gameState.prices.rice = 170; | |
| gameState.prices.wheat = 150; | |
| gameState.prices.corn = 190; | |
| gameState.prices.vegetable = 180; | |
| } else if (season === 'winter') { | |
| gameState.prices.rice = 200; | |
| gameState.prices.wheat = 170; | |
| gameState.prices.corn = 220; | |
| gameState.prices.vegetable = 250; | |
| } | |
| } | |
| // 卖出全部农产品 | |
| function sellAll() { | |
| let total = 0; | |
| for (const crop in gameState.inventory) { | |
| if (gameState.inventory[crop] > 0) { | |
| total += gameState.inventory[crop] * gameState.prices[crop]; | |
| gameState.inventory[crop] = 0; | |
| } | |
| } | |
| if (total > 0) { | |
| gameState.money += total; | |
| showNotification(`卖出了所有农产品，获得¥${total}`); | |
| updateUI(); | |
| } else { | |
| showNotification('没有农产品可以卖出'); | |
| } | |
| // 关闭市场模态框 | |
| elements.marketModal.classList.remove('active'); | |
| } | |
| // 显示通知 | |
| function showNotification(message) { | |
| elements.notification.textContent = message; | |
| elements.notification.classList.add('show'); | |
| setTimeout(() => { | |
| elements.notification.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // 更新UI | |
| function updateUI() { | |
| elements.money.textContent = `¥${gameState.money}`; | |
| elements.reputation.textContent = gameState.reputation; | |
| elements['rice-count'].textContent = gameState.inventory.rice; | |
| elements['wheat-count'].textContent = gameState.inventory.wheat; | |
| elements['corn-count'].textContent = gameState.inventory.corn; | |
| elements['vegetable-count'].textContent = gameState.inventory.vegetable; | |
| elements['day-count'].textContent = gameState.day; | |
| elements['season-text'].textContent = getSeasonName(gameState.season); | |
| // 更新季节图标 | |
| elements['season-icon'].className = ''; | |
| elements['season-icon'].classList.add(...seasonIcons[gameState.season].split(' ')); | |
| // 更新市场UI | |
| if (elements.marketModal.classList.contains('active')) { | |
| updateMarketUI(); | |
| } | |
| } | |
| // 更新市场UI | |
| function updateMarketUI() { | |
| document.getElementById('rice-price').textContent = gameState.prices.rice; | |
| document.getElementById('wheat-price').textContent = gameState.prices.wheat; | |
| document.getElementById('corn-price').textContent = gameState.prices.corn; | |
| document.getElementById('vegetable-price').textContent = gameState.prices.vegetable; | |
| document.getElementById('market-rice-count').textContent = gameState.inventory.rice; | |
| document.getElementById('market-wheat-count').textContent = gameState.inventory.wheat; | |
| document.getElementById('market-corn-count').textContent = gameState.inventory.corn; | |
| document.getElementById('market-vegetable-count').textContent = gameState.inventory.vegetable; | |
| } | |
| // 设置事件监听器 | |
| function setupEventListeners() { | |
| // 作物选择模态框 | |
| document.querySelectorAll('.crop-option').forEach(option => { | |
| option.addEventListener('click', () => { | |
| const cropType = option.dataset.crop; | |
| plantCrop(gameState.selectedField, cropType); | |
| elements.cropModal.classList.remove('active'); | |
| }); | |
| }); | |
| // 关闭模态框点击背景 | |
| document.querySelectorAll('.modal').forEach(modal => { | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| // 市场按钮 | |
| document.getElementById('market-btn').addEventListener('click', () => { | |
| elements.marketModal.classList.add('active'); | |
| updateMarketUI(); | |
| }); | |
| // 卖出全部按钮 | |
| document.getElementById('sell-all-btn').addEventListener('click', sellAll); | |
| // 关闭市场按钮 | |
| document.getElementById('close-market-btn').addEventListener('click', () => { | |
| elements.marketModal.classList.remove('active'); | |
| }); | |
| // 下一天按钮 | |
| document.getElementById('next-day-btn').addEventListener('click', nextDay); | |
| } | |
| // 启动游戏 | |
| initGame(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |