提到《俄羅斯方塊》（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

專案地址：https://github.com/chvin/react-tetris

來源： 開源最前線

歡迎關注我的公眾號：【程式設計資源庫】 ，關注後回覆“我來自網際網路”即可