PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Friends can still remember the electronic pets, with the recent progress of science and technology, this kind of products have basically faded out of our sight, but I believe that they have added a lot of fun to your life.

The year of the tiger is coming, I took a little immature idea, made a simple version of the electronic pet tiger, hoping to give you digging friends touch fish time to increase some fun.

Play it on your computer, not your phone. It's not fit

Play it on your computer, not your phone. It's not fit

Play it on your computer, not your phone. It's not fit

Project online experience address: http://122.112.181.245/

Source code address: gitee.com/wei_rong_xi…

I. Introduction of gameplay

This game is an imitation of electronic pets, including login, registration, learning to speak, eating dumplings, visiting, and so on. It is the first version, with relatively simple functions, and I am the back-end, the front-end level is limited, and the current page is relatively common.

So far, the interesting point is the interaction between the tiger and the different players, such as visiting the house, stealing the dumplings of other players, or going to someone’s house to learn a sentence that other players have taught the tiger. At the same time, you can check who has stolen your little tiger’s dumplings and so on.

At the same time, the pet has a hunger value. When the hunger value reaches zero, the pet will leave you.

At present, such functions are fed back by the way of small tiger speaking, but also relatively single.

Let’s give you a specific introduction:

1.1 the login

First is the login interface, do not need to register, as long as it is a different account, set a password, automatic login and receive a small tiger.

1.2 the main page

After logging in, a tiger cub is seen drinking water on the main page below.

The lower left corner has its name: the owner’s name + small tiger, suggest players to use the name of the nuggets, increase the fun, and hunger value, dumplings number, hunger value is empty, your little tiger will leave you. The initial value of 100, minus 1 every half hour, by eating dumplings can increase the hunger value.

Below are the four function buttons of the original version, which are happy New Year, eat dumplings, learn to speak, and go to visit.

The top can see who stole my dumplings, talk record, visit harvest.

On the top right is a leave button.

1.3 New Year’s day good

This function is one of the simplest functions I designed initially. The tiger will speak randomly, and it will randomly say one sentence from the current tiger, depending on what is taught to the tiger.

1.4 eat dumplings

Eat dumplings this is mainly to improve the hunger of the little tiger, every half an hour will drop 1 point, to 0, the little tiger left you oh. Can only look at their own records of play in a daze.

Dumplings I have several built-in, respectively corresponding to different hunger value.

Players can teach tiger cubs to talk, or steal from other players.

1.5 in learning to speak

This function, is through the player in the page input content, teach the little tiger some Spring Festival blessing words, or want to say. Chance to get a random dumpling.

The more you learn, the better your chances of getting dumplings.

1.6 to visit

To visit a door is an uncertain function. It will randomly pick up a tiger’s house, learn a sentence that the tiger has learned, or steal a dumpling. The ratio of learning to speak and stealing dumplings is 4:1, depending on the character.

Every dumpling you steal will be remembered by this tiger, but he can only remember the latest 15.

Who stole my dumplings

This is the place to check out who stole your tiger’s dumplings, showing the top5, and the latest 15 stolen records. There is revenge, hatred hatred, was stolen much, can go to his nuggets article comments below, diss him.

1.8 Speaking Record

Here to remember the little tiger said some words, sometimes will find some interesting things: such as xx tiger even dumplings are not, XX tiger even words will not say, or XX tiger ran away from home.

1.9 Visiting harvest

Here you can see the records of your visits. Did you learn a word from someone or steal a dumpling from someone?

1.10 leave

This is a log out function, it will clear your login information, please remember your account password before leaving, wrong account is the new tiger. The password is wrong can not enter the Error [Error], your little tiger estimated to run hungry.

Two, technical introduction

About this little tiger, actually there is no technical difficulty, are some common things. By digging gold activities, while fishing time, make it to play.

After all, games are just a form of presentation, and the key is to learn something useful. Just a few interesting points.

2.1 at the front desk

  • Vue-admin-template front desk I directly take the previous use of the background modification, after all, I am not the front end, rewrite the estimation of the whole do not understand.

    The vue Admin Template is used. This framework is a set of basic VUE templates provided to the backend management system. It is nice and the vUE code generated by the code generator mentioned in the previous article, as well as the action page, is based on this.

    To see code generation please send: juejin.cn/post/705546…

    Vue-admin-template source address: gitee.com/panjiachen/…

  • The deployment of

    Front desk I was put on a Huawei cloud server, new users pull wool. Using the nicely packaged dist file released by Nginx, the nginx configuration file looks like this:

    user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 4096; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 80; server_name _; # gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; root /opt/vue/dist; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; The location/tiger / {proxy_pass http://122.112.181.245:9958/; add_header Access-Control-Allow-Origin *; } location /tigerHome/ {proxy_pass http://122.112.181.245/; add_header Access-Control-Allow-Origin *; } error_page 404 /404.html; location = /404.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } }Copy the code

    One quick note: The Vue js package is large and the first screen is slow, so I added a nginx compression configuration to make it slightly better.

2.2 the background

Background code using Springboot + Mybatis -plus, are the basic code. Want to see can go to download the source code, nothing to say.

Mybatis – Plus integrated delivery address: juejin.cn/post/705472…

The database uses mysql8.0.

Use a timer to subtract the tiger cub’s hunger value.

There are a few key points I can mention:

  • I am using the hikariCP connection pool:

    Is currently recommended for more efficient connection pooling. To be precise, it introduces mybatis- Plus’s multi-source dependency, which internally uses this connection pool. Mybatis – Plus = mybatis- Plus = mybatis- Plus = mybatis- Plus = mybatis- Plus = mybatis- Plus = mybatis- Plus = mybatis

    spring:
  datasource:
    dynamic:
      hikari:
        max-lifetime: 1800000
        connection-timeout: 5000
        idle-timeout: 3600000
        max-pool-size: 12
        min-idle: 4
        connection-test-query: /**ping*/
Copy the code

  • Lambda syntax for mybatis- Plus

    The previous Mybatis – Plus integration did not mention the use of QueryWrapper. Here I try to use its lambda syntax to operate, which is really quite convenient. The semantics are easy to understand, and streaming programming makes people feel comfortable.

    List<NianSayLogDO> list = nianSayLogService.lambdaQuery() // Use lambda queries
        .eq(NianSayLogDO::getNianId, nianId) // Where nianId = parameter (nianId)
        .orderByDesc(NianSayLogDO::getCreateTime) // In descending order, according to create_time
        .last("limit 15") // Select 'limit 15' from 'limit 15'
        .list(); // Return a list
Copy the code

    How about that? It’s easy to understand. Love it.

A few other interesting points:

  • Calculate the probability of learning to speak to get dumplings

    This place, I am a stiff brain for a long time.

    • First, I define the stages of learning the number of words:

      static {
    wordsNum.add(5);
    wordsNum.add(10);
    wordsNum.add(20);
    wordsNum.add(40);
    wordsNum.add(80);
}
Copy the code

    • When I look up the current number of words I can say, I compare them against the wordsNum collection:

      public static int getChance(int num) {
    // The initial probability is 10
    int n = 10;
    // Determine and increase the number of probabilities
    n += wordsNum.stream().filter(i -> num > i).mapToInt(i -> 10).sum();
    return n;
}
Copy the code

      I’m going to define an initial probability of 10; Use java8 stream to judge elements in wordsNum up to 5 times. If the condition is satisfied once, the initial probability is increased by 10, that is, the highest probability is 60.

  • Calculate the probability of getting what kind of dumpling

    Here I define an enumeration:

     /** ** *@author weirx
  * @date2022/01/21 11:26 * * /
 public enum DumplingsEnum {
     LEEK_EGG("Leek and Egg Dumplings".1.1),
     PORK_CELERY("Pork and celery dumplings".2.2),
     BEEF("Beef dumplings".3.3),
     PORK_ONION("Pork and Scallion dumplings".2.4),
     THREE_FRESH("Three Fresh Dumplings".3.5),
     SPANISH_MACKEREL("Spanish mackerel dumplings".2.6),
     COINS("Coin dumpling".5.7),
     SUGAR("Brown sugar dumplings".1.8);

     public static DumplingsEnum getOrder(int chance) {
         // If there is only one dumpling, the probability of one in ten is ten percent;
         // So 8 dumplings, one tenth is eighty percent
         int i = 80;
         // a 10% chance is equivalent to picking the first 8 orders out of 80 (1~8)
         // 20% is equivalent to selecting the top 8 oder(1~8) out of 40
         // 50% is equivalent to selecting the first 8 oders (1~8) out of 16
         int i1 = chance / 10;
         int i2 = i / i1;
         int random = RandomUtil.randomInt(1, i2);
         if (random <= 8) {
             for (DumplingsEnum dumplingsEnum : DumplingsEnum.values()) {
                 if (dumplingsEnum.order == random) {
                     returndumplingsEnum; }}}return null;
     }

     public static void main(String[] args) {}private int order;

     private String name;

     private int hungryNum;

     public String getName(a) {
         return name;
     }

     public int getHungryNum(a) {
         return hungryNum;
     }

     DumplingsEnum(String name, int hungryNum, int order) {
         this.name = name;
         this.hungryNum = hungryNum;
         this.order = order; }}Copy the code

    On the above according to the probability of good calculation of what kind of dumplings in the calculation process in the code, I did not force explanation in the notes, just through the way to let you understand it, I write is rao enough ~

    You feel it with your heart…

  • About whose house to go to, what kind of dumplings to steal

    I used one of the two random methods: to obtain all the small tigers, and then obtain a random number according to the number of Li Hu and the set subscript:

    List<NianDO> List = nianservice.lambdaQuery ().ne(NianDO::getId, nianId).list(); Int randomInt = list.size() == 1? 1 : RandomUtil.randomInt(1, list.size()); NianDO nianDO = list.get(randomInt - 1);Copy the code

Third, summary

The above has introduced almost, while taking advantage of the weekend and fishing time to write this thing, found that since the nuggets began fishing, I even quit the king, is really too roll.

I hope you can give more suggestions when experiencing, I did not think of more interesting gameplay, some interesting ideas, I can add during the Spring Festival, increase the fun of the little tiger.

There is also that I this is in a Huawei cloud 2 core 4G server set up, although the performance is enough, but the bandwidth is only 1M, sometimes will be slow, understanding ~

Play it on your computer, not your phone. It's not fit

Play it on your computer, not your phone. It's not fit

Play it on your computer, not your phone. It's not fit

Project online experience address: http://122.112.181.245/

Source code address: gitee.com/wei_rong_xi…