划水神器–在浏览器地址栏和标签页title里面玩俄罗斯方块
效果如图:
在线体验
1. 原理
- URL地址栏中玩:使用
window.location.hash
动态修改页面的hash值- 标签页中玩:使用
document.title
动态修改页面的title- 使用一个定时器,产生方块下落的效果,监听键盘按键事件,修改方块形态、位置
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. 组装一下,完事
有了游戏引擎,也有了方块,接下来就是组装一下。
我们要做的也很简单:
- 初始化
tetris-engine
- 监听按钮事件
- 根据
tetris-engine
创建的游戏每次返回值转化为对应的盲文 - 把对应的盲文渲染到title和hash
我用vue简单搞了一个,有兴趣的可以搞过去看看。