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

语言: CN / TW / HK

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:http://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:


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

前言

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

功能概览

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

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

心得体会

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

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

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

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

Vue框架做游戏合适吗?

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

游戏里的动画都是CSS吗?

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

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

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

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

~~~css @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站和本人视频号发布。

B站:大帅ezshine

源码资源概述

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

  • 12款花盆美术资源

  • 10款汽车美术资源

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

  • 2500+行的代码

关注大帅

如果你喜欢大帅的教程,请收藏,点赞,关注吧

  • 哔哩哔哩:大帅老猿
  • 微信公众号:大帅老猿

近期文章(感谢掘友的鼓励与支持🌹🌹🌹) - 🔥做了一夜动画,就为让大家更好的理解Vue3的Composition Api 925赞 - 🔥2020更新,Vue仿探探拖拽卡片的效果 1071赞 - 🔥这段代码可以将Canvas录制为webm视频文件 41赞 - 🔥对【经典前端】项目进行工程化改造的经验分享 38赞 - 🔥快过年了,用JS让你的网页放🎆烟花吧 584赞