贪吃蛇游戏设计-2.画游戏背景

2.画游戏背景

/**

• 贪吃蛇游戏 - 主页面
• 功能说明：
• 1. 游戏界面：标题、分数显示、游戏画布、控制按钮
• 2. 画布绑定：CanvasRenderingContext2D 绑定到画布
• 3. 方向控制：通过按钮控制蛇的移动方向
• 4. 游戏绘制：绘制背景和网格
     */

/**

• 游戏主组件
• @Entry 装饰器标记这是页面入口组件
• @Component 装饰器标记这是一个UI组件
  */
  

@Entry @Component struct ParentComp { // ==================== 画布相关变量 ==================== /** 画布渲染设置：开启抗锯齿功能，使绘制的图形边缘更平滑 */ private settings: RenderingContextSettings = new RenderingContextSettings(true) /** 画布绑定的上下文：所有绘图操作都通过此对象执行 */ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) /** 画布大小（正方形），根据屏幕宽度计算 */ @State canvasSize: number = 300 // ==================== 游戏状态变量 ==================== /** 定时器ID，用于控制游戏循环 * -1 表示游戏未开始 * 其他值表示定时器的唯一标识符 */ @State timerId: number = -1 /** 游戏暂停状态 * true 表示暂停中 * false 表示游戏中 */ @State isPaused: boolean = false /** 当前分数，吃一个食物得10分 */ @State score: number = 0 // ==================== 蛇的属性变量 ==================== /** 每个方块的宽度（像素），用于计算蛇身和网格大小 */ @State rectWidth: number = 15 /** 蛇的移动方向 * 1 = 上（Y减小） * 2 = 下（Y增大） * 3 = 左（X减小） * 4 = 右（X增大）*/ @State rectD