HTML5 俄罗斯方块 jQuery 插件（blockrain.js）

快速上手

使用流程非常短，README 的 Setup 一节给出了完整示例：

1. 在页面中创建一个元素（div、article、figure 均可），并务必通过 CSS 为其设置宽度和高度，否则游戏区域没有尺寸。
2. 引入 jQuery 与 blockrain.js，同时强烈建议引入配套的 blockrain.css，因为它提供了 UI 所需的重要样式（也可以按需自行定制）。
3. 调用 $('.game').blockrain() 完成初始化。

示例结构如下：

<div class="game" style="width:250px; height:500px;"></div>
<link rel="stylesheet" href="blockrain.css">
<script src="jquery.js"></script>
<script src="blockrain.js"></script>
<script>
  $('.game').blockrain();
</script>

如果想让游戏自己玩，可以开启连续自动游玩：$('.game').blockrain({ autoplay: true, autoplayRestart: true })，其中 autoplayRestart 会在机器人失败后自动重开。

主题与自定义外观

Blockrain 内置了多套开箱即用的主题，README 列出的可用主题包括：custom（新增）、candy、modern、retro、vim、monochrome、gameboy、aerolab。开发者也可以把自定义主题加入 BlockrainThemes。

主题对象支持的主要配置项包括：

• background：主背景色；backgroundGrid：可绘制的小网格背景，也支持 base64 编码的自定义纹理。
• primary / secondary：分别覆盖下落方块与已落定方块的颜色。
• stroke / innerStroke：方块边框与内部细边框，用于增加质感。
• blocks：逐类指定七种方块的配色（line、square、arrow、rightHook、leftHook、rightZag、leftZag）。

此外还支持完全自定义的方块贴图：为每种方块指定一张图片，插件会处理其余逻辑；也可以传入图片列表，让 BlockRain 为每个方块随机挑选设计。README 特别提醒，图片需与官方 custom 主题中附带的方块保持完全一致的格式（旋转方式与宽高比）。README 还提到一个有趣的细节：现在连正方形方块也可以旋转了。

配置选项

Options 一节列出了较完整的可调参数，主要分为几类：

• 自动游玩：autoplay 让机器人接管游戏，autoplayRestart 在机器人失败后自动重开。
• 开局表现：showFieldOnStart 在开始界面显示一批随机方块，用于视觉效果。
• 主题与尺寸：theme 接受主题名或主题对象；blockWidth 定义场地宽度（标准为 10 格）；autoBlockWidth 依据 autoBlockSize 动态计算宽度，适合响应式背景，启用后会禁用 blockWidth。
• 难度与速度：difficulty 可选 normal / nice / evil；speed 数值越大方块下落越快。
• 文案：playText、playButtonText、gameOverText、restartButtonText、scoreText 均可替换。
• 回调：onStart、onRestart、onGameOver(score)，以及消行时触发的 onLine(lines, scoreIncrement, score)，可拿到行数、本次得分与总分。