我写了一个数码宝贝的小游戏~ 点击关注公众号，”技术干货”及时达！?小时候很喜欢看的一部动画 “数码宝贝” 陪伴了我大半个童年 直到长大 学习了前端 偶然接触了暴龙机这个玩具 发现 这小别致 挺东西啊 但是怎么现在都还是黑白的 感觉我也能做 ??于是乎我跟我一朋友就开始了暴龙机游戏的开发之旅 ?1.0链接 https://digi_vice.gitee.io/digivice/#/pages/index/index?1.0属于是张口就来说干就干的版本 想到什么写什么 然后导致了 数据膨胀 文件也过于臃肿 一笔带过 有兴趣的哥们可以体验一下 ?船新版本2.0 (手机横屏访问)2.0链接 http://106.55.53.206/digivice/index.html 使用技术nuxt2 + vantanimejslottie怎么做的在开始做之前，我也考虑过这个问题，该用什么技术手段去实现，cocos Egret 小游戏等等都有尝试过，感觉思想还没到那个境界，有点吃不透，最后还是赶鸭子上架，使出了三板斧 html + css + js，在我的理解里面，其实2d游戏就是一些图片根据用户的行为在动而已，感觉上使用三板斧是可以做到的 ↓ 一些图 2.png3.png一些有意思的点数码兽数据存放问题?有了1.0的前车之鉴（将所有数码兽数据都放到一个文件内，导致一个文件上万行，加载速度异常的慢） ?2.0将每个宠的数据都分开文件进行存储 并且在对战前进行引入 image.png对战回合分发在设计对战页面的时候，我打算这样实现，将整个对战类比成一个现实的对局 比如狼人杀游戏 旁白 控制每位玩家的行动 轮流行动 还是按照什么方式玩家 参与该对局的玩家最终我拆分成了以下几个组件（咱就不在意命名了） battle-dealer 回合控制组件 控制了开始 回合检查 结束等逻辑digimon-render 数码兽渲染组件 控制数码兽的动作 攻击 技能 等等digimon-state 数码兽的状态栏 展示数码兽的血量 技能cd buff等等dm-action-render 数码兽的动作渲染 根据数码兽设定的动作帧 进行动作渲染一个对战页面就由这些组成了 各司其职 当时写完之后感觉 思路从来没有这么清晰过 感觉带上脑子写就是好（说明上班没带脑子？） 扭蛋机扭蛋机的一个动作是这样 投币 - 扭蛋 - 出扭蛋 - 出结果 但是怎么将这些动作连贯起来呢 我的设计师哥们瓜哥给我整了一些gif图 不下蛋的图 下蛋的图 扭蛋机空壳图 剩下就是拼图片了 默认情况 扭蛋机空壳+不下蛋的图 点击扭蛋之后就是 扭蛋机空壳+下单的图 很简单 但是事实却不那么顺利 使用v-if 控制不下蛋 与 下蛋图的显示隐藏 会发现显示下蛋图的时候 蛋可能就落地了 就是我根本没法控制gif图的播放 我本以为v-if会让这个图片不渲染 并且设置为true的时候从第一帧开始播放 查阅多方资料后 得知 可以通过修改img的src属性 来让gif图从第一帧开始播放 imgclass="rotate-img"ref="rotateEgg":src="calcRotateImg"/ computed:{ calcRotateImg(){ if(!this.resultType){ returnthis.eggaImgDefault }elseif(this.resultType==1){ returnthis.eggImga }elseif(this.resultType==2){ returnthis.eggImgs } }, } 通过替换图片地址的方式 实现了这一整个流程 (现在想想 使用lottie也可以实现 控制播放帧) 其他还有其他大大小小的东西就说不过来了 按照权重随机获得道具道具购买 道具使用 道具限购横屏竖屏xy坐标翻转背景视频 点击音效 等等等等写在最后?本游戏不涉及氪金成分 只有自愿赞助服务器 ?为什么要写这篇文章，可能是一时兴起，也可能想认识更多的人，也想听听大家的意见看看有没有一些好玩的想法可以尝试加到里面 目前做了一些 socket世界boss sse邮件系统 二维码解析后面还打算做 陀螺仪 nfc卡片读写等等 尝试更多的内容 希望大家玩的开心 还有还有 接口比较弱 大家手下留情啊 点击关注公众号，”技术干货”及时达！ 阅读原文