The small program in this paper was developed in August 2019. Within one month, I completed the planning, design and front-end development alone. All the source code and resource copyright involved in this paper are my own

preface

I did FLASH support for FiveMinutes a dozen years ago. Later, when social games exploded, it helped a lot of brands do all kinds of “farms” and “orchards”. In 2019, I modified and sorted out the art resources I had accumulated in my spare time, and completed a mini orchard named Magic Flower Basin with Vue.

Functions overview

Basically all the features of the farm game, including but not limited to the gold system, sowing, fertilizing, watering, deworming, warehouse, map, watering friends, deworming, stealing fruit, etc. All visual animations are implemented by CSS.

Later, I took this work to participate in the DCloud plug-in development competition and was fortunate to win the third prize.

tips

Can applets be used to publish “games”?

Strictly in accordance with the review standards, it is not, but as we all know, wechat small programs need to be reviewed, and the review team is outsourced to a third party service, and they have different views on whether an application is a game or an application. For example, this “magic flower basin” is often rejected, and then mentioned again.

Why choose applets to publish this “game”

Because the release of small games is relatively troublesome, such as the need for copyright registration, the development is also troublesome, especially in the game interface UI. But the advantage is that small games have apis with unique social attributes and can be advertised as soon as they are released. Small programs need to meet at least 1000 cumulative users can open traffic master.

Is the Vue framework suitable for games?

The answer is yes, there are some types of games that Vue can play. For example, the Digger @normal boy made a lot of games with Vue.

Are all the animations in the game CSS?

The animations in this game are all done by CSS

For example, two images are superimposed with a rotating animation

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

Or the breathing effect of the plant and the animation of the piggy bank

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

Is it an easy game to operate?

It’s not easy to operate. It’s available on almost every major APP on every platform. If you grow fake fruit, you get real fruit. Watering for change and so on all kinds of luring operation means, we can not do than the individual, the user’s fragment time is limited. But it’s good that it’s not up and running, which gives me a chance to open source it and make tutorials.

Set a FLAG

I plan to use this small program to release a series of tutorials in 2021. The text version will be released on The Nuggets and my official account, and the video version will be released on the B station and my video account.

B station: Ezshine

Download the source code

The source code will only be available for download during the Excavation 2020 Excellent Author Vote.

Wechat search “ezfullstack” after attention to reply to “small flower basin” to obtain the source code.

Source code resource Overview

  • 26 fruit/plant art resources with 6 growth stages for each plant

  • 12 flowerpot art resources

  • 10 car art resources

  • Watering, insect removal and fertilization action icon and sound effect

  • 2500+ lines of code

Pay attention to a guard

An old programmer with a design background wants to code until he’s 70

Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 925 likes
  • 🔥2020 update, Vue probe the effects of dragging cards 1071 likes
  • 🔥 this code can record Canvas as webM video file 41 likes
  • 🔥 share the experience of engineering transformation of the [classic front end] project with 38 likes
  • 🔥 fast Chinese New Year, with JS let your webpage put 🎆 fireworks 584 praise