{"repo":"Binaryify/vue-tetris","free":true,"listed":false,"github":"https://github.com/Binaryify/vue-tetris","clone":"git clone https://github.com/Binaryify/vue-tetris.git","description":"Use Vue, Vuex to code Tetris.使用 Vue, Vuex 做俄罗斯方块","language":"JavaScript","stars":2774,"topics":["vue","vuex","immutable"],"license":"MIT","category":"ui-components","readme_excerpt":"English introduction Please view README.md 用Vue、Vuex 做俄罗斯方块 ---- 本项目灵感来源于 React 版的俄罗斯方块,由于对其实现原理较感兴趣,而且相比于 React 更喜欢 Vue, 于是把 React 版的重构为了 Vue 版的,大致思路是把组件当成一个个函数,保证一个输入(props)能得到一个确定的输出(view),然后对不同方法也是做同样处理,对于 Redux 使用 Vuex 精简化 戳：https://binaryify.github.io/vue-tetris/?lan=zh 玩一玩！ ---- 效果预览 正常速度的录制，体验流畅。 响应式 不仅指屏幕的自适应，而是 在PC使用键盘、在手机使用手指的响应式操作 ： 数据持久化 视频 玩单机游戏最怕什么？断电。通过订阅 store.subscribe ，将state储存在localStorage，精确记录所有状态。网页关了刷新了、程序崩溃了、手机没电了，重新打开连接，都可以继续。 Vuex 状态预览（Vue DevTools extension） 视频 Vuex 设计管理了所有应存的状态，这是上面持久化的保证。 ---- 游戏框架使用的是 Vue + Vuex 1、Web Audio Api 游戏里有很多不同的音效，而实际上只引用了一个音效文件：/build/music.mp3。借助 Web Audio Api 能够以毫秒级精确、高频率的播放音效，这是 标签所做不到的。在游戏进行中按住方向键移动方块，便可以听到高频率的音效。 WAA 是一套全新的相对独立的接口系统，对音频文件拥有更高的处理权限以及更专业的内置音频效果，是W3C的推荐接口，能专业处理“音速、音量、环境、音色可视化、高频、音向”等需求，下图介绍了WAA的使用流程。 其中Source代表一个音频源，Destination代表最终的输出，多个Source合成出了Destination。 源代码：/src/unit/music.js 实现了ajax加载mp3，并转为WAA，控制播放的过程。 WAA 在各个浏览器的最新2个版本下的支持情况（CanIUse） 可以看到IE阵营与大部分安卓机不能使用，其他ok。 Web Audio Api 学习资料： Web API 接口 MDN Getting Started with Web Audio API ---- 3、游戏在体验上的优化 技术： 按下方向键水平移动和竖直移动的触发频率是不同的，游戏可以定义触发频率，代替原生的事件频率，源代码：/src/unit/event.js ； 左右移动可以 delay 掉落的速度，但在撞墙移动的时候 delay 的稍小；在速度为6级时 通过delay 会保证在一行内水平完整移动一次； 对按钮同时注册 touchstart 和 mousedown 事件，以供响应式游戏。当 touchstart 发生时，不会触发 mousedown ，而当 mousedown 发生时，由于鼠标移开事件元素可以不触发 mouseup ，将同时监听 mouseout 模拟 mouseup 。源代码：/src/components/keyboard/index.js； 监听了 visibilitychange 事件，当页面被隐藏\\切换的时候，游戏将不会进行，切换回来将继续，这个 focus 状态也被写进了 Vuex 中。所以当用手机玩来 电话 时，游戏进度将保存；PC开着游戏干别的也不会听到gameover，这有点像 ","default_branch":null,"files":null,"tree":[],"storefront":"/r/Binaryify","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Binaryify/vue-tetris/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}