CNode

使用 Vue, Vuex, Immutable 做俄罗斯方块

分享
BBinaryify发布于9 年前最后回复9 年前10 回复8773 浏览0 收藏

本项目灵感来源于 React 版的俄罗斯方块,由于对其实现原理较感兴趣,而且相比于 React 更喜欢 Vue, 于是把 React 版的重构为了 Vue 版的,大致思路是把组件当成一个个函数,保证一个输入(props)能得到一个确定的输出(view),然后对不同方法也是做同样处理,对于 Redux 使用 Vuex 精简化 项目地址:https://github.com/Binaryify/vue-tetris

戳:http://binaryify.github.io/vue-tetris/ 玩一玩!


效果预览

效果预览

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

响应式

响应式

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

手机

数据持久化

视频

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

Vuex 状态预览(Vue DevTools extension

视频

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

查看回复

回复 (10)

F
False-L#1·9 年前

厉害了 收藏了

来自酷炫的 CNodeMD

R
renshunli#2·9 年前

我很少评论。。我去。真是厉害了。。

H
Huqiuwei#3·9 年前

讲真要我写我写不出来,虽然我是react党

B
Binaryify#4·9 年前
引用 Huqiuwei讲真要我写我写不出来,虽然我是react党

@Huqiuwei 真正厉害的是 React 版的作者,我只是尽量不改动游戏核心逻辑,用相同的数据驱动 Vue 写的组件,只是这适配的过程也花了我一个星期的时间

K
koroshi#5·9 年前

厉害了

Q
qichangjun#6·9 年前

大写的服,还注意了很多细节

Q
qinyang912#7·9 年前

厉害了

H
htoooth#8·9 年前

厉害了

D
dbit-xia#9·9 年前

厉害了

B
binginto#10·9 年前

真厉害!

参与回复
登录后即可参与回复。登录