JavaScript and HTML5 using canvas to build a web Gobang game implementation algorithm

This is just a simple JavaScript and HTML5 applet, did not realize the Man-machine battle.
A two-dimensional array of gobang checkerboard drop points. The elements of the array correspond to drop points. For example, an array element value of 0 means that the element corresponding to the drop point does not have a pawn, the array element value of 1 means that the element corresponding to the drop point has a white pawn, the array element value of 2 means that the element corresponding to the drop point has a black pawn;
The algorithm to judge the Gobang win is realized by the operation of the two-dimensional array corresponding to the drop point of the Gobang board.

Judge Gobang win chess algorithm
The following functions can be used to determine the Gobang win chess algorithm, can also be implemented according to the corresponding algorithm in the textbook.
The parameters of the function xx.yy the array subscript, and the chess arrays realize the data structure mapping of the Gobang board drop Point.
The method of thinking is: to the current drop point corresponding subscript as the basis, to its surrounding 8 directions to search, if there is the same dice even five children, return 1, or 2, otherwise return 0. The return of 1 represents the white side wins, and the return of 2 represents black side wins. The return of 0 representatives did not occur to win the chess structure state.

Copy Code code as follows:

<! DOCTYPE html>


< HTML xmlns= "http://www.w3.org/1999/xhtml" >


< head>


<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>


<title></title>


<style type= "Text/css" >


Body {


margin:10px;


}


</style>


<script type= "Text/javascript" >


var canvas;


var context;


var iswhite = true;//Set whether the turn to white


var Iswell = false;//Set whether the board has won, if won can not go again


var img_b = new Image ();


img_b.src = "images/b.png";//white chess picture


var img_w = new Image ();


img_w.src = "images/w.png";//Black chess picture


var chessdata = new Array (15);//The two-dimensional array of the chessboard is used to hold the board information, initialize 0 for the not traversed, 1 for the white, 2 for the black to go


for (var x = 0 < x + +) {


Chessdata[x] = new Array (15);


for (var y = 0; y < y++) {


Chessdata[x][y] = 0;


}


}


function DrawRect () {//page loaded to call functions, initialize chessboard


canvas = document.getElementById ("Canvas");


context = Canvas.getcontext ("2d");


for (var i = 0; I <= 640 i = 40) {//line to draw the chessboard


Context.beginpath ();


Context.moveto (0, I);


Context.lineto (640, I);


Context.closepath ();


Context.stroke ();


Context.beginpath ();


Context.moveto (i, 0);


Context.lineto (i, 640);


Context.closepath ();


Context.stroke ();


}


}


function Play (e) {//When mouse clicks occur


var x = parseint ((e.clientx-20)/40);/calculate the area of the mouse click, if clicked (65,65), then click on the (1,1) position


var y = parseint ((e.clienty-20)/40);


if (Chessdata[x][y]!= 0) {//Determine if the position has been passed


alert ("You can't play chess in this position");


return;


}


if (iswhite) {


iswhite = false;


drawchess (1, x, y);


}


else {


Iswhite = true;


drawchess (2, x, y);


}


}


function drawchess (chess, x, y) {//parameter for, chess (1 for White, 2 for black), array position


if (Iswell = = True) {


alert ("It's over, refresh if you need to play again");


return;


}


if (x >= 0 && x < && y >= 0 && y < 15) {


if (chess = = 1) {


context.drawimage (img_w, x * +, Y * 40 + 20);//Draw white chess


Chessdata[x][y] = 1;


}


else {


context.drawimage (Img_b, x * +, Y * 40 + 20);


Chessdata[x][y] = 2;


}


judge (x, Y, chess);


}


}


function judge (x, Y, chess) {//Judge whether the board has won


var count1 = 0;


var count2 = 0;


var count3 = 0;


var count4 = 0;


//About Judge


for (var i = x; I >= 0; i--) {


if (Chessdata


[y]!= chess) {


break;


}


count1++;


}


for (var i = x + 1; i < i++) {


if (Chessdata


[y]!= chess) {


break;


}


count1++;


}


//Up and down judgment


for (var i = y; I >= 0; i--) {


if (Chessdata[x]


!= chess) {


break;


}


count2++;


}


for (var i = y + 1; i < i++) {


if (Chessdata[x]


!= chess) {


break;


}


count2++;


}


//Left upper right bottom judge


for (var i = x, j = y; I >= 0, J >= 0; I--, j--) {


if (Chessdata


[j]!= chess) {


break;


}


count3++;


}


for (var i = x + 1, j = y + 1; i <, J < i++, J + +) {


if (Chessdata


[j]!= chess) {


break;


}


count3++;


}


//Right upper left to judge


for (var i = x, j = y; I >= 0, J < i--, J + +) {


if (Chessdata


[j]!= chess) {


break;


}


count4++;


}


for (var i = x + 1, j = y-1; i <, J >= 0; i++, j--) {


if (Chessdata


[j]!= chess) {


break;


}


count4++;


}


if (count1 >= 5 | | count2 >= 5 | | count3 >= 5 | | count4 >= 5) {


if (chess = = 1) {


alert ("White won");


}


else {


alert ("Black won");


}


Iswell = true;//Set the board has won, can not go again


}


}


</script>


</head>


< body onload= "DrawRect ()" >


<div>


<canvas width= "640" id= "Canvas" onmousedown= "Play (event)" height= "640" > your browser does not support HTML5 canvas, please use Google The Chrome browser opens.


</canvas>


</div>


</body>


</html>