Homemade HTML Gobang

Spent a morning write Gobang, long time not write front end are some unfamiliar, have what good suggestion can feedback to me, thank you ha.

Words not much to say, began to introduce.

One, the main three parts

Style code

<style> *{margin:0px;padding:0px; }#box{width:600px;Height:600px;Border:1px solid;margin:0px; }. Line{Border:1px solid;Border-top:0px;Border-left:0px;Border-right:0px;width:600px;position:Absolute; }. Shu{Border:1px solid;Border-top:0px;Border-bottom:0px;Border-right:0px;Height:600px;position:Absolute; }. Qi{Border:1px solid;width:25px;Height:25px;Border-radius:45px;position:Absolute; }</style>

Body Layer Code

　

<id= "box">    </div>

JS script code

<script text= "Text/javascript" src= "Jquery.min.js" ></script>

<script text= "Text/javascript" >varK=0; varj = 0; varQ = 0; varRed_array =NewArray (); varBlue_array =NewArray ();  for(vari=1;i<20;i++) {//Constructing the Chessboard            varnum = 30*i; varLine_dom = "<div class= ' line ' style= ' top:" +num+ "px ' ></div>"varShu_dom = "<div class= ' shu ' style= ' left:" +num+ "px ' ></div>"            $("#box"). Append (Line_dom); $("#box"). Append (Shu_dom); }        $("#box"). Click (function(e) {varpositionx=e.pagex-$ ( This). Offset (). Left;//gets the x-coordinate of the current mouse-relative img            varpositiony=e.pagey-$ ( This). Offset (). Top;//Gets the y-coordinate of the current mouse relative img                        varreal_x = Math.Round (POSITIONX/30) *30-12.5;//calculates the actual flag center landing positionvarreal_y = Math.Round (POSITIONY/30) *30-12.5;//calculates the actual flag center landing positionif(k%2==0){            varDom_color = ' Red '; varIs_not = $.inarray (real_x+ "," +real_y, Blue_array);//determine if the point is duplicated                if(Is_not = =-1) {Winer (red_array,real_x,real_y);//determine if there are five children around this point when clickedred_array[j]= real_x+ "," +real_y;                    Console.log (Red_array); J++; }            }Else{            varDom_color= ' Blue '; varIs_not = $.inarray (real_x+ "," +real_y, Red_array);//determine if the point is duplicated                if(Is_not = =-1) {Winer (blue_array,real_x,real_y);//determine if there are five children around this point when clickedblue_array[q]= real_x+ "," +real_y; Q++; }            }            if(Is_not = =-1){                varQi_dom = "<div class= ' qi ' style= ' Left:" +real_x+ "; Top:" +real_y+ "; Background-color:" +dom_color+ "; ' ></div> ";//Add a chess element$ ("#box"). Append (Qi_dom); K++; }                    })        functionWiner (winer_array,real_x,real_y) {//judging the rules of winning            //Horizontal Discrimination                varo = 0;  for(varw=1;w<5;w++){                    varnew_x =real_x+30*W; varClick_result = $.inarray (new_x+ "," +real_y, Winer_array);//determine if a point exists                    if(Click_result ==-1){                         Break; }Else{o++; }                }             for(varw=1;w<5;w++){                varnew_x =real_x-30*W; varClick_result = $.inarray (new_x+ "," +real_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{o++; }            }            if(o>=4){                if(k%2==0) {alert ("Red Square wins"); }Else{alert ("Blue Side wins"); }            }            //Portrait            varL = 0;  for(varw=1;w<5;w++){                varNew_y =real_y+30*W; varClick_result = $.inarray (real_x+ "," +new_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{L++; }            }             for(varw=1;w<5;w++){                varNew_y =real_y-30*W; varClick_result = $.inarray (real_x+ "," +new_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{L++; }            }            if(l>=4){                if(k%2==0) {alert ("Red Square wins"); }Else{alert ("Blue Side wins"); }            }            //Slash (forward slash backslash)            //forward Oblique lever            varm = 0;  for(varw=1;w<5;w++){                varnew_x =real_x-30*W; varNew_y =real_y+30*W; varClick_result = $.inarray (new_x+ "," +new_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{m++; }            }             for(varw=1;w<5;w++){                varnew_x =real_x+30*W; varNew_y =real_y-30*W; varClick_result = $.inarray (new_x+ "," +new_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{m++; }            }            if(m>=4){                if(k%2==0) {alert ("Red Square wins"); }Else{alert ("Blue Side wins"); }            }            //anti-skew bar            varn = 0;  for(varw=1;w<5;w++){                varnew_x =real_x+30*W; varNew_y =real_y+30*W; varClick_result = $.inarray (new_x+ "," +new_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{n++; }            }             for(varw=1;w<5;w++){                varnew_x =real_x-30*W; varNew_y =real_y-30*W; varClick_result = $.inarray (new_x+ "," +new_y, Winer_array);//determine if a point exists                if(Click_result ==-1){                     Break; }Else{n++; }            }            if(n>=4){                if(k%2==0) {alert ("Red Square wins"); }Else{alert ("Blue Side wins"); }            }        }    </script>

The following is the main idea, you need to do a Gobang game, then this game includes the object has a chessboard, chess pieces (red, blue), rules.

One, need to construct a chessboard

1, the way to construct the chessboard is to complete with html+css, I write all in the JS generated, the method is various, can be written with their own preferences.

2, the board after the construction, the need to think of a problem is the piece landing and display, I use the mouse click to get the current coordinates (then there is a problem, the mouse click Only a point, and is not necessarily in the two lines of the focus on how to do, my solution is when the mouse click a position, I use the algorithm to determine that the coordinates are in a limited range from the nearest focus to the size of the piece, then the last click event will show the piece is displayed in the nearest focus of the distance, and then displayed on the board

3, is to determine the two sides win the rule, Gobang winning way of nothing but four kinds, to line five son, longitudinal five son, forward slash five son, anti-slash five son, then know this four kinds of situation can be for each winning way to determine, specific methods such as code, I personally feel is not the optimal algorithm, have a good friend can reply me

Summarize:

1, because the time of writing is relatively tight, the board is not fully set to an object for controllable adjustment

2, the piece has not been clicked before you can add a mouse to move the event, there is a flashing pieces, used to tell the player mouse click after the pieces will fall with which point

3, Undo function, the user can play chess every click on the coordinates of the record, when the user needs to undo, remove the last in the array, and the display end of the piece removed the coordinates

4, chronograph function, the effective time of the whole game and the time of the player to play chess one time.

Homemade HTML Gobang