canvas实现贪吃蛇或消除类游戏的核心是：用2d上下文绘图、requestanimationframe驱动循环、数组/对象管理状态（如蛇身坐标或网格）、键盘/触摸事件控制输入；贪吃蛇通过坐标数组增删模拟移动，消除类依赖二维数组标记与下落逻辑。

Canvas 实现贪吃蛇或消除类游戏，核心在于用 canvas 的 2D 渲染上下文绘制图形、用定时器驱动游戏循环、用数组或对象管理游戏状态（如蛇身坐标、方块网格），再通过键盘/触摸事件响应玩家操作。不依赖框架，纯 JS 就能跑起来，关键在逻辑组织和帧控制。

用 requestAnimationFrame 做平滑游戏循环

比 setInterval 更适合游戏：浏览器自动适配刷新率，避免丢帧或卡顿。每次回调里做三件事——更新状态（移动蛇、检测碰撞）、绘制画面、递归调用自己。

• 初始化时获取 ctx = canvas.getContext('2d')
• 定义 gameLoop() 函数，在里面调用 update() 和 render()
• 最后用 requestAnimationFrame(gameLoop) 启动

贪吃蛇：用数组存蛇身，用方向键控制头朝向

蛇本质是一串坐标点。每帧把新头部坐标（根据当前方向计算）推入数组开头，再删掉尾部坐标；吃到食物就只加头不删尾。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 方向用对象表示：{ 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 小游戏就立住了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！