用 React+Redux+Immutable 做俄罗斯方块
俄罗斯方块是一直各类程序语言热衷实现的经典游戏,JavsScript的实现版本也有很多,用React 做好俄罗斯方块则成了我一个目标。
效果预览
正常速度的录制,体验流畅。 响应式
不仅指屏幕的自适应,而是
数据持久化
玩单机游戏最怕什么?断电。通过订阅 Redux 状态预览
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,不知道它对 function keyLog(touchFn) { let data = Immutable.Map({ key: 'value' }); f(data); console.log(data.get('key')); // value } JavaScript 中的 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 简洁在 // reducer ... return [ ...oldArr.slice(0,3),newValue,...oldArr.slice(4) ]; 为了返回新的对象(数组),不得不有上面奇怪的样子,而在使用更深的数据结构时会变的更棘手。 // reducer ... return oldArr.set(4,newValue); 是不是很简洁? 关于 “===”我们知道对于 {a:1,b:2,c:3} === {a:1,c:3}; // false [1,2,[3,4]] === [1,4]]; // false 对于上面只能采用 deepCopy 我们感受来一下 map1 = Immutable.Map({a:1,c:3}); map2 = Immutable.Map({a:1,c:3}); Immutable.is(map1,map2); // true // List1 = Immutable.List([1,Immutable.List[3,4]]); List1 = Immutable.fromJS([1,4]]); List2 = Immutable.fromJS([1,4]]); Immutable.is(List1,List2); // true 似乎有阵清风吹过。 React 做性能优化时有一个 在使用原生属性时,为了得出shouldComponentUpdate正确的 对于「俄罗斯方块」,试想棋盘是一个 Immutable学习资料:
2、如何在Redux中使用Immutable
将原来 Redux提供的combineReducers改由上面的库提供: // rootReduers.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; 通过新的 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。借助
其中Source代表一个音频源,Destination代表最终的输出,多个Source合成出了Destination。
可以看到IE阵营与大部分安卓机不能使用,其他ok。 Web Audio Api 学习资料:
4、游戏在体验上的优化技术:
玩法:
5、开发中的经验梳理
6、总结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |