划水神器–在浏览器地址栏和标签页title里面玩俄罗斯方块
- 2019 年 11 月 20 日
- 筆記
划水神器–在浏览器地址栏和标签页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简单搞了一个，有兴趣的可以搞过去看看。
