当前位置：首页 > news >正文

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

news 2026/7/10 1:33:35

好的配色让游戏"有质感"——五子棋的色彩设计

截图如下：

代码如下：

颜色体系总览

本项目的颜色分为三层：

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	胜利提示
黄色	#FA8C16	AI思考中、解锁提示

棋子颜色

黑棋渐变

#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';// 改进：根据系统主题选择不同配色constboardColor=isDarkMode?'#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',};