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

从入门到进错门

发布于 2019-11-20 21:14:02

4660

发布于 2019-11-20 21:14:02

文章被收录于专栏：前端菜鸟变老鸟前端菜鸟变老鸟

划水神器–在浏览器地址栏和标签页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