劃水神器–在瀏覽器地址欄和標簽頁title里面玩俄羅斯方塊

效果如圖：

在線體驗

1. 原理

URL地址欄中玩：使用window.location.hash動態(tài)修改頁面的hash值

標簽頁中玩：使用document.title動態(tài)修改頁面的title

使用一個定時器，產(chǎn)生方塊下落的效果，監(jiān)聽鍵盤按鍵事件，修改方塊形態(tài)、位置

2. 依賴的庫

為了開發(fā)方便，可以使用這兩個庫：tetris-engine和braille-encode
1. tetris-engine
tetris-engine是用于自行開發(fā)自定義俄羅斯方塊游戲的輕量級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是將二進制數(shù)據(jù)表示為盲文，也就是我們最后實現(xiàn)的方塊，比如下面這些，當然我們用不了這么多。

???????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????

安裝：

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

監(jiān)聽按鈕事件

根據(jù)tetris-engine創(chuàng)建的游戲每次返回值轉(zhuǎn)化為對應(yīng)的盲文

把對應(yīng)的盲文渲染到title和hash

我用vue簡單搞了一個，有興趣的可以搞過去看看。

總結(jié)

以上是生活随笔為你收集整理的划水神器--在浏览器地址栏和标签页title里面玩俄罗斯方块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。