Canvas实现贪吃蛇或消除类游戏的核心是：用2D上下文绘图、requestAnimationFrame驱动循环、数组/对象管理状态（如蛇身坐标或网格）、键盘/触摸事件控制输入；贪吃蛇通过坐标数组增删模拟移动，消除类依赖二维数组标记与下落逻辑。
Canvas 实现贪吃蛇或消除类游戏，核心在于用 canvas 的 2D 渲染上下文绘制图形、用定时器驱动游戏循环、用数组或对象管理游戏状态（如蛇身坐标、方块网格），再通过键盘/触摸事件响应玩家操作。不依赖框架，纯 JS 就能跑起来，关键在逻辑组织和帧控制。
用 requestAnimationFrame 做平滑游戏循环
比 setInterval 更适合游戏：浏览器自动适配刷新率，避免丢帧或卡顿。每次回调里做三件事——更新状态（移动蛇、检测碰撞）、绘制画面、递归调用自己。
- 初始化时获取
ctx = canvas.getContext('2d') - 定义
gameLoop()函数，在里面调用update()和render() - 最后用
requestAnimationFrame(gameLoop)启动
贪吃蛇：用数组存蛇身，用方向键控制头朝向
蛇本质是一串坐标点。每帧把新头部坐标（根据当前方向计算）推入数组开头，再删掉尾部坐标；吃到食物就只加头不删尾。
- 方向用对象表示：
{ x: 0, y: -1 }是向上，{ x: 1, y: 0 }是向右 - 按键监听只改方向变量，不直接移动——防止 1 帧内连按多次导致反向穿身
- 碰撞检测包括：撞墙（超出 canvas 边界）、撞自己（新头部坐标是否在蛇身数组中存在）
消除类（如俄罗斯方块、泡泡龙）：用二维数组建网格 + 状态标记
把游戏区域划分为格子，用二维数组（如 board[y][x]）存每个格子内容（0=空，1=方块类型）。消除逻辑靠遍历+标记+下落三步走。
立即学习“前端免费学习笔记（深入）”；
- 例如俄罗斯方块：下落到底后合并到
board，接着扫描整行是否满，满则标记该行，清空后上方格子整体下移 - 例如泡泡龙：用 BFS 或 DFS 找出相邻同色块 ≥3 个，统一设为 0，然后让上方块受重力下落填补空位
- 绘制时遍历数组，根据值决定画什么颜色/图案，位置由
x * cellSize计算
优化体验的小细节不能少
基础功能做完后，加点细节立刻不一样：
- 键盘事件加
event.preventDefault()防止页面滚动 - 暂停功能：用布尔变量开关
gameLoop里的执行逻辑 - 分数和 Game Over 提示：用
ctx.fillText()直接画文字，位置算好居中即可 - 简单音效：用
Audio对象，比如new Audio('beep.mp3').play()（注意首次交互后才能播放）
不复杂但容易忽略。写清楚数据结构、分清更新和渲染职责、控制好输入响应时机，Canvas 小游戏就立住了。
