请收下这份源码,用Vue开发的一个“蚂蚁森林浇水偷菜”游戏

简介: 本文中的小程序开发于2019年8月,在一个月的时间里,我独自完成了策划、设计及前后端开发,本文中所涉及的源码、资源的版权均为本人所有

前言


早在十几年前,我曾为开心农场(FiveMinutes)提供过FLASH技术上的支持。后来社交游戏大爆发的时候,又帮助很多品牌做过各种各样的“农场”,“果园”。2019年利用业余时间,把之前积累的美术资源修改整理了一下,使用Vue完成了一个小程序版的mini果园,叫神奇小花盆


功能概览


image.png


基本具备了农场游戏的全部功能点,包括但不限于金币系统,播种,施肥,浇水,除虫,仓库,图鉴,帮好友浇水、除虫,偷取果实等。所有肉眼可见的动画全部由CSS实现。


后来拿这个作品去参加DCloud插件开发大赛,还有幸得了个三等奖


心得体会


小程序能不能用于发行"游戏"?


严格按照审核标准的话是不能,但是众所周知,微信小程序需要审核,而审核团队是外包出去给第三方服务的,他们对于一个应用是否属于游戏还是应用,看法也不太一致。比如这个“神奇小花盆”,常常是被拒后,再提又过审了。


image.png


为什么选择小程序来发行这个"游戏"


因为小游戏的发行相对麻烦,比如需要著作权登记,开发上也麻烦一些,尤其是在做游戏界面UI上。但优点是小游戏有一些独特社交属性的API,并且一但发布就可以接广告了。小程序则需要满足最少1000个累计用户才可以开通流量主。


Vue框架做游戏合适吗?


答案是肯定的,Vue完全可以胜任一些游戏类型。比如这位掘友 @普通男生 使用Vue做了不少小游戏。


image.png


游戏里的动画都是CSS吗?


本游戏中的动画都是由CSS完成的


比如这个,是两张图片分别叠加一个旋转的animation


image.png


@keyframes ani-swing{
    0%{
        transform: skewX(0deg);
    }
    25%{
        transform: skewX(-3deg);
    }
    75%{
        transform: skewX(3deg);
    }
    100%{
        transform: skewX(0deg);
    }
}


再比如这个植物的呼吸效果和小猪储蓄罐的动画


image.png


@keyframes ani-jelly{
    0%{
        transform: scale(1);
    }
    30%{
        transform: scale(0.98);
    }
    70%{
        transform: scale(1.02);
    }
    100%{
        transform: scale(1);
    }
}


这种游戏好运营吗?


不太好运营,这种游戏现在各种平台,几乎是个大APP都有。比如种假水果得真水果;浇水换零钱等等各种利诱式的运营手段,咱个人做没法比,用户的碎片时间是有限的。不过没运营起来也好,这就给了我一个把它开源并制作教程的机会。


立个FLAG


计划在2021年我会借这个小程序,发布系列教程,文字版会在掘金和本人公众号发布,视频版在B站和本人视频号发布。



源码资源概述


  • 26种水果/植物美术资源,每种植物都有6个生长阶段图


image.png


  • 12款花盆美术资源


image.png


  • 10款汽车美术资源


image.png


  • 浇水除虫施肥动作图标及音效


image.png


image.png


  • 2500+行的代码


image.png



相关文章
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
14天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
14天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex