Games · 游戏

Html5小游戏_俄罗斯方块

•̀.̫•́✧ · 6月1日 · 2019年 · 本文451字 · 阅读2分钟1,685

用React、Redux、Immutable做俄罗斯方块。 俄罗斯方块是一直各类程序语言热衷实现的经典游戏,JavaScript的实现版本也有很多 。文章最后附演示地址

效果预览

Html5小游戏_俄罗斯方块-字节智造

正常速度的录制,体验流畅

响应式

Html5小游戏_俄罗斯方块-字节智造

不仅指屏幕的自适应,而是在PC使用键盘、在手机使用手指的响应式操作

Html5小游戏_俄罗斯方块-字节智造

数据持久化

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

Redux 状态预览

Html5小游戏_俄罗斯方块-字节智造

Redux设计管理了所有应存的状态,这是上面持久化的保证。

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

码云:https://zhangsixiang.gitee.io/react-tetris-master/docs/

蓝奏云:https://www.lanzoux.com/i4eg18d

17 条回应
  1. 北乱狂尘2021-4-21 · 19:41

    方块方块

  2. haahah2021-3-1 · 19:19

    厉害了!

  3. hmilly2020-12-29 · 10:33

    谢谢

  4. xswl2020-12-10 · 19:44

    谢谢

  5. 书僮礼佛2020-9-28 · 22:22

    谢谢

  6. ninja2020-8-20 · 9:00

    感谢分享

  7. 2020-7-24 · 10:10

    棒棒