Front-end implementation of Lianliankan mini-game example code

After playing Lian Lian Kan for so long, the blogger discovered for the first time that Lian Lian Kan can only have 2 turns at most. orz…

I searched for Lianliankan’s connection algorithm judgment on the Internet, but I didn’t find a very comprehensive one. After my own exploration, I drew the following picture (the picture is a bit ugly...)

1. Two objects are on the same straight line and can be directly connected (no explanation is needed for this)

2.2 The objects are on the same straight line, there are obstacles in the middle, and they cannot be directly connected (2 turns)

[Loop through the intersection points in the yellow line, such as points A and B, and then determine whether there are obstacles on the blue line. If If not, it can be connected. If so, continue to loop to find new points A and B】

3. The two objects are not on the same straight line , a turn

[The two objects extend the x and y axes at their respective locations. As shown in the figure below, the intersection points are A and B. You only need to determine whether there are obstacles directly from 2 intersection points to 2 objects. If not, you can connect]

4. The 2 objects are not there On the same straight line, the connecting line has 2 turns

[The same principle is as shown in the figure below. If there are no obstacles from the intersection points A and B to the object, they can be connected. The ordinate of point A is the same as that of point B】

In another case, A and B are the intersection points of the x-axis and the middle y-axis where the two objects are located, A and B The x-coordinates of For each axis, just increase the y-axis according to the same principle. Can cover all connection judgment~

After talking about the logic of connection judgment, let’s write about the overall game framework. The game basically uses native javascript and is developed using the createjs game engine.

Code idea:

1. Draw the game drawing and determine how many palace pictures it will be. Since it is a small game on the mobile side, it is based on the minimum screen size (iphone4 320*480 ), determined to be a 7*9 palace diagram.

1. Create a two-dimensional array. If there is an object at a certain coordinate, set it to 1, otherwise it is 0

2. To determine whether there is an object at the position, you only need to determine the corresponding Whether the value on the two-dimensional array is 1, if it is 1, there is an object, otherwise there is not.

As for drawing lines and eliminating identical objects, as long as you know the connection logic, you will definitely draw lines and eliminate objects by yourself, so this article will only talk about connection judgment~

When judging whether a line can be connected, you must start with the simplest method, as follows:

Can the same straight line be connected in a straight line--->If a point is surrounded, it will not connect. ---> Two points are on a straight line, they cannot be connected in a straight line but they can be connected ---> They are not in the same straight line but they can be connected

getPath: function (p1, p2) {//开始搜索前对p1,p2排序，使p2尽可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;
                p1 = p2;
                p2 = t;
            }else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;
                    p1 = p2;
                    p2 = t;
                }
            }//2点在同一直线上，可以直线连通if (this.hasLine(p1, p2).status) {return true;
            }//如果两点中任何一个点被全包围，则不通。else if (this.isWrap(p1, p2)) {return false;
            }//两点在一条直线上，不能直线连接但是可以连通else if (this.LineLink(p1, p2)) {return true;
            }//不在同一直线但是可以连通else if (this.curveLink(p1, p2)) {return true;
            }    
}

//判断同一条线能否连通,x轴相同或者y轴相同hasLine: function (p1, p2) {this.path = [];//同一点if (p1.x == p2.x && p1.y == p2.y) {return {
                    status: false};
            }if (this.onlineY(p1, p2)) {var min = p1.y > p2.y ? p2.y : p1.y;
                min = min + 1;var max = p1.y > p2.y ? p1.y : p2.y;for (min; min  p2.x ? p2.x : p1.x;
                j = j + 1;var max = p1.x > p2.x ? p1.x : p2.x;for (j; j <div class="cnblogs_code">Connection judgment</div><p></p> <div class="cnblogs_code"></div>

The above is the detailed content of Front-end implementation of Lianliankan mini-game example code. For more information, please follow other related articles on the PHP Chinese website!