Copied a different 2048 game from the world’s largest gay dating website


Today, I had a sudden feeling that I wanted to realize a different 2048 game. At this time, why would I drive it directly? This does not exist. First of all, I thought of the “world’s largest same-sex dating website”. There are so many ready-made conventional 2048 games on it. I can directly copy one, read the essence, and then modify it on this basis. Can’t I achieve the effect of “twice the result with half the effort”. Just do it. Now I start my journey of hunting and modifying.

1、 A journey of beauty hunting

After logging into the “dating website”, I started keyword search. By searching “2048 applet”, I found a batch of excellent codes. A beautiful woman came into my eyes. Her website is:…

Copied a different 2048 game from the world's largest gay dating website

1.1 initialization

When you encounter this beautiful woman, the first step must be to pull her over, and then carefully appreciate whether it meets your needs.

git clone

The beauty is coming. What should I do next? We must first appreciate a wave of beautiful women. Here is our handsome “wechat developer tool” to open it and see what this beautiful woman looks like and whether it meets our needs.

Copied a different 2048 game from the world's largest gay dating website

1.2 core content understanding

After running, I found that its image and temperament fully meet our needs. The appearance meets our standards. It’s time to understand the connotation. It’s the so-called “laymen watch the excitement, and experts watch the doorway”. Let’s see whether it meets our needs from the perspective of experts.

Copied a different 2048 game from the world's largest gay dating website

By observing the directory structure, we can quickly locate the key core content required under the directory / page / 2038. The core code in this directory will not be read line by line with the reader, so we can directly 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 is to complete the initialization and filling of the content in the corresponding grid

Copied a different 2048 game from the world's largest gay dating website

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

(2) From the data level, what is stored behind it is a two-dimensional array with 4 rows and 4 columns. Fill in the blank if there is no worthy position;

(3) At the beginning, we will randomly select two positions to fill in its initial value of 2 (here is a position where we want to cut later, remember)

  1. Direction judgment

After initialization, you need to perform corresponding operations. If you can’t initialize, let’s do nothing! By listening to the corresponding user’s operation and then performing corresponding processing, in order to listen to the user’s operation, it is necessary to bind a series of events touched by the user (touchstart, touchmove, touchend), obtain the corresponding coordinate position after these events are triggered, and then judge its moving direction, so as to have the subsequent content update link.

<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>
//At the beginning of the touch, you will get the position coordinates of the finger touch
touchStart: function(ev) {
    var touch = ev.touches[0];
    this.touchStartX = touch.clientX;
    this.touchStartY = touch.clientY;

//When the finger coordinates are continuously obtained during the movement
touchMove: function(ev) {
    var touch = ev.touches[0];
    this.touchEndX = touch.clientX;
    this.touchEndY = touch.clientY;
//Determine the moving direction (0: up, 1: right, 2: down, 3: left) by comparing the front and rear coordinate values
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);
  1. Content update merge

After determining the direction, it is time to update and merge the corresponding contents according to the direction, and generate a new random value for filling, as shown below:

Copied a different 2048 game from the world's largest gay dating website

As shown in the above figure, the left figure is the original figure and the right figure is the result of sliding to the left. You can see that after sliding, the content of the last line is moved and summed, and the minimum value is generated in the free area. Based on this idea, can the merging idea be disassembled into the following steps:

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

(2) Move – merge – move the contents of each one-dimensional array, that is, first move all valuable contents to the head, add adjacent equal values to the previous one, and finally move the merged contents to the head; (the ideas in the program are disassembled very clearly. I feel it’s done very well. Give me a compliment)

(3) After all contents are updated, a free area will be selected to generate a new value for filling, and the final rendered page will be updated.

2、 Modification journey

The above has introduced all the core contents of the foundation 2048, so it’s unreasonable for us to find the beauty who doesn’t change. If we don’t say much, let’s show the position to be modified first!!

  1. Must the starting value be 2? Why can’t it be any value such as 3, 4, 5 and 6?
  2. Must it be a summation model? Why not decrease from 2048?

2.1 mode I

The first mode is changed to support any initial value

  1. Since any value is supported, there must be a location for input. At this time, we add an input tag in the page to input its value;

Copied a different 2048 game from the world's largest gay dating website

  1. With input, you need to find the corresponding modified position. After step-by-step positioning, you can finally find the final modified position, and then copy the value to the corresponding position.

Copied a different 2048 game from the world's largest gay dating website

  1. Let’s see the final effect

Copied a different 2048 game from the world's largest gay dating website

2.2 mode II

The second model is that in addition to increasing, can we choose the strategy of decreasing? Let’s see how to modify the code for the implementation of this mode. In fact, this mode only needs to make small changes on the basis of mode 1.

  1. Change point

Copied a different 2048 game from the world's largest gay dating website

  1. Final effect

Copied a different 2048 game from the world's largest gay dating website

In addition to the above two new ways I think of, what new ways do you have? Share it, let’s hi PI Yibo.

3、 Summary

What we do this time is very simple, that is to read the code on the basis of the boss’s original code, and then modify it accordingly to produce a new model. Through this sharing, I mainly learned the following points:

  1. Make more use of the “same-sex dating website”, and use its content can get twice the result with half the effort;
  2. Learn more about other ideas of analyzing problems, and how to disassemble complex problems into simple problems and solve them;
  3. Look at other people’s code, on the one hand, learn its code writing mode; On the other hand, learn how to abstract the content (for example, it is merging the abstract part);

1. If you think this article is good, share and praise it so that more people can see it

2. welcome to the official account.Front end point line surface, open the road to redemption.