請收下這份源碼,用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

貢獻主題:https://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贊