HarmonyOS 小游戏《对战五子棋》开发第24篇 - 颜色资源设置

好的配色让游戏有质感——五子棋的色彩设计截图如下代码如下颜色体系总览本项目的颜色分为三层1. Canvas绘制颜色ChessBoardView内部constBOARD_BG_COLOR:string#D4A868;// 棋盘木色constLINE_COLOR:string#5C4033;// 网格线深棕constSTAR_COLOR:string#3B2F2F;// 星位黑色constLAST_MOVE_COLOR:string#E63946;// 最后一手红色2. 资源文件颜色color.json{color:[{name:start_window_background,value:#F5F5DC},{name:board_color,value:#D4A868},{name:line_color,value:#3B2F2F},{name:black_piece,value:#1A1A1A},{name:white_piece,value:#FFFFFF}]}3. 页面内联颜色硬编码在build方法中.backgroundColor(#F5F0E8)// 页面背景.fontColor(#333333)// 主文字.fontColor(#999999)// 次要文字.backgroundColor(#4A90D9)// 蓝色按钮.backgroundColor(#E8913C)// 橙色按钮色彩设计理念棋盘配色经典木色背景#D4A868浅木色/赭石色 线条#5C4033深棕色模拟传统木质棋盘的视觉效果给人温暖、经典的感觉。页面配色暖色调页面背景#F5F0E8米白色 卡片背景#FFFFFF纯白 文字主色#333333深灰 文字次色#999999浅灰功能色颜色色值用途蓝色#4A90D9双人对战、主要按钮橙色#E8913C人机闯关、AI相关红色#E63946最后一手标记、失败提示绿色#52C41A胜利提示黄色#FA8C16AI思考中、解锁提示棋子颜色黑棋渐变#666666高光→ #2A2A2A中间→ #111111边缘不是纯黑而是从深灰到近黑的渐变模拟真实棋子的立体感。白棋渐变#FFFFFF高光→ #F0F0F0中间→ #C8C8C8边缘不是纯白而是从纯白到浅灰的渐变让白棋有质感而非平面。深色模式适配// base/element/color.json{name:start_window_background,value:#F5F5DC}// dark/element/color.json{name:start_window_background,value:#333333}系统切换到深色模式时启动窗口背景自动从米白色变为深灰色。注意本项目目前只适配了启动窗口背景的深色模式。棋盘和页面的颜色仍使用内联硬编码值未完全适配深色模式。这是一个可以改进的方向。颜色使用规范透明度表示.fontColor(#FFFFFFCC)// 白色80%不透明度.backgroundColor(#00000066)// 黑色40%不透明度8位十六进制颜色前6位RGB后2位Alpha透明度。关卡颜色编码privatelevels:LevelConfig[][{color:#52C41A,...},// 简单绿色安全{color:#FA8C16,...},// 普通橙色注意{color:#F5222D,...},// 困难红色危险];用颜色传达难度等级——绿→橙→红是通用的安全→危险色彩语言。当前设计的不足与改进不足1硬编码颜色过多// 当前颜色散落在各处.fontColor(#333333).backgroundColor(#4A90D9)// 改进统一到资源文件.fontColor($r(app.color.text_primary)).backgroundColor($r(app.color.button_primary))不足2棋盘颜色未适配深色模式// 当前Canvas内联颜色不受深色模式影响constBOARD_BG_COLOR:string#D4A868;// 改进根据系统主题选择不同配色constboardColorisDarkMode?#3B2F2F:#D4A868;不足3缺少颜色常量文件建议创建Colors.ets统一管理exportconstCOLORS{PRIMARY:#4A90D9,SECONDARY:#E8913C,DANGER:#E63946,SUCCESS:#52C41A,TEXT_PRIMARY:#333333,TEXT_SECONDARY:#999999,BG_PAGE:#F5F0E8,BG_CARD:#FFFFFF,};总结色彩设计是游戏视觉品质的基础经典木色棋盘模拟传统棋盘质感渐变棋子径向渐变增加立体感功能色编码蓝/橙/红/绿传达不同语义透明度8位Hex控制不透明度深色模式资源限定实现自动切换改进方向是统一颜色管理、完善深色模式适配。