Front-end implementation of Lianliankan mini-game example code-H5 Tutorial-php.cn

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; } }

Copy after login

//判断同一条线能否连通,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 < max; min++) {var p = {x: p1.x, y: min};if (!this.isEmpty(p)) { console.log('有障碍物p点………………'); console.log(p);this.path = [];break; }this.path.push(p); }if (min == max) {return { status: true, data: this.path, dir: 'y' //y轴 }; }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('有障碍物p点………………'); console.log(p);this.path = [];break; }this.path.push(p); }if (j == max) {return { status: true, data: this.path, dir: 'x' //x轴 }; }this.path = [];return { status: false}; }return { status: false};//2点是否有其中一点被全包围,若有，则返回trueisWrap: 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; } //两点在一条直线上，不能直线连接但是可以连通LineLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//如果都在x轴，则自左至右扫描可能的路径，//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通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;//如果顶点不为空，则该路不通。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]; } } }//如果都在y轴，则自上至下扫描可能的路径，//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通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;//如果顶点不为空，则该路不通。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]; } } } }， //两点不在一条直线上，看是否可通curveLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//特殊情况，先判断是否是一个转弯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个转弯');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个转弯');// console.table([pt0, spec2, pt3]);this.drawLine(1, [p1, p2, spec2]);return [p1, spec2, p2]; } }//先纵向扫描可能的路径//同样，每次构造4个顶点，看是否可通for (var k = 0; k <= this.H; k++) { pt0 = p1; pt1 = {x: p1.x, y: k}; pt2 = {x: p2.x, y: k}; pt3 = p2;//2个交点都为空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2个转弯if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) { console.log('2个转弯');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2]; } } }//横向扫描所有可能的路径for (var k = 0; k <= this.W; k++) { pt0 = p1; pt1 = {x: k, y: p1.y}; pt2 = {x: k, y: p2.y}; pt3 = p2;//2个交点都为空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2个转弯if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) { console.log('2个转弯');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2]; } } }return false; }

Copy after login

Connection judgment

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!