像素农场播种机-作物模拟器HTML+CSS+JavaScript
设计一个交互式像素农场游戏，玩家可以在网格土地上播种不同作物，观察作物的生长动画，并收割获得产量统计。
设计思路
创建像素风格农场界面，包含可种植土地网格
实现6种不同作物的生长周期动画（胡萝卜、番茄、小麦等）
添加选择种植工具和统计功能
收割时显示详细的产量数据
使用复古像素风格提升游戏体验
<!DOCTYPE html><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://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: \'Press Start 2P\', cursive, sans-serif; background: #8fbc8f; color: #333; padding: 20px; background-image: radial-gradient(circle, #7cab7c 10%, #618961 90%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } .header { text-align: center; padding: 20px 0; width: 100%; max-width: 900px; } h1 { color: #4b6f4b; font-size: 2.5rem; text-shadow: 3px 3px 0 #dcedc8, 6px 6px 0 rgba(0,0,0,0.2); margin-bottom: 20px; letter-spacing: 2px; } .game-container { display: flex; width: 100%; max-width: 1000px; background: #a1887f; border: 8px solid #8d6e63; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); overflow: hidden; } .farm-grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 2px; padding: 15px; background: #8d6e63; flex: 1; } .plot { width: 60px; height: 60px; background: #d7ccc8; position: relative; cursor: pointer; transition: all 0.2s; border: 1px solid #bcaaa4; } .plot:hover { background: #efdcd5; transform: scale(0.95); } .plot .soil { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #a1887f; opacity: 0.3; } .toolbox { width: 220px; background: #8d6e63; padding: 15px; display: flex; flex-direction: column; border-left: 4px solid #6d4c41; } .toolbox h2 { color: #fff; font-size: 1.2rem; text-align: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #6d4c41; } .tool { display: flex; align-items: center; padding: 12px; background: #d7ccc8; margin-bottom: 10px; cursor: pointer; border-radius: 4px; transition: all 0.2s; border: 2px solid transparent; } .tool:hover, .tool.active { background: #efdcd5; border: 2px solid #fff; } .tool-icon { width: 30px; height: 30px; margin-right: 10px; background: #a1887f; display: flex; align-items: center; justify-content: center; font-size: 18px; } .crop-display { display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: space-between; } .crop { width: 48px; height: 48px; margin: 2px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; cursor: pointer; transition: all 0.2s; } .crop:hover { transform: scale(1.1); } .stats { background: #4b6f4b; padding: 15px; border-top: 4px solid #304d30; color: white; width: 100%; max-width: 900px; margin-top: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .stats h2 { text-align: center; margin-bottom: 10px; color: #dcedc8; } .crop-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 10px; } .stat-item { background: #5a875a; padding: 8px; border-radius: 4px; text-align: center; } .harvest-message { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #ffd700; padding: 15px 30px; border-radius: 8px; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 100; display: none; border: 2px solid #ffd700; text-align: center; } .money-display { position: absolute; top: 20px; right: 20px; background: #f1c40f; color: #000; padding: 10px 15px; border-radius: 5px; font-size: 1.2rem; border: 3px solid #d35400; } .tooltip { position: absolute; background: rgba(0,0,0,0.85); color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.7rem; pointer-events: none; z-index: 10; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: none; } /* 作物样式 */ .crop-planted { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: grow 0.5s ease-out; } .crop-seed { width: 8px; height: 8px; background: #5d4037; border-radius: 50%; } .crop-sprout { width: 15px; height: 20px; background: #7cb342; position: relative; } .crop-growing { width: 30px; height: 40px; background: #43a047; } .crop-mature { width: 35px; height: 45px; position: relative; } /* 特定作物样式 */ .carrot .crop-mature { background: #ff9800; width: 15px; height: 35px; border-radius: 0 0 8px 8px; } .carrot .crop-mature::before { content: \"\"; position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: #388e3c; border-radius: 5px; } .tomato .crop-mature { background: #e53935; width: 25px; height: 25px; border-radius: 50%; } .tomato .crop-mature::before { content: \"\"; position: absolute; top: -10px; left: 10px; width: 5px; height: 10px; background: #388e3c; } .wheat .crop-mature { background: #fdd835; width: 30px; height: 30px; border-radius: 5px; } .wheat .crop-mature::before { content: \"\"; position: absolute; top: -8px; left: 5px; width: 20px; height: 8px; background: #a1887f; } .pumpkin .crop-mature { background: #e65100; width: 30px; height: 25px; border-radius: 8px; } .pumpkin .crop-mature::before { content: \"\"; position: absolute; top: -5px; left: 13px; width: 4px; height: 5px; background: #388e3c; } .corn .crop-mature { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid #ffeb3b; } .corn .crop-mature::before { content: \"\"; position: absolute; top: 5px; left: 0; width: 30px; height: 10px; background: #795548; } .strawberry .crop-mature { background: #e91e63; width: 20px; height: 15px; border-radius: 50%; } .strawberry .crop-mature::before { content: \"\"; position: absolute; top: -8px; left: 7px; width: 6px; height: 8px; background: #43a047; } /* 动画 */ @keyframes grow { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.5s ease-in-out; } </style></head><body> <div class=\"header\"> <h1>像素农场播种机</h1> <p>点击空地种植作物 | 收割成熟作物获得收益</p> </div> <div class=\"money-display\">💰: $<span id=\"money\">250</span></div> <div class=\"game-container\"> <div class=\"farm-grid\" id=\"farm\"> </div> <div class=\"toolbox\"> <h2>种子选择</h2> <div class=\"tool active\" data-tool=\"plant\"> <div class=\"tool-icon\">🌱</div> <div>播种工具</div> </div> <div class=\"tool\" data-tool=\"harvest\"> <div class=\"tool-icon\">🔪</div> <div>收割工具</div> </div> <div class=\"crop-selector\"> <h2>选择作物</h2> <div class=\"crop-display\"> <div class=\"crop carrot active\" data-crop=\"carrot\">🥕</div> <div class=\"crop tomato\" data-crop=\"tomato\">🍅</div> <div class=\"crop wheat\" data-crop=\"wheat\">🌾</div> <div class=\"crop pumpkin\" data-crop=\"pumpkin\">🎃</div> <div class=\"crop corn\" data-crop=\"corn\">🌽</div> <div class=\"crop strawberry\" data-crop=\"strawberry\">🍓</div> </div> </div> </div> </div> <div class=\"stats\"> <h2>农场统计数据</h2> <div class=\"crop-stats\" id=\"stats\"> </div> </div> <div class=\"harvest-message\" id=\"harvestMessage\">收获成功！ + $<span>0</span></div> <script> // 农场数据 const farmData = { plots: [], size: 100, currentTool: \'plant\', currentCrop: \'carrot\', money: 250, stats: { carrot: { planted: 0, harvested: 0, value: 10 }, tomato: { planted: 0, harvested: 0, value: 20 }, wheat: { planted: 0, harvested: 0, value: 15 }, pumpkin: { planted: 0, harvested: 0, value: 30 }, corn: { planted: 0, harvested: 0, value: 25 }, strawberry: { planted: 0, harvested: 0, value: 40 } } }; // 初始化农场 function initFarm() { const farmGrid = document.getElementById(\'farm\'); farmGrid.innerHTML = \'\'; for (let i = 0; i < farmData.size; i++) { const plot = document.createElement(\'div\'); plot.className = \'plot\'; plot.dataset.id = i; const soil = document.createElement(\'div\'); soil.className = \'soil\'; plot.appendChild(soil); plot.addEventListener(\'click\', handlePlotClick); // 添加悬停提示 const tooltip = document.createElement(\'div\'); tooltip.className = \'tooltip\'; tooltip.textContent = \'点击种植\'; plot.appendChild(tooltip); plot.addEventListener(\'mouseenter\', () => { tooltip.style.display = \'block\'; }); plot.addEventListener(\'mouseleave\', () => { tooltip.style.display = \'none\'; }); farmGrid.appendChild(plot); // 初始化地块数据 farmData.plots[i] = { cropType: null, growthStage: 0, isPlanted: false }; } } // 更新统计显示 function updateStats() { const statsContainer = document.getElementById(\'stats\'); statsContainer.innerHTML = \'\'; for (const crop in farmData.stats) { const stat = farmData.stats[crop]; const statItem = document.createElement(\'div\'); statItem.className = \'stat-item\'; const cropName = { carrot: \'🥕 胡萝卜\', tomato: \'🍅 番茄\', wheat: \'🌾 小麦\', pumpkin: \'🎃 南瓜\', corn: \'🌽 玉米\', strawberry: \'🍓 草莓\' }[crop]; statItem.innerHTML = ` ${cropName} 已种: ${stat.planted} 收获: ${stat.harvested} `; statsContainer.appendChild(statItem); } } // 地块点击处理 function handlePlotClick(e) { const plot = e.currentTarget; const plotId = parseInt(plot.dataset.id); const plotData = farmData.plots[plotId]; const tooltip = plot.querySelector(\'.tooltip\'); if (farmData.currentTool === \'plant\') { // 种植逻辑 if (farmData.money < 5) { showMessage(\'金钱不足!\', \'#ff5252\'); return; } if (!plotData.isPlanted) { // 扣除种植费用 farmData.money -= 5; document.getElementById(\'money\').textContent = farmData.money; // 更新地块数据 plotData.isPlanted = true; plotData.cropType = farmData.currentCrop; plotData.growthStage = 0; plotData.harvested = false; // 更新统计数据 farmData.stats[farmData.currentCrop].planted++; // 更新UI updatePlot(plot, plotData); // 更新提示文本 tooltip.textContent = getGrowthStageText(0, farmData.currentCrop); // 开始生长计时 startGrowth(plot, plotData); } } else if (farmData.currentTool === \'harvest\') { // 收割逻辑 if (plotData.isPlanted && plotData.growthStage === 3) { // 添加收获收益 const cropValue = farmData.stats[plotData.cropType].value; farmData.money += cropValue; document.getElementById(\'money\').textContent = farmData.money; // 更新地块数据 plotData.isPlanted = false; // 更新统计数据 farmData.stats[plotData.cropType].harvested++; // 显示收获消息 showMessage(`收获 ${getCropName(plotData.cropType)}! + $${cropValue}`, \'#ffd700\'); // 更新UI updatePlot(plot, plotData); updateStats(); } else if (plotData.isPlanted) { showMessage(`还没成熟! (${getGrowthStageText(plotData.growthStage, plotData.cropType)})`, \'#ff9800\'); } } } // 开始作物生长 function startGrowth(plot, plotData) { const growthInterval = setInterval(() => { if (plotData.growthStage < 3) { plotData.growthStage++; updatePlot(plot, plotData); // 更新提示文本 const tooltip = plot.querySelector(\'.tooltip\'); tooltip.textContent = getGrowthStageText(plotData.growthStage, plotData.cropType); // 成熟时添加提示 if (plotData.growthStage === 3) { plot.classList.add(\'pulse\'); } } else { clearInterval(growthInterval); } }, 2000); // 每2秒生长一个阶段 } // 更新地块显示 function updatePlot(plot, plotData) { // 移除之前的所有作物状态 plot.querySelectorAll(\'.crop-planted\').forEach(el => el.remove()); if (plotData.isPlanted) { const crop = document.createElement(\'div\'); crop.className = `crop-planted ${plotData.cropType}`; if (plotData.growthStage === 0) { const seed = document.createElement(\'div\'); seed.className = \'crop-seed\'; crop.appendChild(seed); } else if (plotData.growthStage === 1) { const sprout = document.createElement(\'div\'); sprout.className = \'crop-sprout\'; crop.appendChild(sprout); } else if (plotData.growthStage === 2) { const growing = document.createElement(\'div\'); growing.className = \'crop-growing\'; crop.appendChild(growing); } else if (plotData.growthStage === 3) { const mature = document.createElement(\'div\'); mature.className = \'crop-mature\'; crop.appendChild(mature); } plot.appendChild(crop); } } // 工具选择 document.querySelectorAll(\'.tool\').forEach(tool => { tool.addEventListener(\'click\', () => { document.querySelectorAll(\'.tool\').forEach(t => t.classList.remove(\'active\')); tool.classList.add(\'active\'); farmData.currentTool = tool.dataset.tool; // 更新所有地块的工具提示 document.querySelectorAll(\'.plot .tooltip\').forEach(tip => { tip.textContent = farmData.currentTool === \'plant\' ? \'点击种植\' : \'点击收割\'; }); }); }); // 作物选择 document.querySelectorAll(\'.crop\').forEach(crop => { crop.addEventListener(\'click\', () => { document.querySelectorAll(\'.crop\').forEach(c => c.classList.remove(\'active\')); crop.classList.add(\'active\'); farmData.currentCrop = crop.dataset.crop; }); }); // 显示消息 function showMessage(text, color) { const message = document.getElementById(\'harvestMessage\'); message.textContent = text; message.style.display = \'block\'; message.style.backgroundColor = color || \'#ffd700\'; setTimeout(() => { message.style.display = \'none\'; }, 2000); } // 获取生长阶段文本 function getGrowthStageText(stage, cropType) { const stages = [ \'种子期\', \'发芽期\', \'生长期\', \'成熟期\' ]; return `${getCropName(cropType)}: ${stages[stage]}`; } // 获取作物名称 function getCropName(cropType) { return { carrot: \'胡萝卜\', tomato: \'番茄\', wheat: \'小麦\', pumpkin: \'南瓜\', corn: \'玉米\', strawberry: \'草莓\' }[cropType]; } // 初始化 window.onload = function() { initFarm(); updateStats(); }; </script></body></html>游戏功能说明
农场布局:
10×10网格的100块土地
右侧的作物选择工具栏
底部的农场统计面板
顶部的资金显示
种植系统：
6种不同作物：胡萝卜、番茄、小麦、南瓜、玉米、草莓
每块土地点击种植
种植需要花费$5
每种作物有独特的生长动画
生长周期：
四个生长阶段：种子期→发芽期→生长期→成熟期
每块土地独立生长计时
成熟作物会有脉动动画提示
收割与统计：
切换到收割工具后可以收割成熟作物
每种作物有不同价值（10−40）
统计面板实时显示种植和收获数量
收获后会在屏幕顶部显示收益
用户体验：
悬停显示土地当前状态
操作时提供视觉反馈和提示信息
复古像素风格界面
响应式设计适应不同屏幕
这个像素农场游戏提供了简单的模拟体验，包含了完整的种植、生长和收获流程，并且有详尽的统计数据。游戏界面设计为复古像素风格，增强了趣味性。
