前言

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

功能概览

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

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

心得体会

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

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

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

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

Vue框架做游戏合适吗？

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

游戏里的动画都是CSS吗？

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

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

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

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

@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个生长阶段图

• 12款花盆美术资源

• 10款汽车美术资源

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

• 2500+行的代码