使用Vue開發“螞蟻森林澆水偷菜”遊戲的心得體會

語言: CN / TW / HK

本文中的小程序開發於2019年8月,在一個月的時間裏,我獨自完成了策劃、設計及前後端開發,本文中所涉及的源碼、資源的版權均為本人所有

前言

早在十幾年前,我曾為開心農場(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站和本人視頻號發佈。

B站:大帥ezshine

源碼下載

僅在 掘金2020優秀作者投票 活動期間提供源碼下載。

微信搜索“ezfullstack”關注後回覆“小花盆”獲取源碼。

源碼資源概述

  • 26種水果/植物美術資源,每種植物都有6個生長階段圖

  • 12款花盆美術資源

  • 10款汽車美術資源

  • 澆水除蟲施肥動作圖標及音效

  • 2500+行的代碼

關注大帥

一個學設計出身的老程序猿希望把代碼寫到70歲


近期文章(感謝掘友的鼓勵與支持🌹🌹🌹)