Dare to dig gold, you are number one player!

I am participating in the team competition of Nuggets Community Game Creative Submission Contest. For details, please see: Game Creative Submission Contest

Ihope_top.giitee. IO /juejin-king Gitee address: gitee.com/ihope_top/j… Team members: Village head Xiao Er Hei, Monica Oo

preface

You the nuggets XDM, technical creative enough to gather together series was updated again, this is a little game for you collection, is the same, is from online resources, compared with the previous several small made a vivid adaptation of the game, the game as far as possible in accordance with PC + mobile operating mode, try not to make the game results by equipment factors interference, Of course, there may be a lot of undiscovered bugs, if you find them you can mention them.

Although the game is free from the nuggets and the name and everyone’s operation, but not the nuggets official behavior, the game content is entertainment effect, and the nuggets official and operation has nothing to do, the game promise not commercial, if involved in infringement, please contact me for modification

contests

As usual, it is suggested that to play games, take a look at the article (PC recommend full-screen operation), after finishing your game hope to be able to share the result to the boiling point, and the boiling point links posted on the comments section, as of April 24, twenty four, hot comments comments area the first user will receive the nuggets mouse pad/byte cup is not a choice of welfare (must games share to the boiling point, In addition, two lucky users will be randomly selected to send random gold digging badges *1 (the boiling point is suggested to select the game player club circle).

The award is invalidated if fewer than 10 comments are received

The rules of the game

The game is divided into 5 levels, each level is guarded by an operator, each level is 20 points, through 5 levels, the total score of 60 points or more is considered as a clearance. Let’s take a look at the specific gameplay of each level.

Level introduction

Because each small game is very simple, but the code is much, you can directly go to the game warehouse to view the source code, this article mainly explains the ideas and gameplay

The first level is to find gold nuggets

The specific implementation of this level was written by my team mate Xiaerhei Murakitou. This level was originally designed to find Troy, but it would be fun to find Troy among all the Tony’s, but I was afraid that Tony would not be happy, so I arranged rock-paper-scissors for Tony, which was also fun.

The first level keep close operations for major arc greatly, river’s lake said zhang elder brother, repeatedly Shouting to resign but still for the nuggets burning their own professional operation, I think let him as the first level to keep good people, in line with the theme of leisure is given priority to, so long time to put special, close test basic 10 seconds can get it right.

The second level is rock paper scissors

The second level, this level is we are familiar with the Tony teacher to hand, unlike my previous games, this level has no time limit, nor intense keyboard, we only quietly to play with Tony teacher rock paper scissors, the main game is to choose one from the following rock paper scissors, Then Mr. Tony will pick one of the remaining choices at random, ruling out a tie, so let’s see who has better luck, you or Mr. Tony.

The third level is to find the treasure

The keeper of the third level is our diligent captain, we can’t sail with the captain to the sea, so let’s look for treasure with the captain. There are six cards here, one of which is a hidden treasure map. You and the captain will take turns to open a card, come and see who finds the real treasure map first!

The fourth level whack-a-mole

This level is developed for MonicaWoo

The guard of the fourth level is Siyu. I still don’t know whether Siyu is GG or MMThe important thing is that there are a lot of ground squirrels in Siyu’s backyard. Siyu needs your help. Hit the ground squirrels with all your might

Fifth level lucky draw

The guardian of the fifth level for our lovely Boa sister, the kind boa sister for you to prepare your favorite lottery link, draw to how many points is how many points, or familiar with the formula, or familiar with the taste, come on, a soul

To get the certificate

At the end of the fifth level, there will be a button to get the total score. Click it to jump to the result page, which is divided into two situations

The first is if your total score is less than 60, then unfortunately, fail

The other is if your total score is greater than 60, congratulations, you’ve passed

At this time you can click on the bottom of the fill in wish button, fill in your wish. (Make a wish, my friend, and if it comes true, no matter how hard your life is, keep your heart in the right place.)

After completing the wish, you can click the generate certificate button to generate the certificate (forgive my aesthetics, it is too simple).

After that, we can click the save picture button to save the certificate to the local, or directly copy the picture on the certificate by right clicking the picture (you can save the picture on the mobile phone, if not, cut the picture), and then click to the boiling point button to publish the boiling point

tip

During the writing of the game, I also encountered a lot of small problems, but I found a good solution, and here I would like to share with you

Font extraction

The browser’s default font is difficult to form a good visual experience, so I got a thought from the Internet or look good font, with a focus on the free ah (the font for bettas are open source, commercial), you can see many places in the game to the font, improved the overall look and feel a lot, but there’s a downside is that font package is too big, For example, the font size of betta fish is more than 5m, which is larger than the entire game (after optimization, the entire game size is about 2.5m), so how can we solve this problem? If we look carefully, we can find that we use this font to write not many words, and a font package at least thousands of words, so if we only use the words extracted, to generate a new font, will save a lot of space? I couldn’t do this myself, so I went to the Internet to search, unexpectedly I did find it, that is Baidu Fontmin, which can perfectly meet our needs. After optimization, the font package successfully changed from 5039KB to 61KB. Detailed instructions can refer to the official website ecomfe. Making. IO/fontmin / # ba…

Disable the CTRL + f

In the first level, users need to find the right word among many wrong words, because this is a web page, so it is easy for users to use CTRL + F to find cheating, so how to prevent this behavior, I started to think of using pictures instead of text, but I think that is too much trouble, is there a simpler way? I found it using pseudo-class elements, such as :: After content:’hello’, which cannot be found by CTRL + F.

Disable full-screen preview images on mobile devices

Images are used in many places in the game. Clicking on an image on the mobile terminal will create a full-screen preview of the image, which will cause a very bad experience. We can use the following methods to prevent this behavior

pointer-events: none;
Copy the code

Elements with mouse-over events have a blue background on the move side

In the second level of Rock paper Scissors, we added the mouse slider effect in the following options, which will appear a blue background when clicking on the mobile end

Prohibition method:

webkit-tap-highlight-color: transparent;
Copy the code

The default border is displayed when SRC is empty on the mobile image

The img tag on the mobile end, which displays a default border if SRC is empty, can be removed using the following method