我在这个开源项目里找到了童年!

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值