Front-end connected video games (1) and video games

Front-end connected video games (1) and video games

After playing for so long, the blogger was the first to find that there were only two turns at most. Orz...

I searched for the link algorithm of the link on the Internet, but I did not find it comprehensive. After I found it myself, I drew the following figure (the figure is ugly ......)

 

I. Two objects can be directly connected in the same straight line (this does not need to be explained)

 

2. Two objects are in the same straight line with obstacles in the middle and cannot be directly connected (two turns)

[Traverse the intersection points in the Yellow Line cyclically, such as A and B points, and then judge whether there are any obstacles in the blue line. If there are obstacles, they can be connected. If yes, they can continue to search for new A and B points cyclically]

 

3. Two objects are not in the same straight line and one turns

[The x and Y axes of the two objects are extended at their respective locations. For example, the intersection is A and B. You only need to judge whether there are obstacles between two intersections and two objects. If there is no obstacle, it can be connected]

 

4. Two objects are not in the same line, and the link has two turns.

[Same as the principle of II. For example, if the intersection of A and B has no obstacle to the object, it can be connected. The Y coordinate of Point A is the same as that of point B]

In another case, A and B are the intersection of the x axis and the Y axis in the middle of the two objects. The x coordinates of A and B must be the same, and the line is as follows:

 

 

The above is the judgment of the four connection algorithms. Only the X axis is drawn for the drawing, and the Y axis is added for each method based on the same principle. Can overwrite all connections for judgment ~

After the logic of the connection judgment, write down the overall game framework. The game basically uses native javascript and the createjs game engine for development.

 

Code:

1. Draw a game drawing and determine the number of gongtu. Because it is a mobile game, the minimum screen size (iphone4 320*480) is 7*9.

1. Create a two-dimensional array. If an object exists on a coordinate, set it to 1; otherwise, set it to 0.

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

As for line drawing and elimination of the same object, as long as it connects to the logic, it will certainly draw lines by itself to eliminate the object. So this article will only talk about the line judgment ~

 

When determining whether a connection can be established, it must start with the simplest method, as shown below:

Can a single line be connected in a straight line? ---> how can one point be surrounded? ---> two points are in a straight line. They cannot be connected in a straight line but can be connected ---> they are not in the same line but can be connected.

GetPath: function (p1, p2) {// sorts p1 and p2 before the start of the search, so that p2 is at the bottom right of p1 as much as possible. 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 ;}// point 2 on the same line. if (this. hasLine (p1, p2 ). status) {return true;} // If any point in the two points is fully enclosed, it will not work. Else if (this. isWrap (p1, p2) {return false;} // The two points are in a straight line. They cannot be connected in a straight line but can be connected to else if (this. lineLink (p1, p2) {return true;} // not in the same line but can be connected to else if (this. curveLink (p1, p2) {return true ;}}

 

// Determine whether the same line can be connected. hasLine: function (p1, p2) {this. path = []; // same point 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 <max; min ++) {var p = {x: p1.x, y: min}; if (! This. isEmpty (p) {console. log ('obstacle p .................. '); Console. log (p); this. path = []; break;} this. path. push (p) ;}if (min = max) {return {status: true, data: this. path, dir: 'y' // y axis};} this. path = []; return {status: false};} else if (this. onlineX (p1, p2) {var j = p1.x> p2.x? P2.x: p1.x; j = j + 1; var max = p1.x> p2.x? P1.x: p2.x; for (j; j <max; j ++) {var p = {x: j, y: p1.y}; if (! This. isEmpty (p) {console. log ('obstacle p .................. '); Console. log (p); this. path = []; break;} this. path. push (p) ;}if (j = max) {return {status: true, data: this. path, dir: 'X' // x axis};} this. path = []; return {status: false};} return {status: false}; // if either of the two points is fully surrounded, true isWrap is returned: function (p1, p2) {// if (! This. isEmpty ({x: p1.x, y: p1.y + 1 })&&! This. isEmpty ({x: p1.x, y: p1.y-1 })&&! This. isEmpty ({x: p1.x-1, y: p1.y })&&! This. isEmpty ({x: p1.x + 1, y: p1.y}) {return true;} if (! This. isEmpty ({x: p2.x, y: p2.y + 1 })&&! This. isEmpty ({x: p2.x, y: p2.y-1 })&&! This. isEmpty ({x: p2.x-1, y: p2.y })&&! This. isEmpty ({x: p2.x + 1, y: p2.y}) {return true;} return false;} // two points are in a straight line and cannot be connected in a straight line but can be connected to LineLink: function (p1, p2) {var pt0, pt1, pt2, pt3; // if both are on the X axis, scan the possible paths from left to right, // construct four vertices pt0, pt1, pt2, and pt3 each time, and check whether the two of them are connected if (this. onlineX (p1, p2) {for (var I = 0; I <this. h; I ++) {if (I = p1.y) {continue;} pt0 = p1; pt1 = {x: p1.x, y: I}; pt2 = {x: p2.x, y: I}; pt3 = p2; // This path does not work if the vertex is not empty. If (! This. isEmpty (pt1) |! This. isEmpty (pt2) {continue;} if (this. hasLine (pt0, pt1 ). status & this. hasLine (pt1, pt2 ). status & this. hasLine (pt2, pt3 ). status) {this. drawLine (2, [pt0, pt3, pt1, pt2]); return [pt0, pt1, pt2, pt3] ;}}// if both are on the Y axis, then, the possible paths from top to bottom are scanned. // each time four vertex pt0, pt1, pt2, pt3 are constructed, and then whether the two of them are connected if (this. onlineY (p1, p2) {for (var j = 0; j <this. w; j ++) {if (j = p1.x) {continue;} pt0 = p1; pt1 = {x: j, y: p1.y }; Pt2 = {x: j, y: p2.y}; pt3 = p2; // This path does not work if the vertex is not empty. If (! This. isEmpty (pt1) |! This. isEmpty (pt2) {continue;} if (this. hasLine (pt0, pt1 ). status & this. hasLine (pt1, pt2 ). status & this. hasLine (pt2, pt3 ). status) {this. drawLine (2, [pt0, pt3, pt1, pt2]); return [pt0, pt1, pt2, pt3] ;}}}, // two points are not in a straight line, check whether curveLink: function (p1, p2) {var pt0, pt1, pt2, pt3; // in special cases, first determine whether it is a turn var spec1 = {x: p1.x, y: p2.y}, spec2 = {x: p2.x, y: p1.y}; if (this. isEmpty (spec1) {if (this. hasLine (p1, spec1 ). status & this. hasLine (p2, spec1 ). status) {console. log ('1 turns '); this. drawLine (1, [p1, p2, spec1]); return [p1, p2, spec1] ;}} if (this. isEmpty (spec2) {if (this. hasLine (p1, spec2 ). status & this. hasLine (p2, spec2 ). status) {console. log ('1 turns '); // console. table ([pt0, spec2, pt3]); this. drawLine (1, [p1, p2, spec2]); return [p1, spec2, p2] ;}// scan the possible paths vertically. // Similarly, construct four vertices each time to see if the for (var k = 0; k <= this. h; k ++) {pt0 = p1; pt1 = {x: p1.x, y: k}; pt2 = {x: p2.x, y: k}; pt3 = p2; // if (this. isEmpty (pt1) & this. isEmpty (pt2) {// 2 turns if (this. hasLine (pt0, pt1 ). status & this. hasLine (pt1, pt2 ). status & this. hasLine (pt2, pt3 ). status) {console. log ('2 turns '); this. drawLine (2, [pt0, pt3, pt1, pt2]); return [pt0, pt3, pt1, pt2] ;}} // scan all possible paths horizontally (var k = 0; k <= this. w; k ++) {pt0 = p1; pt1 = {x: k, y: p1.y}; pt2 = {x: k, y: p2.y}; pt3 = p2; // if (this. isEmpty (pt1) & this. isEmpty (pt2) {// 2 turns if (this. hasLine (pt0, pt1 ). status & this. hasLine (pt1, pt2 ). status & this. hasLine (pt2, pt3 ). status) {console. log ('2 turns '); this. drawLine (2, [pt0, pt3, pt1, pt2]); return [pt0, pt3, pt1, pt2] ;}} return false ;}

Connection judgment