前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我在这个开源项目里找到了童年!

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

作者头像
zz_jesse
发布2020-03-17 16:24:13
5160
发布2020-03-17 16:24:13
举报
文章被收录于专栏:前端技术江湖前端技术江湖

提到《俄罗斯方块》(Tetris),那真是几乎无人不知无人不晓,除此之外,相信许多程序员第一个编程实践项目就是编写一个俄罗斯方块或者是坦克大战

这类的游戏各种编程语言的实现版本都有,今天和大家分享一个用React 编写的俄罗斯方块,在移动端和 PC 都能运行。

先上效果让你们预览一下:

Redux 状态预览

这个游戏的框架使用的是 React + Redux,其中再加入了 Immutable,用它的实例来做来Redux的state。

Immutable 是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。

让我们看下面一段代码:

代码语言:javascript
复制
function keyLog(touchFn) {
  let data = { key: 'value' };
  f(data);
  console.log(data.key); // 猜猜会打印什么?
}

不查看f,不知道它对 data 做了什么,无法确认会打印什么。但如果 data 是 Immutable,你可以确定打印的是 value:

代码语言:javascript
复制
function keyLog(touchFn) {
  let data = Immutable.Map({ key: 'value' });
  f(data);
  console.log(data.get('key'));  // value
}

创建者在GitHub上做了详细的介绍,他在游戏中添加了很多不同的音效,实际上只有一个音效文件,他借助Web Audio Api能够以毫秒级精确、高频率的播放音效,这是<audio>标签所做不到的。在游戏进行中按住方向键移动方块,便可以听到高频率的音效。

游戏的控制流程如下:

如果你是一名前端工程师并且对React感兴趣,拿这个游戏作为练手项目是非常不错的,如果不是,也可以把它当做茶余饭后的休闲项目

目前这款小游戏已经在GitHub上获得了 5058 个Star,840 个Fork(GitHub地址:https://github.com/chvin/react-tetris)喜欢的就拿走吧。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-08-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端技术江湖 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档