提到《俄罗斯方块》(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视频教程