html5本身不是游戏引擎，所谓“用html5制作游戏”实为用canvas+javascript手写渲染与逻辑循环；需通过getcontext('2d')绘图、requestanimationframe驱动循环、clearrect清屏、fillrect重绘，并用key状态标记法响应键盘输入，再加入边界碰撞检测。
HTML5 本身不是游戏引擎，没有 createGame() 这种内置函数；所谓“用 HTML5 制作游戏”，实际是用 Canvas + JavaScript（配合 requestAnimationFrame、键盘事件等）手写渲染与逻辑循环——这是最轻量、最可控的起点。
用 <canvas></canvas> 绘制第一个可动方块
Canvas 是 HTML5 游戏的视觉基础。它不自动刷新，需手动清屏、重绘、循环：
- 在 HTML 中放一个
<canvas id="game"></canvas>，并用getContext('2d')获取绘图上下文 - 定义方块位置
x、y和速度dx、dy - 用
requestAnimationFrame(loop)替代setInterval，保证流畅动画 - 每次循环中：调用
clearRect()清屏 → 更新坐标 → 用fillRect()重绘
注意：Canvas 坐标原点在左上角，y 增大表示向下移动；若没调用 clearRect()，方块会拖影。
响应键盘控制：监听 keydown 和 keyup
浏览器默认不持续触发 keydown，所以不能只靠单次事件更新位置；需用状态标记法：
立即学习“前端免费学习笔记（深入）”；
- 声明布尔对象如
keys = { ArrowLeft: false, ArrowRight: false } - 在
keydown里设keys[e.key] = true，keyup里设false - 在主循环中根据
keys.ArrowRight决定是否给dx赋值（比如dx = 4），再让x += dx
别用 e.keyCode（已废弃），统一用 e.key；方向键名是 "ArrowUp" 而非 "Up"；空格键是 " "（字符串空格）。
加入简单碰撞检测：判断方块是否碰到画布边缘
这是最基础的物理反馈，只需在每次更新坐标后检查边界：
- 若
x ，则 <code>x = 0; dx = 0;（停住）或dx = -dx;（反弹） - 同理处理
x + width > canvas.width、y 、<code>y + height > canvas.height - 注意：Canvas 的
width/height属性是像素值，不是 CSS 样式尺寸；若用 CSS 放大 canvas，会导致模糊和坐标偏移
别直接修改 style.width 来缩放 canvas——应设置 canvas.width 和 canvas.height 属性，并用 CSS 控制显示大小（此时需按比例换算鼠标/键盘坐标）。
为什么不用现成引擎（如 Phaser、PixiJS）？
它们能省掉 Canvas 初始化、帧循环、输入管理等胶水代码，但代价是：你得先理解这些胶水在做什么。新手跳过这步，很容易卡在“为什么角色不动”“为什么按键没反应”却查不到根源。
真正容易被忽略的是：Canvas 的 DPI 缩放（高分屏下 devicePixelRatio）、requestAnimationFrame 的时间戳精度、键盘事件的重复触发抑制（e.repeat），以及——所有游戏逻辑必须跑在单线程 JS 主线程里，没“多线程物理”这种东西。
