我在這個開源項目裏找到了童年！

提到《俄羅斯方塊》（Tetris），那真是幾乎無人不知無人不曉，除此以外，相信許多程序員第一個編程實踐項目就是編寫一個俄羅斯方塊或者是坦克大戰

這類的遊戲各類編程語言的實現版本都有，今天和你們分享一個用React 編寫的俄羅斯方塊，在移動端和 PC 都能運行。

先上效果讓大家預覽一下：

Redux 狀態預覽

這個遊戲的框架使用的是 React + Redux，其中再加入了 Immutable，用它的實例來作來Redux的state。

Immutable 是一旦建立，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操做都會返回一個新的 Immutable 對象。

讓咱們看下面一段代碼：

functionkeyLog(touchFn){

letdata = {key:'value'};

f(data);

console.log(data.key);// 猜猜會打印什麼？

}

不查看f，不知道它對 data 作了什麼，沒法確認會打印什麼。但若是 data 是 Immutable，你能夠肯定打印的是 value：

functionkeyLog(touchFn){

letdata = Immutable.Map({key:'value'});

f(data);

console.log(data.get('key'));// value

}

建立者在GitHub上作了詳細的介紹，他在遊戲中添加了不少不一樣的音效，實際上只有一個音效文件，他藉助Web Audio Api可以以毫秒級精確、高頻率的播放音效，這是<audio>標籤所作不到的。在遊戲進行中按住方向鍵移動方塊，即可以聽到高頻率的音效。

遊戲的控制流程以下：

若是你是一名前端工程師而且對React感興趣，拿這個遊戲做爲練手項目是很是不錯的，若是不是，也能夠把它當作茶餘飯後的休閒項目

目前這款小遊戲已經在GitHub上得到了 5058 個Star，840 個Fork

項目地址：https://github.com/chvin/react-tetris

來源： 開源最前線

歡迎關注個人公衆號：【編程資源庫】 ，關注後回覆「我來自互聯網」便可領取2000G視頻教程