当前位置：首页 > news >正文

像素农场播种机-作物模拟器HTML+CSS+JavaScript

news 2025/7/28 11:08:04

设计一个交互式像素农场游戏，玩家可以在网格土地上播种不同作物，观察作物的生长动画，并收割获得产量统计。
在这里插入图片描述

设计思路

创建像素风格农场界面，包含可种植土地网格
实现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"><!-- 通过JS动态生成100块地 --></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"><!-- 通过JS动态生成统计数据 --></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 = `<div>${cropName}</div><div>已种: ${stat.planted}</div><div>收获: ${stat.harvested}</div>`;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++;// 更新UIupdatePlot(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');// 更新UIupdatePlot(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>