# tetris-vue **Repository Path**: lazycatcloud/tetris-vue ## Basic Information - **Project Name**: tetris-vue - **Description**: Use Vue, Vuex to code Tetris.使用 Vue, Vuex 做俄罗斯方块 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: https://github.com/Binaryify/vue-tetris - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2023-11-30 - **Last Updated**: 2024-01-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### English introduction Please view [README.md](https://github.com/Binaryify/vue-tetris/blob/master/README-EN.md) ## 用Vue、Vuex 做俄罗斯方块 ---- 本项目灵感来源于 React 版的[俄罗斯方块](https://github.com/chvin/react-tetris),由于对其实现原理较感兴趣,而且相比于 React 更喜欢 Vue, 于是把 React 版的重构为了 Vue 版的,大致思路是把组件当成一个个函数,保证一个输入(props)能得到一个确定的输出(view),然后对不同方法也是做同样处理,对于 Redux 使用 Vuex 精简化 戳:[https://binaryify.github.io/vue-tetris/?lan=zh](https://binaryify.github.io/vue-tetris/?lan=zh) 玩一玩! ---- ### 效果预览 ![效果预览](https://img.alicdn.com/tps/TB1Ag7CNXXXXXaoXXXXXXXXXXXX-320-483.gif) 正常速度的录制,体验流畅。 ### 响应式 ![响应式](https://img.alicdn.com/tps/TB1AdjZNXXXXXcCapXXXXXXXXXX-480-343.gif) 不仅指屏幕的自适应,而是`在PC使用键盘、在手机使用手指的响应式操作`: ![手机](https://img.alicdn.com/tps/TB1kvJyOVXXXXbhaFXXXXXXXXXX-320-555.gif) ### 数据持久化 [视频](https://static.binaryify.com/persistence.mp4) 玩单机游戏最怕什么?断电。通过订阅 `store.subscribe`,将state储存在localStorage,精确记录所有状态。网页关了刷新了、程序崩溃了、手机没电了,重新打开连接,都可以继续。 ### Vuex 状态预览([Vue DevTools extension](https://github.com/vuejs/vue-devtools)) ![preview](https://static.binaryify.com/vuex.gif) [视频](https://static.binaryify.com/vuex.mp4) Vuex 设计管理了所有应存的状态,这是上面持久化的保证。 ---- 游戏框架使用的是 [Vue](https://github.com/vuejs/vue) + [Vuex](https://github.com/vuejs/vuex) ## 1、Web Audio Api 游戏里有很多不同的音效,而实际上只引用了一个音效文件:[/build/music.mp3](https://github.com/Binaryify/vue-tetris/blob/master/build/music.mp3)。借助`Web Audio Api`能够以毫秒级精确、高频率的播放音效,这是`