GitHub - chvin/react-tetris: Use React, Redux, Immutable to code Tetris. 🎮

English introduction

Please view README-EN.md

用React�?Redux�?Immutable�?�俄罗斯方�?�

俄罗斯方�?�是一直�?�类程�?语言热衷实现的�?典游�?，JavaScript的实现版本也有很多，用React �?�好俄罗斯方�?�则�?了我一个目标。

戳：https://chvin.github.io/react-tetris/ 玩一玩�?

效果预览

正常速度的录制，体验�?畅。

�?应�?

�?仅指�?幕的自适应，而是在PC使用键盘�?在手机使用手指的�?应�?�?作：

数�?��?久化

玩�?�机游�?最怕什么？断电。通过订阅 store.subscribe，将state储存在localStorage，精确记录所有状�?。网页关了刷新了�?程�?崩溃了�?手机没电了，�?新打开连接，都�?�以继续。

Redux 状�?预览（Redux DevTools extension）

Redux设计管�?�了所有应存的状�?，这是上�?��?久化的�?�?。

游�?框架使用的是 React + Redux，其中�?加入了 Immutable，用它的实例�?��?��?�Redux的state。（有关React和Redux的介�?�?�以看：React入门实例�?Redux中文文档）

1�?什么是 Immutable？

Immutable 是一旦创建，就�?能�?被更改的数�?�。对 Immutable 对象的任何修改或添加删除�?作都会返回一个新的 Immutable 对象。

�?识：

让我们看下�?�一段代�?：

function keyLog(touchFn) {
  let data = { key: 'value' };
  f(data);
  console.log(data.key); // 猜猜会打�?�什么？
}

�?查看f，�?知�?�它对 data �?�了什么，无法确认会打�?�什么。但如果 data 是 Immutable，你�?�以确定打�?�的是 value：

function keyLog(touchFn) {
  let data = Immutable.Map({ key: 'value' });
  f(data);
  console.log(data.get('key'));  // value
}

JavaScript 中的Object与Array等使用的是引用赋值，新的对象简�?�的引用了原始对象，改�?�新也将影�?旧的：

foo = {a: 1};  bar = foo;  bar.a = 2;
foo.a // 2

虽然这样�?��?�以节约内存，但当应用�?�?��?�，造�?了状�?�?�?�控，是很大的�?患，节约的内存优点�?�得得�?�?�失。

Immutable则�?一样，相应的：

foo = Immutable.Map({ a: 1 });  bar = foo.set('a', 2);
foo.get('a') // 1

简�?：

在Redux中，它的最优�?�法是�?个reducer都返回一个新的对象（数组），所以我们常常会看到这样的代�?：

// reducer
...
return [
   ...oldArr.slice(0, 3),
   newValue,
   ...oldArr.slice(4)
];

为了返回新的对象（数组），�?得�?有上�?�奇怪的样�?，而在使用更深的数�?�结构时会�?�的更棘手。让我们看看Immutable的�?�法：

// reducer
...
return oldArr.set(4, newValue);

是�?是很简�?？

关于 “===�?：

我们知�?�对于Object与Array的===比较，是对引用地�?�的比较而�?是“值比较�?，如：

{a:1, b:2, c:3} === {a:1, b:2, c:3}; // false
[1, 2, [3, 4]] === [1, 2, [3, 4]]; // false

对于上�?��?�能采用 deepCopy�?deepCompare�?��??历比较，�?仅麻烦且好性能。

我们感�?��?�一下Immutable的�?�法�?

map1 = Immutable.Map({a:1, b:2, c:3});
map2 = Immutable.Map({a:1, b:2, c:3});
Immutable.is(map1, map2); // true

// List1 = Immutable.List([1, 2, Immutable.List[3, 4]]);
List1 = Immutable.fromJS([1, 2, [3, 4]]);
List2 = Immutable.fromJS([1, 2, [3, 4]]);
Immutable.is(List1, List2); // true

似乎有阵清风�?�过。

React �?�性能优化时有一个大招，就是使用 shouldComponentUpdate()，但它默认返回 true，�?�始终会执行 render() 方法，�?��?��?� Virtual DOM 比较。

在使用原生属性时，为了得出shouldComponentUpdate正确的true or false，�?得�?用deepCopy�?deepCompare�?�算出答案，消耗的性能很�?划算。而在有了Immutable之�?�，使用上�?�的方法对深层结构的比较就�?�的易如�??掌。

对于「俄罗斯方�?��?，试想棋盘是一个二维数组，�?�以移动的方�?�则是形状(也是二维数组)+�??标。棋盘与方�?�的�?�加则组�?了最�?�的结果Matrix。游�?中上�?�的属性都由Immutable构建，通过它的比较方法，�?�以轻�?�写好shouldComponentUpdate。�?代�?：/src/components/matrix/index.js#L35

Immutable学习资料：

2�?如何在Redux中使用Immutable

目标：将state -> Immutable化。关键的库：gajus/redux-immutable 将原�?� Redux�??供的combineReducers改由上�?�的库�??供：

// rootReducers.js
// import { combineReducers } from 'redux'; // 旧的方法
import { combineReducers } from 'redux-immutable'; // 新的方法

import prop1 from './prop1';
import prop2 from './prop2';
import prop3 from './prop3';

const rootReducer = combineReducers({
  prop1, prop2, prop3,
});


// store.js
// 创建store的方法和常规一样
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);
export default store;

通过新的combineReducers将把store对象转化�?Immutable，在container中使用时也会略有�?�?�（但这正是我们想�?的）：

const mapStateToProps = (state) => ({
  prop1: state.get('prop1'),
  prop2: state.get('prop2'),
  prop3: state.get('prop3'),
  next: state.get('next'),
});
export default connect(mapStateToProps)(App);

3�?Web Audio Api

游�?里有很多�?�?�的音效，而实际上�?�引用了一个音效文件：/build/music.mp3。借助Web Audio Api能够以毫秒级精确�?高频率的播放音效，这是<audio>标签所�?��?到的。在游�?进行中按�?方�?�键移动方�?�，便�?�以�?�到高频率的音效。

WAA 是一套全新的相对独立的接�?�系统，对音频文件拥有更高的处�?��?��?以�?�更专业的内置音频效果，是W3C的推�??接�?�，能专业处�?�“音速�?音�?�?环境�?音色�?�视化�?高频�?音�?��?等需求，下图介�?了WAA的使用�?程。

其中Source代表一个音频�?，Destination代表最终的输出，多个Source�?��?出了Destination。 �?代�?：/src/unit/music.js 实现了ajax加载mp3，并转为WAA，控制播放的过程。

WAA 在�?�个�?览器的最新2个版本下的支�?情况（CanIUse）

�?�以看到IE阵�?�与大部分安�?�机�?能使用，其他ok。

Web Audio Api 学习资料：

4�?游�?在体验上的优化

技术：
- 按下方�?�键水平移动和竖直移动的触�?�频率是�?�?�的，游�?�?�以定义触�?�频率，代替原生的事件频率，�?代�?：/src/unit/event.js ；
- 左�?�移动�?�以 delay 掉�?�的速度，但在撞墙移动的时候 delay 的�?�?；在速度为6级时通过delay 会�?�?在一行内水平完整移动一次；
- 对按钮�?�时注册touchstart和mousedown事件，以供�?应�?游�?。当touchstart�?�生时，�?会触�?�mousedown，而当mousedown�?�生时，由于鼠标移开事件元素�?�以�?触�?�mouseup，将�?�时监�?�mouseout 模拟 mouseup。�?代�?：/src/components/keyboard/index.js；
- 监�?�了 visibilitychange 事件，当页�?�被�?�?\切�?�的时候，游�?将�?会进行，切�?�回�?�将继续，这个focus状�?也被写进了Redux中。所以当用手机玩�?�电�?时，游�?进度将�?存；PC开�?�游�?干别的也�?会�?�到gameover，这有点�? ios 应用的切�?�。
- 在任�?时刻刷新网页，（比如消除方�?�时�?游�?结�?�时）也能还原当�?状�?；
- 游�?中唯一用到的图片是，其他都是CSS；
- 游�?兼容 Chrome�?Firefox�?IE9+�?Edge等；
玩法：
- �?�以在游�?未开始时制定�?始的棋盘（�??个级别）和速度（六个级别）；
- 一次消除1行得100分�?2行得300分�?3行得700分�?4行得1500分；
- 方�?�掉�?�速度会�?�?�消除的行数增加（�?20行增加一个级别）；

5�?开�?�中的�?验梳�?�

为所有的component都编写了shouldComponentUpdate，在手机上的性能相对有显著的�??�?�。中大型应用在�?�到性能上的问题的时候，写好shouldComponentUpdate 一定会帮你一把。
无状�?组件（Stateless Functional Components）是没有生命周期的。而因为上�?�因素，所有组件都需�?生命周期 shouldComponentUpdate，所以未使用无状�?组件。
在 webpack.config.js 中的 devServer属性写入host: '0.0.0.0'，�?�以在开�?�时用ip访问，�?局�?在localhost；
redux中的store并�?��?�能通过connect将方法传递给container，�?�以跳出组件，在别的文件拿出�?��?��?程控制(dispatch)，�?代�?：/src/control/states.js；
用 react+redux �?��?久化�?�常的方便，�?��?将redux状�?储存，在�?一个reduers�?��?始化的时候读�?�就好。
通过�?置 .eslintrc.js 与 webpack.config.js ，项目中集�?了 ESLint 检验。使用 ESLint �?�以使编�?按规范编写，有效地控制代�?质�?。�?符规范的代�?在开�?�时（或build时）都能通过IDE与控制�?��?�现错误。 �?�考：Airbnb: React使用规范；

6�?总结

作为一个 React 的练手应用，在实现的过程中�?�现�?�?的“方�?��?还是有很多的细节�?�以优化和打磨，这时就是考验一�??�?端工程师的细心和功力的时候。
优化的方�?�既有 React 的本身，比如哪些状�?由 Redux存，哪些状�?给组件的state就好；而跳出框架�?�有产�?的很多特点�?�以玩，为了达到你的需求，这些都将自然的推进技术的�?�展。
一个项目从零开始，功能一点一滴慢慢累积，就会盖�?高楼，�?�?�?难，有想法就敲起�?��?�。 ^_^

7�?控制�?程

8�?开�?�

安装

npm install

�?行

npm start

�?览自动打开 http://127.0.0.1:8080/

多语言

在 i18n.json �?置多语言环境，使用"lan"�?�数匹�?语言如：https://chvin.github.io/react-tetris/?lan=en

打包编译

npm run build

在build文件夹下生�?结果。

chvin / react-tetris Public

README.md

English introduction

用React�?Redux�?Immutable�?�俄罗斯方�?�

效果预览

�?应�?

数�?��?久化

Redux 状�?预览（Redux DevTools extension）

1�?什么是 Immutable？

�?识：

简�?：

关于 “===�?：

2�?如何在Redux中使用Immutable

3�?Web Audio Api

4�?游�?在体验上的优化

5�?开�?�中的�?验梳�?�

6�?总结

7�?控制�?程

8�?开�?�

安装

�?行

多语言

打包编译

About

Releases

Packages

Contributors 6

Languages

chvin / react-tetris Public

Latest commit

Git stats

Files

README.md

English introduction

用React�?Redux�?Immutable�?�俄罗斯方�?�

效果预览

�?应�?

数�?��?久化

Redux 状�?预览（Redux DevTools extension）

1�?什么是 Immutable？

�?识：

简�?：

关于 “===�?：

2�?如何在Redux中使用Immutable

3�?Web Audio Api

4�?游�?在体验上的优化

5�?开�?�中的�?验梳�?�

6�?总结

7�?控制�?程

8�?开�?�

安装

�?行

多语言

打包编译

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 6

Languages

Packages