效果如图:
window.location.hash
动态修改页面的hash值document.title
动态修改页面的title为了开发方便,可以使用这两个库: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
有了游戏引擎,也有了方块,接下来就是组装一下。 我们要做的也很简单:
tetris-engine
tetris-engine
创建的游戏每次返回值转化为对应的盲文我用vue简单搞了一个,有兴趣的可以搞过去看看。