JS lianliankan source code perfect annotated version of recommendation
- 2020-03-30 00:47:03
- OfStack
Be free and at leisure, also write a javascript lianliankan, comments are more complete, want to learn friends can want to see.
Lianliankan the most difficult part should be the path search, that is, between the two points of the mouse point to see there is no path. Have seen someone write recursive writing method, in the mind itch, on the elusive once, found that the case without recursion is not difficult.
Path search from simple to difficult analysis, first to analyze whether a line can be connected directly, then to analyze whether two points on a line can be passed through two turns, and finally to analyze the case of not on a line.
Tested in IE6, IE8, firefox3.0.3.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Lianliankan source perfect annotated version </title>
</head>
<style>
table{
border-collapse: collapse;
}
td{
border: solid #ccc 1px;
height: 36px;
width: 36px;
cursor: pointer;
}
td img{
height: 30px;
width: 30px;
border: solid #fff 3px;
}
</style>
<script>
//The following part is the path search algorithm part, independent of the presentation layer
//The global variable
var X = 16;//Total number of rows
var Y = 14;//The total number of columns
var types = 15;//Graphic type
//Layout matrix
//For the sake of the algorithm, the first row, the first column, the last row, the last column of the matrix are all labeled 0, the natural path.
var arr = new Array(Y);
var tbl;//Displays the table element of the layout
var p1 = null;//Search for the coordinates of the first point in the path
var p2 = null;//Search for the coordinates of the second point in the path
var e1 = null;//The first point
var e2 = null;//The second point
//Path search, give two points, search out the path
//The path is represented by connectable points
function getPath(p1, p2){
//Sort p1 and p2 so that p2 is as far to the right as possible.
//This simplifies the algorithm
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;
}
}
//Through the analysis of the position relationship between the two points, gradually from simple to difficult analysis of each type
//The first type is whether two points are on a line, and they can be connected
if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){
status = 'type 1';
return [p1,p2];
}
//The second type is not valid if either point is completely surrounded.
if( !isEmpty({x:p1.x, y:p1.y+1}) && !isEmpty({x:p1.x, y:p1.y-1}) && !isEmpty({x:p1.x-1, y:p1.y}) && !isEmpty({x:p1.x+1, y:p1.y}) ){
status = 'type 2';
return null;
}
if( !isEmpty({x:p2.x, y:p2.y+1}) && !isEmpty({x:p2.x, y:p2.y-1}) && !isEmpty({x:p2.x-1, y:p2.y}) && !isEmpty({x:p2.x+1, y:p2.y}) ){
status = 'type 2';
return null;
}
//The third type, two points on a line, but not connected
var pt0, pt1, pt2, pt3;
//If they are all in the X-axis, then scan the possible paths from left to right,
//Construct four vertices at a time, pt0, pt1, pt2, pt3, and see if they are connected
if(onlineX(p1, p2)){
for(var i=0; i<Y; i++){
if(i==p1.y){
continue;
}
pt0 = p1;
pt1 = {x: p1.x, y: i};
pt2 = {x: p2.x, y: i};
pt3 = p2;
//If the vertex is not empty, the path is blocked.
if(!isEmpty(pt1) || !isEmpty(pt2)){
continue;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';
return [pt0, pt1, pt2, pt3];
}
}
}
//If they are all on the Y-axis, then scan the possible paths from top to bottom,
//Construct four vertices at a time, pt0, pt1, pt2, pt3, and see if they are connected
if(onlineY(p1, p2)){
for(var j=0; j<X; j++){
if(j==p1.x){
continue;
}
pt0 = p1;
pt1 = {x:j, y:p1.y};
pt2 = {x:j, y:p2.y};
pt3 = p2;
//If the vertex is not empty, the path is blocked.
if(!isEmpty(pt1) || !isEmpty(pt2)){
continue;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';
return [pt0, pt1, pt2, pt3];
}
}
}
//The fourth type, the two points are not on the same line.
//First scan the possible paths longitudinally
//Again, construct 4 vertices at a time to see if it works
for(var k=0; k<Y; k++){
pt0 = p1;
pt1 = {x:p1.x, y:k};
pt2 = {x:p2.x, y:k};
pt3 = p2;
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';
//In particular, if pt0 and pt1 coincide
if(equal(pt0,pt1)){
//If the pt2 is not empty, the path is blocked
if(!isEmpty(pt2)){
continue;
}
if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
return [pt1, pt2, pt3];
}
else{
continue;
}
}
//In particular, if pt2 and pt3 coincide
else if(equal(pt2,pt3)){
//If pt1 is not empty, the road is blocked
if(!isEmpty(pt1)){
continue;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){
return [pt0, pt1, pt2];
}
else{
continue;
}
}
//If both pt1 and pt2 are not null, they are not valid
if(!isEmpty(pt1) || !isEmpty(pt2)){
continue;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
return [pt0, pt1, pt2, pt3];
}
}
//Scan the possible paths horizontally
for(var k=0; k<X; k++){
pt0 = p1;
pt1 = {x:k, y:p1.y};
pt2 = {x:k, y:p2.y};
pt3 = p2;
status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';
if(equal(pt0,pt1)){
if(!isEmpty(pt2)){
continue;
}
if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
return [pt1, pt2, pt3];
}
}
if(equal(pt2,pt3)){
if(!isEmpty(pt1)){
continue;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){
return [pt0, pt1, pt2];
}
}
if(!isEmpty(pt1) || !isEmpty(pt2)){
continue;
}
if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){
return [pt0, pt1, pt2, pt3];
}
}
//status='type4';
return null;
}
function equal(p1, p2){
return ((p1.x==p2.x)&&(p1.y==p2.y));
}
function onlineX(p1, p2){
return p1.y==p2.y;
}
function onlineY(p1, p2){
return p1.x==p2.x;
}
function isEmpty(p){
return (arr[p.y][p.x]==0);
}
function hasLine(p1, p2){
if(p1.x==p2.x&&p1.y==p2.y){
return true;
}
if(onlineY(p1, p2)){
var i = p1.y>p2.y?p2.y:p1.y;
i = i+1;
var max = p1.y>p2.y?p1.y:p2.y;
for(; i<max; i++){
var p = {x: p1.x, y: i};
if(!isEmpty(p)){
break
}
}
if(i==max){
return true;
}
return false;
}
else if(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<max; j++){
var p = {x: j, y: p1.y};
if(!isEmpty(p)){
break
}
}
if(j==max){
return true;
}
return false;
}
}
//The following sections are the presentation layer sections, including drawing, initializing the matrix, binding mouse events...
function $(id){return document.getElementById(id)}
var t1, t2;//The test
//Image base path
var IMG_PATH = '//www.jb51.net';
//Initialize the
function init(){
//Construct a photo library
var imgs = new Array(30);
for(var i=1; i<=30; i++){
imgs[i] = 'r_' + i + '.gif';
}
tbl = $('tbl');
//Construct a table
for(var row=0;row<Y-2;row++){
var tr=tbl.insertRow(-1);
for(var col=0;col<X-2;col++) {
var td=tr.insertCell(-1);
}
}
//Structure matrix
for(var i=0; i<Y; i++){
arr[i] = new Array(X);
for(var j=0; j<X; j++){
arr[i][j] = 0;
}
}
var total = (X-2)*(Y-2);
var tmp = new Array(total);//To generate a random position
for(var i=0; i<total; i++){
tmp[i] = 0;
}
for(var i=0; i<total; i++){
if(tmp[i]==0){
var t = Math.floor(Math.random()*types) + 1;
tmp[i] = t;
while(true){
var c = Math.floor(Math.random()*(total-i)) + i;
if(tmp[c]==0){
tmp[c] = t;
break;
}
}
}
}
var c = 0;
for(var i=1; i<Y-1; i++){
for(var j=1; j<X-1; j++){
arr[i][j] = tmp[c++];
tbl.rows[i-1].cells[j-1].innerHTML = '<img src="' + IMG_PATH + imgs[arr[i][j]] + '" />';
}
}
//Bind mouse events
var img1, img2;
document.body.onclick = function(e){
var el = document.all?event.srcElement:e.target;
if(el.parentNode.tagName!='TD'){
return;
}
if(!img1){
img1 = el;
}
else{
img2 = el;
}
el.style.border = 'solid #3399FF 3px';
el = el.parentNode;
if(el.innerHTML==''){
p1 = p2 = e1 = e2 = null;
}
var r = el.parentNode.rowIndex +1;
var c = el.cellIndex +1;
if(p1==null){
//el.childNodes[0].style.border = 'solid #ccc 3px';
p1 = {x:c, y:r};
e1 = el;
}
else{
p2 = {x:c, y:r};
e2 = el;
if(!equal(p1, p2)&&e1.innerHTML==el.innerHTML){
var path = getPath(p1, p2);
if(path!=null){
e1.innerHTML = e2.innerHTML = '';
arr[p1.y][p1.x] = arr[p2.y][p2.x] = 0;
}
}
if(t1){t1.style.backgroundColor = '';}
t1 = e1;
if(t2){t2.style.backgroundColor = '';}
t2 = e2;
img1.style.border = 'solid #fff 3px';
img2.style.border = 'solid #fff 3px';
p1 = p2 = e1 = e2 = img1 = img2 = null;
t1.style.backgroundColor = t2.style.backgroundColor = 'lightpink';
}
}
}
</script>
<body onload="init();">
js Lianliankan perfect annotated version <br />
<table id="tbl" cellspacing="0" cellpadding="0" border="1">
</table>
</body>
</html>