设计一个交互式像素农场游戏，玩家可以在网格土地上播种不同作物，观察作物的生长动画，并收割获得产量统计。
设计思路
创建像素风格农场界面，包含可种植土地网格
实现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++;
// 更新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）
统计面板实时显示种植和收获数量
收获后会在屏幕顶部显示收益
用户体验：
悬停显示土地当前状态
操作时提供视觉反馈和提示信息
复古像素风格界面
响应式设计适应不同屏幕
这个像素农场游戏提供了简单的模拟体验，包含了完整的种植、生长和收获流程，并且有详尽的统计数据。游戏界面设计为复古像素风格，增强了趣味性。