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

The introduction

Long ago to do a scratch-off game, but lack of power and lazy, miss the Mid-Autumn festival moon activities, and miss the National Day of the red flag activities, thinking how to also don’t drag to the year after it, this is not, just a hard, touch fish touch out of a small game, scratch-off emoticon big battle, come to scratch happy!

The game demo

Simple effect on PC

The mobile terminal

Structure that

The overall code is relatively small, this article will not repeat the code content, a brief talk about the logical relationship. Source link

Concept design

The design idea of this game is very broad, which is generally summarized as the layered design of front and back, the coating and the scratch area covered by the coating.

Coating design

Coating area, one of concise approach, is to use canvas to draw a grey cover cover mould, by increasing the mousedown mousemove/mouseup events draw erasing traces, hide behind the coating makes the manifest, and, after scraping coating to a certain proportion, remove the coating.

The focus is mousemove event processing (view the source code), need to calculate the distance and Angle of movement according to the starting point and end point, so as to get the brush fact x, Y coordinate point, draw the brush.

There are a variety of brush drawing methods, and the most common one in the code is to draw a small circle with a radius of 20, about the size of the belly of your finger. The image can also be used as the brush, and each drawing is a fixed IMG object.

The most important is to use the Compositing Operator = destination-out compositing mode in Poter Duff Alpha compositing algorithm to make the background color better than the coating display.

ctx.globalCompositeOperation = 'destination-out'
Copy the code

Finally, determine whether the current percentage range of the scratch area exceeds a certain percentage, such as the set 75%, after which, remove the coating once. To determine whether a point is scratched or not depends mainly on

CanvasRenderingContext2D. GetImageData () function returns the ImageData object to read the dataUint8ClampedArrayArray to calculate the RGBA value of each pixelCopy the code

Scratch off zone design

That is, the pattern at the back, the story behind the true image, what makes you so enamored with such audacity? What makes an old man pick up a gun? Let’s look at the answers to the scratch zone.

A div element is enough, give it a background, and it’s the prettiest div of the night.

However, I’m using another Canvas for the background here, because it’s not a simple Base64 image, and it has some random elements in it:

  • Random graph plus random text, a rich and colorful riddle.
  • Random instructions, likeLu Xun: I have never said this sentence, but it is true!Such an instruction setting.
  • Random location, withdrawal of different differences, horizontal and vertical center alignment, may be beautiful, but not interesting enough.
  • Where’s the fun in random pictures, scraping the same picture every time?

The difference

The Spring Festival the skin

When the first version was finished, it looked ordinary, featureless, not festive, not fun to look at.

Here’s the ugly first version

Subsequently, many Elements of the Spring Festival were added, such as the red background color of the couplet, the font color of the fu character, the New Year expression picture, and the randomly visible festive and festive greetings, so that the whole effect took on a new look.

If you add some random “big fu” to the red background, the effect goes up another level.

Expression package

Emoticons can express the meaning of what we say in a deeper way, and can express it more vividly than words. It is a kind of happy middle disease. Sometimes I feel that I am about to laugh out my abdominal muscles.

Use emoticon to replace the usual scratch-off results, more fun, more innovative gameplay.

In short, if you can post pictures, don’t talk. If you can talk, don’t mess up a few minutes of video.

Problems encountered

Fun on mobile

The original design did not consider the mobile end, scratching on the PC is quite fun, but the mouse wipe and hand wipe, after all, are two different things, what is the use of seeing, touch is experience.

After testing on the mobile terminal, it was found that there was only one initial page with a big red background color and no other elements. Why?

The problem lies in the loading of the database. When TESTING on the PC side, I Use await: Use at module top level, but the result is not supported by the junk mobile phone. It can be solved perfectly by adjusting the writing method, and the remaining thing is to adapt and optimize the display size under different screens to achieve compatibility.

conclusion

Okay, XDM, that’s it. If you have any thoughts on the idea of a scratch-off emoji war, let’s chat in the comments section. Its purpose is very simple, let more people experience the happiness of fish, and in this advance I wish you a happy New Year, Fu Hu Shengwei.

The resources

  • Bucket diagram robot design scheme
  • Alpha synthesis algorithm