儿童小游戏：像素赛车躲避游戏

角色 (Role)

资深HTML5游戏开发者。

任务 (Task)

创建一款单文件、像素风格的HTML5俯视角赛车躲避游戏，具备以下特性，确保代码清晰、可玩性高且难度递增。

格式 (Format)

1. 核心玩法

玩家控制赛车在三车道公路上躲避迎面障碍物，生命耗尽则游戏结束。

1. 操控

键盘: 左右箭头键切换车道。
触摸: 屏幕底部提供左右虚拟方向按钮（⬅️、➡️）切换车道。

1. 视觉与界面

主题: 深色主题 (例如，背景 #1a202c, 容器 #2d3748)。UI元素使用Tailwind CSS。
画布:
默认尺寸 500x750px，响应式调整并保持宽高比。
启用像素化渲染 (image-rendering: pixelated)，基础像素单元 pixelSize = 10。
道路: 中央行驶区 (如 #718096)，两侧草地 (如 #16a34a，约占画布宽度12%)，中心有向下移动的像素化白色虚线 (透明度0.4)。
玩家赛车:
像素图案 (5x7像素单位): [[0,1,1,1,0], [1,1,2,1,1], [1,1,1,1,1], [0,1,1,1,0], [0,1,1,1,0], [1,0,0,0,1], [1,1,0,1,1]] (0:空, 1:主色 #3b82f6, 2:辅色 #60a5fa)。
初始位于画布底部中央。
障碍物:
至少3种像素风格类型，从顶部随机车道出现。
交通锥 (Cone): 4x4像素单位, 红/浅红 (#ef4444/#fca5a5), 图案: [[0,1,1,0],[1,2,2,1],[1,2,2,1],[1,1,1,1]]。
路障 (Barrier): 6x3像素单位, 橙/浅橙 (#f97316/#fdba74), 图案: [[1,2,1,2,1,2],[1,2,1,2,1,2],[1,1,1,1,1,1]]。
坑洞 (Pothole): 3x2像素单位, 深/浅灰 (#4a5568/#718096), 图案: [[1,1,1],[1,0,1]]。
信息栏: 画布顶部，背景 #2c5282，白色文字。显示：分数、等级、生命 (❤️/🖤)。
消息浮层: 半透明黑色背景，居中显示游戏状态信息 (开始、升级、结束)。标题用 'Press Start 2P' 字体，内容用 'Inter'。含 "开始/重新开始" 按钮。

1. 游戏机制

得分: 躲避障碍物 +10 分。
生命: 初始3点，碰撞减1。
等级: 从1开始，分数达 当前等级 * 150 时升级，浮层提示 "LEVEL X!" 约2秒。
速度与难度:
初始前进速度 (障碍物/道路线) 1.5。
每10分，速度微增 0.0025。
每次升级，速度增加 0.3。
前进速度上限 7。玩家赛车响应速度 (playerCar.speed) 也随等级略微提升并设上限。
障碍物生成:
初始间隔 2500ms。升级后缩短 150ms (最小 500ms)。
屏幕上最大数量 6 + 当前等级。
碰撞: AABB检测。后果：生命-1，移除障碍物。反馈：短暂屏幕震动 (CSS动画)。

1. 游戏状态

初始: 标题 "像素赛车"，操作说明，"开始游戏"按钮。
进行中: 正常游戏，UI实时更新。
等级提升: 短暂显示等级信息。
结束: "游戏结束!"，显示最终分数与等级，"重新开始"按钮。

1. 技术要求

单HTML文件: 包含所有HTML, CSS, JS。
CSS: Tailwind CSS (CDN) 为主，少量自定义 <style>。
字体: Google Fonts: 'Inter', 'Press Start 2P'。
JavaScript: 代码清晰、模块化、注释充分。无外部游戏引擎。
响应式: 适应桌面和移动设备。