Javascript serialization code exposure _ javascript skills

This is a very good code for continuous viewing. You can run it and check the effect.

<Script language = "JavaScript"> <! -- Var RowMax = 42; // Number of columns var ColMax = 22; // number of rows var PicMax = 26; // total number of images var TimeMax = 60; // total time var OffSet = 32; // use the System icon webdings (starting from asc2 32) var st; // countdown var TmpStr = ""; var TmpObj = null; var TmpTime = 0; var TmpInt = 0; var PicAry = new Array (PicMax); var Matrix = new Array (RowMax); for (I = 0; I <RowMax; I ++) {Matrix [I] = new Array (ColMax);} var P = new Array (4); for (I = 0; I <4; I ++) {P [I] = new Object () ;} // Initialize function SetTab () {clearInterval (st); // clear the countdown // retrieve the set value TmpInt = parseInt (document. getElementById ("setrow "). value); // if (TmpInt> 0 & TmpInt <41 &&! (TmpInt % 2) {RowMax = (TmpInt + 2);} TmpInt = parseInt (document. getElementById ("setcol "). value); // if (TmpInt> 0 & TmpInt <21) {ColMax = (TmpInt + 2);} TmpInt = parseInt (document. getElementById ("setpic "). value); // number of images if (TmpInt> 0 & TmpInt <27) {PicMax = TmpInt;} TmpInt = parseInt (document. getElementById ("settime "). value); // time if (TmpInt> 0 & TmpInt <601) {TimeMax = TmpInt;} TmpTime = TimeMax; OffSet = 40 + Mat H. floor (120-PicMax) * Math. random (); // The asc2 value of the icon is 40 ~ 120 (32 ~ 158) // Image array, record the parity for (PicNum = 0; PicNum <= PicMax; PicNum ++) {PicAry [PicNum] = 0 ;} picNum = 0; // The total number of image types with an odd number TmpInt = (RowMax-2) * (ColMax-2 ); // total number of images in the valid region // draw the table TmpStr = "<table border = \" 1 \ ">"; for (j = 0; j <ColMax; j ++) {TmpStr + = "<tr>"; for (I = 0; I <RowMax; I ++) {TmpStr + = "<td onclick = \" CheckP (this, "+ I +", "+ j +"); \ "width = \" 32 \ "height = \" 40 \ ">" ;}else {TmpInt --; matrix [I] [j] = 1 + Math. floor (PicMa X * Math. random (); if (TmpInt <PicNum) {// image pairing for (k = 1; k <= PicMax; k ++) {if (PicAry [k]) {Matrix [I] [j] = k; break ;}}// update the parity array of the image type, and the total number of images. if (PicAry [Matrix [I] [j]) {PicAry [Matrix [I] [j] = 0; PicNum --;} else {PicAry [Matrix [I] [j] = 1; PicNum ++;} // fill in the color var tmp_color = Math. floor (0xFFFF00 * Matrix [I] [j]/PicMax ). toString (16); TmpStr + = "color = \" # "; for (k = tmp_color.length; k <6; k ++) TmpStr ++ =" 0 "; TmpStr + = tmp_color; TmpStr + = "\"> "; // Add an image (webdings icon) TmpStr + = String. fromCharCode (Matrix [I] [j] + OffSet); // different pics} TmpStr + = "</td>" ;}tmpstr + = "</tr> ";} tmpStr + = "</table>"; TmpInt = (RowMax-2) * (ColMax-2)/2; // remaining quantity, Judge end. // TmpStr + = "<BGSOUND volume =-1000 src = \" emc. mid \ "LOOP =-1>" // background music document. getElementById ("container "). innerHTML = TmpStr; // output table document. getElementById ("timeleft "). innerHTML = TmpTime; // display the remaining time document. getElementById ("timebar "). style. width = 600; // time document. getElementById ("timebar "). style. backgroundColor = "green"; st = setInterval ("ShowTime ()", 1000); // start countdown} // connects to the X direction. (With a start point and no end point) function LineX (x, y, xt) {for (I = x; I! = Xt; (x <xt? I ++: I --) {if (Matrix [I] [y]) {return false ;}} return true ;}// link in the Y direction. (With a starting point and no ending point) function LineY (x, y, yt) {for (I = y; I! = Yt; (y <yt? I ++: I --) {if (Matrix [x] [I]) {return false ;}} return true ;} // The two points are connected by three lines to function LinkP (P1, P2) {// P1 is below P2, switching P1, P2 if (P1.y> P2.y) {P3 = P1; p1 = P2; P2 = P3;} // Point 1 (y + 1) below P1 is vertically connected or horizontally connected. (Because the start point P1 is not empty, check below it) if (LineY (P1.x, (P1.y + 1), P2.y) & LineX (P1.x, P2.y, P2.x )) return true; // P1 first connects to the left, then checks whether the point can be connected vertically and then horizontally to P2. For (j = (P1.x-1); j> = 0; j --) {if (Matrix [j] [P1.y]) break; if (LineY (j, (P1.y + 1), P2.y) & LineX (j, P2.y, P2.x) return true ;}// P1 first connects to the right, then, check whether the point can be connected to P2 vertically and horizontally. For (j = (P1.x + 1); j <RowMax; j ++) {if (Matrix [j] [P1.y]) break; if (LineY (j, (P1.y + 1), P2.y) & LineX (j, P2.y, P2.x) return true;} // P1 on the right side of P2, switch P1, P2 if (P1.x> P2.x) {P3 = P1; P1 = P2; P2 = P3;} if (LineX (P1.x + 1), P1.y, P2.x) & LineY (P2.x, P1.y, P2.y )) return true; for (j = (P1.y-1); j> = 0; j --) {if (Matrix [P1.x] [j]) break; if (LineX (P1.x + 1), j, P2.x) & LineY (P2.x, j, P2.y) return true ;}for (j = (P1.y + 1 ); J <ColMax; j ++) {if (Matrix [P1.x] [j]) break; if (LineX (P1.x + 1), j, P2.x) & LineY (P2.x, j, P2.y) return true;} return false;} // click to check the function CheckP (o, x, y) {if (Matrix [x] [y]) {// non-empty if (null = TmpObj) {// No selected image TmpObj = o; // select the image TmpObj. borderColor = "0000FF"; // change the border color P [0]. x = x; // Save the P [0]. y = y;} else if (o! = TmpObj) {// TmpObj. borderColor = "FFFFFF"; // restore the border color P [1]. x = x; // Save the P [1]. y = y; if (Matrix [P [0]. x] [P [0]. y] = Matrix [P [1]. x] [P [1]. y]) {// if (LinkP (P [0], P [1]) for the same type of image {// you can connect to Matrix [P [0]. x] [P [0]. y] = 0; // clears Matrix [P [1]. x] [P [1]. y] = 0; TmpObj. innerHTML = ""; // the original image is blank. innerHTML = ""; TmpTime ++; // reward time TmpInt --; // subtract 1 if (! TmpInt) {// The remaining image is 0 clearInterval (st); // clear the countdown document. getElementById ("container "). innerHTML = ""; document. getElementById ("timeleft "). innerHTML = ""; document. getElementById ("timebar "). style. backgroundColor = "white"; alert ("done! ") ;}} TmpObj = null; // unselected image }}else {if (TmpObj) {TmpObj. borderColor = "FFFFFF" ;}// restore the border color TmpObj = null; // unselected image }}function ShowTime () {TmpTime --; // time minus 1 // The update time displays document. getElementById ("timeleft "). innerHTML = TmpTime; document. getElementById ("timebar "). style. width = Math. floor (600 * TmpTime/TimeMax); if (TimeMax/TmpTime)> 4) {document. getElementById ("timebar "). style. backgroundColor = "red";} e Lse if (TimeMax/TmpTime)> 2) {document. getElementById ("timebar"). style. backgroundColor = "yellow";} if (! TmpTime) {// The remaining time is 0 clearInterval (st); // clear the countdown document. getElementById ("container "). innerHTML = ""; // clear screen document. getElementById ("timeleft "). innerHTML = ""; document. getElementById ("timebar "). style. backgroundColor = "white"; alert ("Time! ");}} // --> SCRIPT <INPUT id = "setrow" type = "text" value = "16" size = "2"> Number of columns <INPUT id = "setcol" type = "text" value = "9" size = "2"> Number of images <INPUT id = "setpic" type = "text" value = "12" size = "2"> time <INPUT id = "settime" type = "text" value = "60" size = "3"> seconds <BUTTON onclick = "SetTab (); "> Reset </BUTTON>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]