【共创季稿事节】谁是卧底词语生成器_鸿蒙开发实战

谁是卧底词语生成器 — 鸿蒙 HarmonyOS 应用开发实战一、项目背景谁是卧底是一款非常受欢迎的线下聚会游戏。游戏中每位玩家会获得一个词语其中大部分玩家的词语相同平民词而少数玩家的词语不同卧底词。玩家需要通过描述自己的词语来找出卧底同时卧底需要隐藏自己的身份。这个游戏的核心乐趣在于词语的相似性——比如高跟鞋和增高鞋、牛奶和豆浆这样的近义词对。然而每次玩游戏都需要有人提前准备词语这在实际聚会中往往是个麻烦。为了解决这个痛点我决定开发一款谁是卧底词语生成器应用运行在鸿蒙 HarmonyOS 平台上支持 API 24 版本能够随机生成平民词和卧底词让游戏随时开玩。二、技术选型为什么选择 HarmonyOS鸿蒙系统作为新一代的国产操作系统其生态正在快速发展。选择 HarmonyOS 作为开发平台主要有以下考虑跨设备能力HarmonyOS 支持手机、平板、智慧屏等多设备协同性能优异ArkTS 编译方案性能接近原生开发体验ArkTS 语言基于 TypeScript学习成本低生态前景随着鸿蒙生态的完善用户群体会越来越大开发技术栈技术版本/说明开发语言ArkTS鸿蒙原生声明式 UI 语言框架HarmonyOS ArkUI 声明式框架构建工具Hvigor鸿蒙构建系统API 版本6.1.0(23) 兼容 API 24项目结构Stage 模型单页面应用三、应用设计界面设计理念应用采用深色主题风格主色调为深蓝色背景#1a1a2e搭配红色#e94560强调色。整体设计遵循以下原则简洁直观三页面交互流程用户无需学习即可上手视觉聚焦词语和角色信息居中展示减少干扰元素色彩编码绿色代表平民红色代表卧底一目了然安全隐私词语查看前需要点击查看按钮避免他人偷看交互流程首页 → 游戏页逐人查看 → 结果页 → 再来一局整个应用只有三个页面每个页面的功能单一明确首页设置玩家人数3-16人点击开始游戏游戏页每位玩家依次查看自己的角色和词语结果页展示词对对照揭示卧底身份四、核心功能实现4.1 词语库设计词语库是应用的核心数据。我精心收集了160 余组经典谁是卧底词对涵盖日常生活的各个方面// 词对数据结构interfaceWordPair{civilian:string// 平民词undercover:string// 卧底词}// 示例词对constWORD_PAIRS:WordPair[][{civilian:高跟鞋,undercover:增高鞋},// 鞋类{civilian:牛奶,undercover:豆浆},// 饮品{civilian:火锅,undercover:麻辣香锅},// 美食{civilian:熊猫,undercover:考拉},// 动物{civilian:吉他,undercover:尤克里里},// 乐器// ... 共 160 组]词语分类包括美食类火锅/麻辣香锅、包子/饺子、薯条/薯片等服饰类西装/中山装、拖鞋/凉鞋、高跟鞋/增高鞋等动物类老虎/狮子、熊猫/考拉、蝴蝶/蜻蜓等家居类台灯/吊灯、沙发/躺椅、枕头/抱枕等文艺类钢琴/电子琴、吉他/尤克里里、笛子/箫等自然类山峰/丘陵、河流/小溪、彩虹/晚霞等交通类火车/高铁、自行车/电动车、地铁/轻轨等科技类手机/平板、电脑/笔记本、鼠标/触摸板等4.2 游戏逻辑游戏的核心逻辑非常简洁但完整startGame():void{// 1. 从不重复的词对池中随机选取一组letavailable:number[][]for(leti0;iWORD_PAIRS.length;i){if(!this.usedIndices.has(i)){available.push(i)}}// 如果所有词对都用过重置池子if(available.length0){this.usedIndices.clear()availableWORD_PAIRS.map((_,i)i)}// 2. 随机选取词对this.pairIndexavailable[Math.floor(Math.random()*available.length)]this.usedIndices.add(this.pairIndex)this.currentPairWORD_PAIRS[this.pairIndex]// 3. 随机指定卧底this.undercoverIndexMath.floor(Math.random()*this.playerCount)// 4. 重置游戏状态this.currentViewingPlayer0this.isRevealedfalsethis.currentPagegame}关键设计点防重复机制使用Setnumber记录已使用的词对索引确保连续多局不会重复自动重置当所有词对都用完后自动清空记录重新开始随机安全使用Math.random()确保每次分配结果不可预测状态管理通过State装饰器管理页面状态ArkUI 自动响应式渲染4.3 页面状态管理应用使用State装饰器管理三个页面的状态切换StatecurrentPage:stringhome// home | game | result这种设计的好处单页面应用减少页面跳转开销状态集中管理逻辑清晰使用Builder装饰器拆分页面组件代码模块化4.4 UI 组件实现每个页面都用Builder装饰器拆分为独立的构建函数EntryComponentstruct Index{StatecurrentPage:stringhomebuild(){Column(){if(this.currentPagehome){this.homePage()}elseif(this.currentPagegame){this.gamePage()}elseif(this.currentPageresult){this.resultPage()}}.width(100%).height(100%).backgroundColor(#1a1a2e)}BuilderhomePage(){/* 首页 UI */}BuildergamePage(){/* 游戏页 UI */}BuilderresultPage(){/* 结果页 UI */}}五、页面详解5.1 首页首页是用户进入应用的第一个界面包含三个核心元素标题区域使用放大镜 emoji配合谁是卧底和词语生成器中英文标题营造游戏氛围。人数选择器采用左右加减按钮的交互方式支持 3-16 人范围。人数过少3人游戏无法进行人数过多16人卧底体验会下降因此做了边界限制。[-] 6 []开始按钮醒目的红色渐变按钮带有阴影效果吸引用户点击。5.2 游戏页游戏页是最核心的交互页面设计上格外注重隐私保护进度指示器顶部的圆点进度条直观展示当前是第几位玩家。已查看的玩家用红色标记未查看的用灰色标记。查看前状态显示请点击查看你的身份提示并警告请确保其他玩家没有偷看。这个设计非常重要——在实际聚会场景中手机通常在多位玩家间传递必须确保词语不被他人看到。查看后状态点击查看按钮后显示角色身份“你是平民或你是卧底”和对应的词语。平民词和卧底词分别用绿色和红色标识视觉上强化角色区分。传递引导查看完成后显示记住你的词语后将手机传给下一位玩家的引导文字。最后一位玩家点击时按钮变为查看结果。revealWord():void{this.isRevealedtruethis.viewedPlayers[this.currentViewingPlayer]true}nextPlayer():void{if(this.currentViewingPlayerthis.playerCount-1){this.currentViewingPlayerthis.isRevealedfalse}else{this.currentPageresult}}5.3 结果页所有玩家查看完毕后进入结果页词语对照区用两个色块卡片分别展示平民词绿色背景和卧底词红色背景卧底揭示区显示卧底是第几位玩家操作按钮再来一局和返回首页两个按钮结果页的作用不仅是揭示答案更是游戏讨论环节的视觉辅助——大家可以看到具体的词对讨论刚才的描述是否暴露了身份。六、视觉风格与用户体验6.1 色彩体系用途颜色色值主背景深蓝色#1a1a2e卡片背景深蓝色变体#16213e强调色红色#e94560平民词绿色#4caf50卧底词红色#f44336次要文字灰紫色#a0a0c0弱化文字暗灰#6060806.2 卡片式布局每个页面都使用卡片式布局Card UI这是当前移动端最受欢迎的布局方式之一圆角矩形20px 的圆角半径投影效果使用shadow属性添加阴影层次感内边距合理的 padding 保证内容呼吸感6.3 响应式适配页面使用layoutWeight(1)实现弹性空间分配确保在不同屏幕尺寸上都能合理布局。底部按钮使用固定的百分比宽度75%兼顾美观和易用性。七、开发踩坑与经验分享7.1 Set 类型兼容性在 ArkTS 中使用Setnumber时需要注意版本兼容性。虽然 ES6 的 Set 在 ArkTS 中受支持但早期版本可能存在兼容问题。如果遇到问题可以改用普通数组实现去重// 替代方案使用数组代替 SetusedIndices:number[][]isUsed(index:number):boolean{returnthis.usedIndices.indexOf(index)!-1}7.2 Builder 中的条件渲染在Builder函数中使用条件渲染时需要将条件放在容器组件的 children 闭包内而不是在Builder的顶层使用链式调用// ✅ 正确写法BuildermyBuilder(){Column(){if(condition){Text(A)}else{Text(B)}}}// ❌ 错误写法BuildermyBuilder(){if(condition){// 不能在 builder 顶层直接 ifText(A)}}7.3 API 版本配置项目配置中需要指定兼容的 SDK 版本。在build-profile.json5中配置{ app: { products: [{ targetSdkVersion: 6.1.0(23), compatibleSdkVersion: 6.1.0(23), runtimeOS: HarmonyOS }] } }API 24 是 HarmonyOS 的一个重要版本支持更多新特性。在配置时需要注意 SDK 是否已安装否则构建会报错。7.4 构建与签名使用 Hvigor 构建系统通过命令行即可完成构建hvigorw assembleHap--modemodule-pproductdefault-pbuildModedebug构建后会在entry/build/default/outputs/default/目录下生成.hap文件。调试模式下生成的 HAP 未签名如需部署到真机需要配置签名证书或在 DevEco Studio 中直接运行。八、完整代码结构entry/src/main/ets/ ├── entryability/ │ └── EntryAbility.ets # 应用入口 Ability ├── entrybackupability/ │ └── EntryBackupAbility.ets # 备份扩展 └── pages/ └── Index.ets # 主页面含全部逻辑应用采用单页面架构所有功能和 UI 集中在Index.ets中数据结构~5 行WordPair接口定义数据层~150 行160 组词对数据逻辑层~100 行游戏状态管理、角色分配UI 层~450 行三个页面的 UI 构建函数这种架构对于小型应用非常合适——所有代码在一个文件中便于阅读和维护。当应用功能增多时可以按以下方式拆分pages/ ├── Index.ets # 路由入口 ├── HomePage.ets # 首页组件 ├── GamePage.ets # 游戏页组件 ├── ResultPage.ets # 结果页组件 └── data/ └── WordPairs.ets # 词语数据九、应用亮点总结即开即用下载安装后直接使用无需联网超大词库160 组精心设计的词对长期游戏不重复防偷看设计点击才显示词语保护游戏公平性视觉友好深色护眼主题色彩编码清晰简单纯粹聚焦核心功能无广告无干扰十、未来可扩展方向虽然当前版本已经可以满足基本游戏需求但还有很多可以扩展的方向自定义词库允许用户添加自己的词对多人离线通过蓝牙或 Wi-Fi Direct 实现多人同步计时功能增加发言计时器规范游戏流程投票系统内置投票计票功能主题切换支持浅色/深色主题切换历史记录记录已玩过的词对和数据统计十一、结语通过这个项目我完整地体验了鸿蒙 HarmonyOS 应用从设计到开发再到构建上线的全过程。ArkTS 语言的声明式 UI 编程模型与 SwiftUI、Jetpack Compose 等现代框架一脉相承学习曲线平缓。谁是卧底词语生成器虽然是一个轻量级应用但它涵盖了移动应用开发的诸多核心概念状态管理、条件渲染、列表渲染、用户交互、UI 设计等。对于想要入门鸿蒙开发的开发者来说这是一个非常适合练手的项目。希望这篇博客能够帮助到正在学习鸿蒙开发的你。如果你对这个项目感兴趣欢迎在评论区交流讨论—