Hundred lines of HTML5 code to achieve four pairs of chess game

This article is a very challenging programming, because 100 lines of code, about 10,000 characters or so, will achieve Weiqi, Gobang, four-son chess and flip chess Four kinds of double chess game. Please note that these four chess games are not primary programmer's exercises, instead, it has a chessboard, three-dimensional pieces, events, chess rules to judge, win or lose judgment of the complete chess game, and can be stored offline to the IPad, Android tablet, imagine, this game to download to the tablet, you can in the train, tourist attractions, When there is no signal to do chess, is not the expansion of the function of the tablet, is not a very pleasant thing. Moreover, the key is that this program does not have the picture, does not need to go to the application store Http://www.aliyun.com/zixun/aggregation/34594.html "> Pays to Download, is only uses the HTML5 technology to write 100 lines of code, Absolutely is currently the most obsessed with your two-person chess game source. (Editor's note: Because the width of the page code is limited, so the author's code after a number of line-wrapping processing, I hereby explain.) ）

Target

To do a full double game, at least do the following things, the first step: Draw a chessboard. Different board game chessboard different, this need to carry out dynamic processing; Step two: Draw the pieces. Need to explain is, go, Gobang, such as these pieces are round ah, please do not worry about the picture, in the HTML5 era, we can use code to achieve the three-dimensional round pieces; The third step: Judge the drop event. Of course, to locate the position of the finger, the four kinds of chess, some fall in the box, and some are falling on the criss-cross of the checkerboard, need dynamic processing; step Fourth: Judge drop rules. There are rules in chess, do not because the code less, the rules will be discounted, otherwise the program immature, will become children's toys, the fifth step: Judge win or lose. Finally, we have to judge the winning and losing. That is to count the children, this thing must be done by the program, because chess always need a referee; The sixth step: The tablet era, we have to implement offline applications. This is too important, otherwise, if you are on the desktop computer, a network of games played, has been everywhere, you write a cow, what is the use? is to move, where there is no signal, there is a market, now flat, smart phones so many, in the absence of network signals in the place, take out mobile devices to play chess, is a very bull thing.

Draw a chessboard

Previously said Weiqi, Gobang, four-child chess and flip Chess board is not the same, go is 18 vertical and horizontal, the other three kinds of chess is 8 lattice. So it takes a parameter to draw a chessboard. This is a small problem, the big question is, what is the choice of the way to draw the chessboard?

HTML5 frame, there are at least 3 methods: The first one, with Canvas line; the second, the row and column attributes are added to the DIV,CSS3; the third, with a table tag.

Which is the fastest and less code? The answer is: the third. Somewhat disappointed, HTML5 is not omnipotent. The detailed code is as follows:

This.board=function (Name,width,height,rowbak,colbak) {/* draw chessboard/namebak=name; if ("turnover" ==name) {row=8;col=8;} else if ("Gogame" ==name) {row=18;col=18} var Aw=math.floor (width/(col+2)), Ah=math.floor (height/(row+2)); Minl= (AW>AH?AH:AW) -4;//This subtraction is important, otherwise the form will be propped up when filling in the blanks. Var array=new array ("<div style=\" margin: "+minl+" px;\ ">" + "< Table border=1 cellspacing=0 width=\ "" + (Aw*col) + "\" height=\ "" + (Ah*row) + ">"); for (Var i=0;i<row;i++) {Array.push (' <tr> '); for (Var j=0;j<col;j++) {Array.push ("<td align=center>" + evt (I,J,MINL,MINL,AW*J+MINL/2+8,AH*I+MINL/2) + "</td>");} if (namebak!= "Loko" &&namebak!= "turnover")/* Add event to Table/Array.push (EVT (I,col,minl,minl,aw*col+minl/2+8,ah *I+MINL/2)); Array.push ("</tr>"); } if (namebak!= "Loko" &&namebak!= "turnover") {for (Var j=0;j<=col;j++) {Array.push (evt J+MINL/2+8,AH*ROW+MINL/2)); } document.write (Array.join ("") + "</table></div>"); Setclick (ROW,COL,MINL,MINL);/* Initialization event * * STARt (); * Initialize Pawn/}

In the code above, the most important is the 6th line of code in bold, which has two tips, the first is the definition of table, and the second is to use array arrays. Why use arrays instead of defining a string? The answer is optimization, which is that the push method of array arrays is much faster than the plus + operation of string strings. A total of 16 lines of code, a chessboard on the painting, of course, this is not just a line, there are pieces to deal with, event definitions and other methods of the call, the following will be discussed.