下面我将介绍如何在HarmonyOS 5中使用ArkUI-X框架实现一个简单的换装小游戏。这个游戏允许用户为角色选择不同的服装、配饰等。

项目结构

/MyDressUpGame
  ├── entry
  │   └── src
  │       ├── main
  │       │   ├── ets
  │       │   │   ├── components
  │       │   │   │   ├── CharacterComponent.ets  // 角色组件
  │       │   │   │   ├── WardrobeComponent.ets   // 衣柜选择组件
  │       │   │   ├── pages
  │       │   │   │   ├── Index.ets               // 主页面
  │       │   │   ├── model
  │       │   │   │   ├── DressItem.ets           // 服装数据模型
  │       │   ├── resources                       // 资源文件
  │       │   │   ├── base
  │       │   │   │   ├── element                 // 图片等资源

实现步骤

1. 创建数据模型 (DressItem.ets)

export class DressItem {
  id: number;
  name: string;
  type: string; // 'hair', 'top', 'bottom', 'shoes', 'accessory'
  image: Resource;
  selected: boolean = false;
  
  constructor(id: number, name: string, type: string, image: Resource) {
    this.id = id;
    this.name = name;
    this.type = type;
    this.image = image;
  }
}

2. 创建角色组件 (CharacterComponent.ets)

@Component
export struct CharacterComponent {
  @State characterImage: Resource = $r('app.media.character_base');
  @Link hair: DressItem;
  @Link top: DressItem;
  @Link bottom: DressItem;
  @Link shoes: DressItem;
  @Link accessory: DressItem;

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 基础角色
      Image(this.characterImage)
        .width(300)
        .height(400)
      
      // 叠加服装部件
      Image(this.hair?.image)
        .width(300)
        .height(400)
        .visibility(this.hair ? Visibility.Visible : Visibility.None)
      
      Image(this.top?.image)
        .width(300)
        .height(400)
        .visibility(this.top ? Visibility.Visible : Visibility.None)
      
      Image(this.bottom?.image)
        .width(300)
        .height(400)
        .visibility(this.bottom ? Visibility.Visible : Visibility.None)
      
      Image(this.shoes?.image)
        .width(300)
        .height(400)
        .visibility(this.shoes ? Visibility.Visible : Visibility.None)
      
      Image(this.accessory?.image)
        .width(300)
        .height(400)
        .visibility(this.accessory ? Visibility.Visible : Visibility.None)
    }
  }
}

3. 创建衣柜选择组件 (WardrobeComponent.ets)

@Component
export struct WardrobeComponent {
  @Link items: DressItem[];
  @State selectedType: string = 'hair';
  
  build() {
    Column() {
      // 类型选择器
      Segmented({ barPosition: BarPosition.End })
        .selected(this.selectedType)
        .onChange((index: number) => {
          const types = ['hair', 'top', 'bottom', 'shoes', 'accessory'];
          this.selectedType = types[index];
        })
        .width('100%')
        .height(50)
        .padding(10) {
        SegmentedItem('发型')
        SegmentedItem('上衣')
        SegmentedItem('下装')
        SegmentedItem('鞋子')
        SegmentedItem('配饰')
      }
      
      // 服装列表
      Grid() {
        ForEach(this.items.filter(item => item.type === this.selectedType), (item: DressItem) => {
          GridItem() {
            Image(item.image)
              .width(80)
              .height(80)
              .border({ width: item.selected ? 2 : 0, color: Color.Blue })
              .onClick(() => {
                // 取消同类型其他选项
                this.items.forEach(i => {
                  if (i.type === item.type) {
                    i.selected = false;
                  }
                });
                item.selected = true;
              })
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height('60%')
    }
  }
}

4. 创建主页面 (Index.ets)

import { DressItem } from '../model/DressItem';

@Entry
@Component
struct Index {
  @State characterImage: Resource = $r('app.media.character_base');
  @State hairItems: DressItem[] = [
    new DressItem(1, '长发', 'hair', $r('app.media.hair1')),
    new DressItem(2, '短发', 'hair', $r('app.media.hair2')),
    // 更多发型...
  ];
  @State topItems: DressItem[] = [
    // 上衣数据...
  ];
  @State bottomItems: DressItem[] = [
    // 下装数据...
  ];
  @State shoesItems: DressItem[] = [
    // 鞋子数据...
  ];
  @State accessoryItems: DressItem[] = [
    // 配饰数据...
  ];
  
  @State selectedHair: DressItem = null;
  @State selectedTop: DressItem = null;
  @State selectedBottom: DressItem = null;
  @State selectedShoes: DressItem = null;
  @State selectedAccessory: DressItem = null;
  
  build() {
    Column({ space: 20 }) {
      // 标题
      Text('换装小游戏')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
      
      // 角色展示区域
      CharacterComponent({
        characterImage: this.characterImage,
        hair: this.selectedHair,
        top: this.selectedTop,
        bottom: this.selectedBottom,
        shoes: this.selectedShoes,
        accessory: this.selectedAccessory
      })
      
      // 衣柜选择区域
      WardrobeComponent({
        items: [...this.hairItems, ...this.topItems, ...this.bottomItems, ...this.shoesItems, ...this.accessoryItems]
      })
      .onItemSelect((item: DressItem) => {
        switch(item.type) {
          case 'hair':
            this.selectedHair = item;
            break;
          case 'top':
            this.selectedTop = item;
            break;
          case 'bottom':
            this.selectedBottom = item;
            break;
          case 'shoes':
            this.selectedShoes = item;
            break;
          case 'accessory':
            this.selectedAccessory = item;
            break;
        }
      })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

功能扩展建议

1. ​​保存搭配​​：添加保存功能，让用户可以保存自己喜欢的搭配
2. ​​分享功能​​：将搭配好的形象分享到社交媒体
3. ​​更多动画​​：添加换装时的动画效果
4. ​​多角色选择​​：提供多个基础角色供选择
5. ​​主题背景​​：允许更换不同的背景场景

注意事项

1. 确保所有图片资源都已添加到项目的resources/base/element目录中
2. 根据实际需求调整组件大小和布局
3. 对于ArkUI-X的跨平台特性，可以在Android和iOS平台上测试运行效果
4. 考虑性能优化，特别是当服装部件较多时

这个换装小游戏展示了ArkUI-X的组件化开发思想，通过组合不同的组件和数据绑定，实现了灵活的换装功能。你可以根据需要进一步扩展和完善这个游戏。