Copy a different 2048 mini game from the world's largest same-sex dating site

Today I have a sudden thought and want to realize a different 2048 mini game. What will I do right now? This does not exist. First I thought of "the world's largest same-sex dating site". There are so many ready-made regular 2048 mini games on it. Just copy them and read the essence and modify them on this basis. With the effect of "doubling the effort with half the effort", just do what you say, and I started my journey of hunting and revising.

1. A Journey of Hunting

After logging in to the "Dating Site", I started a keyword search. I found a batch of excellent codes by searching for "2048 Mini Programs". A beautiful beautiful lady came into my eyes. The website of this beautiful lady is: https ://github.com/windlany/wechat-weapp-2048

1.1 Initialization

Encountering this beauty, the first step is definitely to pull the beauty over, and then carefully appreciate whether it meets your needs.

git clone https://github.com/windlany/wechat-weapp-2048.git

The beauty is here, what should I do next? We must first appreciate a wave of beautiful women. Below, we have our handsome "WeChat Developer Tool" to open it to see what this beautiful woman looks like, and it does not meet our needs.

1.2 Understanding the core content

After the run, I found that its image and temperament fully meet our needs. The external expression standard is time to understand the connotation. As the saying goes, "the outsider sees the excitement, the insider sees the doorway." Demand.

By observing the directory structure, we can quickly locate the key core content under the /page/2038 directory. The core code in this directory will not be read line by line with the reader, just throw out the core idea, after all The idea is clear, and then there is the problem of coding. The specific idea can be divided into the following three steps:

1. initialization

The initialization phase completes the initial filling of the content in the corresponding grid

(1) From the appearance, the initialized content is a 4*4 grid, which can be realized through the <view> tag;

(2) From a data perspective, what is stored behind it is a two-dimensional array with 4 rows and 4 columns, and fill in the blanks if it is not worthwhile;

(3) In the beginning, two positions will be randomly selected and filled with the initial value of 2 (here is a position where we will move the knife later, remember to remember)

2. Direction judgment

After initialization, you need to perform the corresponding operations. After the initialization is not possible, let's do nothing! By monitoring the operation of the corresponding user and then performing the corresponding processing, in order to monitor the operation of the user, a series of events (touchstart, touchmove, touchend) of the user's touch need to be bound, and the corresponding coordinate position is obtained after these events are triggered, and then the movement is determined Direction, so that there will be a follow-up content update link.

<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>

// 触摸刚开始的时候将会去获取手指触摸的位置坐标
touchStart: function(ev) {
    var touch = ev.touches[0];
    this.touchStartX = touch.clientX;
    this.touchStartY = touch.clientY;

},
// 当在移动过程中不断获取其手指坐标
touchMove: function(ev) {
    var touch = ev.touches[0];
    this.touchEndX = touch.clientX;
    this.touchEndY = touch.clientY;
},
// 通过对比前后的坐标值，确定其移动的方向（0:上, 1:右, 2:下, 3:左）
touchEnd: function() {
    var disX = this.touchStartX - this.touchEndX;
    var absdisX = Math.abs(disX);
    var disY = this.touchStartY - this.touchEndY;
    var absdisY = Math.abs(disY);
    
    var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);
}

3. Content update merge

When the direction is judged, it is time to update and merge the corresponding content according to the direction, and generate a new random value for filling, as shown below:

As shown in the above picture, the left picture is the original picture, and the right picture is the result of sliding to the left. You can see that the result of the sliding is to move and sum the content of the last line, and produce the minimum value in the free area. Based on this idea, is it possible to disassemble the merger idea into the following steps:

(1) Divide a two-dimensional array into a one-dimensional array in the corresponding direction according to the direction. For example, if you move to the left, each row is a one-dimensional array, and the head of the array is the left side; sliding up each column is a one-dimensional array, and the head of the array is Upper side

(2) Move the content in each one-dimensional array-merge-move, that is, first move all worthy content to the head, add adjacent equal values to the previous one, and finally merge the content Move to the head; (the ideas in the program are disassembled very clearly, I feel that I did a great job, and I would like to give it a thumbs up)

(3) After all the content is updated, a free area will be selected to generate a new value for filling, and finally the page will be rendered to update the content.

Two, modify the tour

The above has already introduced all the core content of the basic 2048, then we find that this beauty is not justified, not much to say, first show the location to be modified! !

1. Must the starting value be 2? Why can't it be any value such as 3, 4, 5, 6, etc.?
2. Must it be a mode of summing? Why can't it decrease sequentially from 2048?

2.1 Mode One

The first mode is changed to support any initial value

1. Since it supports any value, there must be a place for input. At this time, we add an input tag to the page to input its value;

2. Once you have the input, you must find the corresponding modified position. After step-by-step positioning, you will finally find the final modified position, and then copy the value to the corresponding position.

3. Let's see the final result

2.2 Mode 2

The second mode is that besides increasing, can we choose the strategy of continuous reduction? Let's take a look at how to modify the code to implement this mode. In fact, this mode only needs to make small changes on the basis of mode 1.

1. Change point

2. final effect

In addition to the two new gameplays I thought of above, what new gameplay do you have? Share it and let us have fun together.

Three, summary

What I did this time is very simple. It is to read the code on the basis of the original, and then modify it accordingly to produce a new model. Through this sharing, I have mainly learned the following points:

1. Make more use of "same-sex dating sites" and use its content to get twice the result with half the effort;
2. Learn more other ways of analyzing problems, how to break down complex problems into simple ones and solve them;
3. Look at other people's code more, on the one hand, learn its code writing mode; on the other hand, learn how to abstract the content (for example, it is in the merge abstract part);

1. If you think this article is good, share it, like it, and let more people see it

2. Welcome to pay attention to the front-end point line open the road to front-end salvation.