[特殊字符] 种菜模拟器 — 鸿蒙ArkTS完整技术解析

应用定位 ：田园生活模拟类小应用

技术栈 ：HarmonyOS NEXT + ArkTS + Stage模型

源码行数 ：161行

核心亮点：Grid网格农场布局、多阶段植物生长、地块选中系统、经济循环系统

---

一、引言

种菜模拟器是系列中第一个使用 Grid网格布局 和 地块选中系统 的应用。它模拟了从播种→浇水→生长→收获→出售的完整种植循环。

从技术角度看，种菜模拟器引入了多个全新的ArkTS概念：

• Grid网格布局：3×2 的地块网格，每个地块独立管理状态
• 多阶段生长系统：从种子到成熟经历6个阶段，每个阶段展示不同emoji
• 地块选中交互：玩家选中特定地块进行操作
• 资源管理系统：种子、水、金钱三种资源的协同管理
• 商店系统：用金钱购买种子和水

---

二、需求分析

2.1 功能需求

需求ID	功能	描述
F1	农场网格	3×2共6块地
F2	地块选中	点击选择地块，高亮显示
F3	播种	在地块上消耗种子播种
F4	浇水	消耗水促进生长
F5	多阶段生长	幼苗→成长→开花→结果→成熟
F6	收获	成熟后收获获得金钱
F7	商店	用金钱购买种子和水
F8	资源管理	种子、水、金钱三种资源

2.2 状态模型

@State crops: string[] = ['🌱', '🌱', '🌱', '🌱', '🌱', '🌱'];
@State growth: number[] = [0, 0, 0, 0, 0, 0];
@State seeds: number = 10;
@State water: number = 50;
@State money: number = 0;
@State message: string = '🌱 欢迎来到农场！';
@State selectedPlot: number = -1;

关键设计 ：使用两个平行数组管理地块状态：

• crops：每个地块当前显示的emoji
• growth：每个地块的生长进度（0-100）

这种设计基于"一个状态一个变量"的原则，避免了对象数组的复杂性。

---

三、Grid网格布局

3.1 网格定义

Grid() {
  ForEach(this.crops, (item: string, index: number) => {
    GridItem() {
      Column() {
        Text(item)
          .fontSize(36)
        if (this.selectedPlot === index) {
          Text('已选中')
            .fontSize(12)
            .fontColor('#4CAF50')
        }
      }
      .width(80)
      .height(80)
      .backgroundColor(this.selectedPlot === index ? '#E8F5E9' : '#F1F8E9')
      .borderRadius(10)
      .border({ 
        width: this.selectedPlot === index ? 2 : 1, 
        color: this.selectedPlot === index ? '#4CAF50' : '#CCC' 
      })
      .onClick(() => {
        this.selectedPlot = index;
      })
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)

3.2 Grid配置解析

属性	值	说明
columnsTemplate	'1fr 1fr 1fr'	三列等宽
rowsTemplate	'1fr 1fr'	两行等高
columnsGap	10	列间距10px
rowsGap	10	行间距10px

fr 是 Grid 布局中的弹性单位（fraction），1fr 表示等分可用空间。

3.3 选中高亮效果

地块选中时通过三层视觉反馈标识：

1. 文字提示：显示"已选中"标签
2. 背景色变化 ：从 #F1F8E9 变为 #E8F5E9
3. 边框强调 ：从 1px #CCC 变为 2px #4CAF50

这种多重反馈确保用户清晰地知道当前操作的目标地块。

---

四、多阶段生长系统

4.1 生长阶段定义

private stage: string[] = ['🥬', '🌿', '🌾', '🌽', '🍅', '🌻'];

6个阶段对应不同的生长状态：

阶段	进度	emoji	描述
0	0-16%	🌱	种子
1	17-33%	🥬	发芽
2	34-50%	🌿	幼苗
3	51-66%	🌾	生长
4	67-83%	🌽	开花
5	84-100%	🍅	结果/成熟

4.2 生长阶段计算

let stageIdx = Math.floor(this.growth[this.selectedPlot] / 25);
this.crops[this.selectedPlot] = this.stage[Math.min(stageIdx, 5)];

每次浇水后，重新计算当前生长阶段并更新显示的emoji。

公式 ：growth / 25 → 因为100%分为6个阶段，但使用5个阈值点（25, 50, 75, 100），Math.min(stageIdx, 5) 防止超出数组。

4.3 浇水促进生长

this.growth[this.selectedPlot] = Math.min(100, this.growth[this.selectedPlot] + 25);

每次浇水增加25%生长进度。从种子到成熟需要 100/25 = 4次 浇水。加上播种操作，一共5步完成一轮种植。

---

五、播种与收获

5.1 播种逻辑

if (this.crops[this.selectedPlot] !== '🌱') {
  this.message = '这块地已经有作物了！';
  return;
}
this.seeds--;
this.crops[this.selectedPlot] = '🌱';
this.growth[this.selectedPlot] = 0;

三守卫：

1. 未选中地块 → "请选择一块地"
2. 种子不足 → "种子用完了"
3. 地块已有作物 → "已有作物"

5.2 收获逻辑

if (this.growth[this.selectedPlot] < 100) {
  this.message = '还没成熟呢，再等等...⏳';
  return;
}
let earned = 10 + Math.floor(Math.random() * 20);
this.money += earned;
this.crops[this.selectedPlot] = '🌱';
this.growth[this.selectedPlot] = 0;

收获金额：10-29元随机，包含基础收益 + 浮动收益。成熟后地块重置为"空"（🌱 种子状态）。

---

六、经济循环系统

6.1 三资源循环

种子 → 播种 → 浇水 → 成熟 → 收获
  ↑                        ↓
  └────── 商店 (5元) ←─── 金钱
  └────── 水 (5元配3种子5水)

资源流转：

1. 种子（消耗品）→ 播种
2. 水（消耗品）→ 浇水
3. 金钱（中间品）→ 购买种子和水
4. 收获 → 金钱

6.2 商店系统

if (this.money < 5) {
  this.message = '钱不够，买不起种子😅';
  return;
}
this.money -= 5;
this.seeds += 3;
this.water += 5;

5元购买3个种子 + 5单位水。这个定价考虑了投入产出比：

• 投入：5元（商店）
• 潜在产出：每块地收获10-29元
• 6块地满种一轮潜在产出：60-174元
• 净收益：55-169元

ROI（投资回报率） ：(55~169) / 5 = 1100% ~ 3380% --- 非常高的回报率，确保玩家能正向循环。

---

七、UI布局与交互

7.1 顶部信息栏

Row() {
  Text('🌰 种子 ' + this.seeds)
    .margin({ right: 15 })
  Text('💧 水 ' + this.water)
    .margin({ right: 15 })
  Text('💰 ' + this.money + '元')
}

三种资源横向排列，方便用户随时查看库存。

7.2 操作按钮排列

第一行：🌰 播种 | 💧 浇水 | 🧺 收获
第二行：🏪 商店

播种、浇水、收获三个核心操作在同一行，商店在一行单独放置。这种分组方式按"操作频率"划分------核心操作在上，辅助操作在下。

---

八、与养猫模拟器的对比

维度	种菜模拟器	养猫模拟器
核心布局	Grid网格	Column+Progress
状态类型	平行数组	独立标量
选中操作	地块选中	无选中
生长机制	手动浇水	自动衰减
经济系统	✅ 完整循环	❌ 无
操作密度	高(5操作)	中(4操作)

---

九、扩展思路

9.1 不同作物种类

private cropTypes = [
  { name: '🍅 番茄', stages: ['🌱','🌿','🌻','🍅'], price: 15 },
  { name: '🥕 胡萝卜', stages: ['🌱','🌿','🌻','🥕'], price: 12 },
  { name: '🍆 茄子', stages: ['🌱','🌿','🌻','🍆'], price: 18 },
];

9.2 天气系统

@State weather: string = '☀️ 晴天';

// 随机天气变化
setInterval(() => {
  let weathers = ['☀️ 晴天', '☁️ 阴天', '🌧️ 雨天', '⛅ 多云'];
  this.weather = weathers[Math.floor(Math.random() * weathers.length)];
  if (this.weather === '🌧️ 雨天') {
    // 自动浇水效果
  }
}, 10000);

9.3 害虫系统

@State hasPests: boolean[] = [false, false, false, false, false, false];

// 随机出现害虫
if (Math.random() > 0.8) {
  this.hasPests[plotIdx] = true;
}

9.4 数据持久化

import { Preferences } from '@kit.ArkData';

// 保存农场状态
Preferences.save('farm_state', JSON.stringify({
  crops: this.crops,
  growth: this.growth,
  seeds: this.seeds,
  money: this.money
}));

---

十、总结

种菜模拟器展示了ArkTS在"农场模拟"场景下的开发模式：

1. Grid网格布局：使用 Grid + GridItem 实现3×2农场
2. 平行数组管理：两个数组（crops显示/growth进度）管理6块地
3. 选中交互：点击选中高亮，操作的"靶向"机制
4. 多阶段生长：从种子到成熟的6阶段emoji展示
5. 经济循环：播种→生长→收获→卖钱→买种子的完整闭环

种菜模拟器是系列中UI布局最复杂、交互维度最多的应用之一，为后续更复杂的模拟器垫定了技术基础。

---