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