第2篇 |基于 HarmonyOS 开发战旗小游戏项目详情介绍

前言：

最近朋友参赛获奖了，想一起做个游戏，我想来思去，想起之前在大学的时候玩的一个战旗小游戏，于是萌生想法，想把这个游戏从最初的android系统上复刻下来。一来锻炼下自己的代码能力，二来也可以为后面参加比赛做一个最初的准备。于是想花一段时间把这个小游戏做出来，顺便用几篇文章一起记录总结下。

一：项目

项目大概设计：

模块	功能描述
游戏引擎	回合制管理、移动系统（BFS寻路）、战斗系统、地形效果
AI引擎	敌方自动行动、目标评估、移动决策
地图系统	9×8格子地图、5种地形（平原/森林/山地/水域/道路）
单位系统	5种兵种（战士/弓箭手/骑兵/法师/将军），各有属性特长
UI界面	主菜单、游戏界面（Canvas渲染）、游戏规则说明
交互系统	触摸选择、移动、攻击、回合切换

代码内部结构如下：

开发环境：

以上代码使用DevEco Studio 6.1.1 Release版本，SDK使用的API 23

二：项目最初运行效果

主页面：

游戏页面：

游戏规则界面（弹一个弹窗）：

主要简单界面如上图所示，接下来主要想简单的讲下该简单的小例子，后面可能需要把ux图或者动作也加入其中，目前主要只讲解下这个简单项目里面使用的简单算法和页面布局编写.

三：项目讲解

由于篇幅和时间的限制，该小项目准备花几篇文章来记录.

这篇主要总结下项目的大概和项目使用的哪些类.

项目入口（EntryAbility 里面去加载主界面index.ets）：

TypeScript 复制代码

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    // 设置全屏
    windowStage.getMainWindow().then((win) => {
      win.setWindowLayoutFullScreen(false);
    });

    // 加载主页面
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
        return;
      }
    });
  }

可以看到下面代码，项目一共2个页面，index.ets和gamePage.ets,下方只介绍index.ets

可以看到上方游戏页面截图中，主页面就3个Text控件，绑定跳转点击事件pushUrl到GamePage.ets

TypeScript 复制代码

import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = '远古帝国战旗';

  build() {
    Column() {
      // 标题区域
      Column() {
        Text('⚔️')
          .fontSize(60)
          .margin({ bottom: 10 })

        Text('远古帝国战旗')
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
          .fontColor('#8B4513')

        Text('Ancient Empire War Flag')
          .fontSize(14)
          .fontColor('#A0522D')
          .margin({ top: 5 })
      }
      .margin({ top: 80, bottom: 60 })

      // 按钮区域
      Column({ space: 20 }) {
        Button('开始游戏')
          .width(200)
          .height(50)
          .fontSize(20)
          .backgroundColor('#8B4513')
          .onClick(() => {
            router.pushUrl({ url: 'pages/GamePage' });
          })

        Button('游戏规则')
          .width(200)
          .height(50)
          .fontSize(20)
          .backgroundColor('#A0522D')
          .onClick(() => {
            this.showRules();
          })

        Button('退出游戏')
          .width(200)
          .height(50)
          .fontSize(20)
          .backgroundColor('#CD853F')
          .onClick(() => {
            // 退出应用
          })
      }

      // 底部信息
      Column() {
        Text('版本 1.0.0')
          .fontSize(12)
          .fontColor('#999999')
      }
      .margin({ top: 80 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFF8DC')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  // 显示游戏规则
  showRules(): void {
    router.pushUrl({
      url: 'pages/GamePage',
      params: { showRules: true }
    });
  }
}

任务：

今日任务：

1：总体介绍下该战旗小游戏大概设计

2：介绍主页面设计

接下来任务：

1：介绍下其余页面

2：完善小游戏ux设计和样式