Blockrain.js 俄罗斯方块

Blockrain.js 是什么

Blockrain.js 是一个基于 jQuery 的 HTML5 俄罗斯方块游戏插件。它把完整的游戏逻辑封装成一个 jQuery 插件，你只需要准备一个带宽高的容器元素，再调用 $('.game').blockrain() 就能在网页里跑起一局俄罗斯方块。项目还内置了自动游玩（autoplay）模式，可以让机器人自己玩给自己看。

快速上手

1. 准备容器

创建一个元素，并通过 CSS 设置宽高：

<div class="game" style="width:250px; height:500px;"></div>

2. 引入依赖并初始化

引入 jQuery、blockrain.js 以及配套样式表，然后调用插件：

<link rel="stylesheet" href="blockrain.css">
<script src="jquery.js"></script>
<script src="blockrain.js"></script>
<script>
  $('.game').blockrain();
</script>

3. 开启自动游玩

如果想让游戏自己玩自己，可以打开自动模式：

$('.game').blockrain({ autoplay: true, autoplayRestart: true });

主题与外观定制

Blockrain 自带多套主题，包括 candy、modern、retro、vim、monochrome、gameboy、aerolab 等，也支持自定义主题对象。你可以设置背景色、网格、方块颜色、描边等参数，甚至使用 base64 图片作为背景纹理。

更进一步，每个方块都可以使用完全自定义的图片设计，插件会自动处理旋转与渲染；如果传入图片数组，还能让同一类方块随机显示不同贴图。

常用配置项

插件提供了一组直观的配置参数，例如：

• autoplay：是否让机器人自动游玩
• theme：主题名称或主题对象
• blockWidth / autoBlockWidth：场地宽度与自适应宽度
• difficulty：难度（normal / nice / evil）
• speed：方块下落速度
• onStart、onGameOver、onLine 等回调，方便接入计分与状态逻辑

控制方法

初始化之后，可以通过方法名控制游戏状态：

$game.blockrain('start');    // 开始
$game.blockrain('pause');    // 暂停
$game.blockrain('resume');   // 继续
$game.blockrain('restart');  // 重开
$game.blockrain('theme', 'vim'); // 切换主题
var score = $game.blockrain('score'); // 读取当前分数

适用与注意

它非常适合作为网页小游戏、前端教学示例或活动页互动模块。需要注意的是，项目依赖 jQuery，且主要面向桌面键盘操作，移动端触控体验有限；同时项目更新较早，若用于现代前端工程，建议评估维护成本或自行封装。