我写了一个数码宝贝的小游戏~
点击关注公众号,”技术干货”及时达!?小时候很喜欢看的一部动画 “数码宝贝” 陪伴了我大半个童年 直到长大 学习了前端 偶然接触了暴龙机这个玩具 发现 这小别致 挺东西啊 但是怎么现在都还是黑白的 感觉我也能做
??于是乎我跟我一朋友就开始了暴龙机游戏的开发之旅
?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卡片读写等等
尝试更多的内容
希望大家玩的开心
还有还有 接口比较弱 大家手下留情啊
点击关注公众号,”技术干货”及时达!
阅读原文
网站开发网络凭借多年的网站建设经验,坚持以“帮助中小企业实现网络营销化”为宗旨,累计为4000多家客户提供品质建站服务,得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求...
请立即点击咨询我们或拨打咨询热线:13245491521 13245491521 ,我们会详细为你一一解答你心中的疑难。 项目经理在线