划水神器--在浏览器地址栏和标签页title里面玩俄罗斯方块

划水神器–在浏览器地址栏和标签页title里面玩俄罗斯方块

效果如图：

在线体验

1. 原理

1. URL地址栏中玩：使用window.location.hash动态修改页面的hash值
2. 标签页中玩：使用document.title动态修改页面的title
3. 使用一个定时器，产生方块下落的效果，监听键盘按键事件，修改方块形态、位置

2. 依赖的库

为了开发方便，可以使用这两个库：tetris-engine和braille-encode
1. tetris-engine
tetris-engine是用于自行开发自定义俄罗斯方块游戏的轻量级JavaScript库。
可以使用npm安装，安装好之后初始化也很简单：

let areaHeight = 20;
let areaWidth = 15;

let game = new Engine(
   areaHeight, 
   areaWidth, 
   renderFunc, 
   defaultHeap, 
   additionalShapes
);

//For starting game process need run game.start();
//And run cycle that each iteration runs game.moveDown();
game.start();

let firstLevelInterval = 1000;
setInterval(() => {
   game.moveDown();
}, firstLevelInterval);


// Use
game.rotate();
game.rotateBack();
game.moveRight();
game.moveLeft(); 
game.moveDown();
game.pause();
game.start();

//for game managament
//You even use game.moveUp() for your custom game

2. braille-encode

braille-encode是将二进制数据表示为盲文，也就是我们最后实现的方块，比如下面这些，当然我们用不了这么多。

⢀⠠⢠⠐⢐⠰⢰⠈⢈⠨⢨⠘⢘⠸⢸
⡀⣀⡠⣠⡐⣐⡰⣰⡈⣈⡨⣨⡘⣘⡸⣸
⠄⢄⠤⢤⠔⢔⠴⢴⠌⢌⠬⢬⠜⢜⠼⢼
⡄⣄⡤⣤⡔⣔⡴⣴⡌⣌⡬⣬⡜⣜⡼⣼
⠂⢂⠢⢢⠒⢒⠲⢲⠊⢊⠪⢪⠚⢚⠺⢺
⡂⣂⡢⣢⡒⣒⡲⣲⡊⣊⡪⣪⡚⣚⡺⣺
⠆⢆⠦⢦⠖⢖⠶⢶⠎⢎⠮⢮⠞⢞⠾⢾
⡆⣆⡦⣦⡖⣖⡶⣶⡎⣎⡮⣮⡞⣞⡾⣾
⠁⢁⠡⢡⠑⢑⠱⢱⠉⢉⠩⢩⠙⢙⠹⢹
⡁⣁⡡⣡⡑⣑⡱⣱⡉⣉⡩⣩⡙⣙⡹⣹
⠅⢅⠥⢥⠕⢕⠵⢵⠍⢍⠭⢭⠝⢝⠽⢽
⡅⣅⡥⣥⡕⣕⡵⣵⡍⣍⡭⣭⡝⣝⡽⣽
⠃⢃⠣⢣⠓⢓⠳⢳⠋⢋⠫⢫⠛⢛⠻⢻
⡃⣃⡣⣣⡓⣓⡳⣳⡋⣋⡫⣫⡛⣛⡻⣻
⠇⢇⠧⢧⠗⢗⠷⢷⠏⢏⠯⢯⠟⢟⠿⢿
⡇⣇⡧⣧⡗⣗⡷⣷⡏⣏⡯⣯⡟⣟⡿⣿

安装：

npm install braille-encode

初始化：

var brailleEncode = require("braille-encode");

var buf = new Buffer("d41d8cd98f00b204e9800998ecf8427e", "hex");

var str = brailleEncode.encode(buf); 
console.log(str); // "⡓⣘⠙⣋⢹⠀⡥⠐⢏⠁⢈⡉⠟⡏⠢⡾"

var buf2 = brailleEncode.decode(str);
console.log(buf.equals(buf2)); // true

3. 组装一下，完事

有了游戏引擎，也有了方块，接下来就是组装一下。
我们要做的也很简单：

1. 初始化tetris-engine
2. 监听按钮事件
3. 根据tetris-engine创建的游戏每次返回值转化为对应的盲文
4. 把对应的盲文渲染到title和hash

我用vue简单搞了一个，有兴趣的可以搞过去看看。