小细节大体验——棋盘上那些容易被忽略的视觉元素标记截图星位棋盘的坐标参照物什么是星位星位是棋盘上的特殊标记点传统五子棋/围棋棋盘上有5个星位0 1 2 3 4 ... 7 ... 11 ... 14 ┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐ 3 │ │ │ ★ │ │ │ │ ★ │ │ ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤ 7 │ │ │ │ │ ★ │ │ │ │ │ ← 天元 ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤ 11│ │ │ ★ │ │ │ │ ★ │ │ └──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘代码实现conststars:number[][][[3,3],[3,11],[7,7],[11,3],[11,11]];ctx.fillStyleSTAR_COLOR;for(conststarofstars){constsxhalfCellstar[1]*cellSize;constsyhalfCellstar[0]*cellSize;ctx.beginPath();ctx.arc(sx,sy,3,0,Math.PI*2);ctx.fill();}星位的作用视觉参照帮助玩家快速定位棋盘位置美观性增加棋盘的传统感开局参考天元(7,7)是常见的开局位置星位坐标解析[3, 3]左上星位[3, 11]右上星位[7, 7]天元中心[11, 3]左下星位[11, 11]右下星位这5个位置在15x15棋盘上呈对称分布符合传统棋盘的美学。星位半径ctx.arc(sx,sy,3,0,Math.PI*2);固定3像素半径——不随cellSize变化。这是一个设计选择星位保持固定大小在不同屏幕上视觉一致。最后一手标记代码实现if(this.lastMoveRow0this.lastMoveCol0){constpxhalfCellthis.lastMoveCol*cellSize;constpyhalfCellthis.lastMoveRow*cellSize;ctx.strokeStyleLAST_MOVE_COLOR;// #E63946 红色ctx.lineWidth2;ctx.beginPath();ctx.arc(px,py,cellSize*0.16,0,Math.PI*2);ctx.stroke();}设计要点红色空心圆stroke()而非fill()不遮挡棋子半径cellSize * 0.16比棋子(0.42)小得多是一个小标记线宽2像素足够醒目但不粗糙条件绘制lastMoveRow 0时才绘制为什么用空心圆而非实心实心圆不推荐 空心圆本项目 ◯ ◯ ◉ ← 实心遮挡棋子 ◉ ← 空心不遮挡 ◯ ◯空心圆画在棋子上面但不遮挡棋子的渐变效果。用户体验价值在快节奏的对局中玩家很容易忘记对手刚才下在哪里。最后一手标记解决了这个问题双人对战双方都能看到最后一步AI对战玩家能看清楚AI的落子位置悔棋后标记移动到上一步位置标记的更新机制// ChessBoardView通过Prop接收ProplastMoveRow:number-1;ProplastMoveCol:number-1;// 父组件更新privaterefreshBoardData():void{this.lastMoveRowthis.engine.lastMove?this.engine.lastMove.row:-1;this.lastMoveColthis.engine.lastMove?this.engine.lastMove.col:-1;}当引擎的lastMove变化时父组件更新PropWatch触发drawBoard()重绘新的最后一手标记自动绘制。悔棋后的标记// GomokuEngine.undo()if(this.history.length0){constprevthis.history[this.history.length-1];this.lastMovenewMove(prev.row,prev.col);}else{this.lastMovenull;// 没有历史时清除标记}悔棋后lastMove指向倒数第二步标记自动移动。如果悔到空棋盘lastMove为null标记消失lastMoveRow -1。drawBoard中的绘制顺序privatedrawBoard():void{// 1. 清空画布ctx.clearRect(0,0,size,size);// 2. 绘制背景ctx.fillRect(0,0,size,size);// 3. 绘制网格线// 4. 绘制星位// 5. 绘制棋子// 6. 绘制最后一手标记 ← 最后绘制在最上层}绘制顺序决定图层后绘制的在上方。最后一手标记最后绘制确保它在棋子之上。总结星位和最后一手标记看似是小细节但对用户体验有重要影响星位传统棋盘的视觉参照增加专业感最后一手标记红色空心圆醒目且不遮挡绘制顺序标记在棋子之上确保可见自动更新通过Prop数据驱动无需手动管理悔棋适配标记自动跟随历史记录移动这些细节让游戏从能玩变成好玩。