![72d2b5aff9fb9e2dea94b38f7b69aa3b.png](https://i-blog.csdnimg.cn/blog_migrate/e28ef5b4ec837f5d66717d0540ed0988.jpeg)
效果如图:
![3ad9a863d5bc182dd239cda46c2792a9.gif](https://i-blog.csdnimg.cn/blog_migrate/b117479ef5d9d677804e3aea17c9fec8.gif)
在线体验
CAOMAGEwww.caomage.com一、原理
- URL地址栏中玩:使用
window.location.hash
动态修改页面的hash值 - 标签页中玩:使用
document.title
动态修改页面的title - 使用一个定时器,产生方块下落的效果,监听键盘按键事件,修改方块形态、位置
二、依赖的库
为了开发方便,可以使用这两个库:tetris-engine和braille-encode
1. tetris-enginetetris-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简单搞了一个,有兴趣的可以搞过去看看。