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.
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.
<! 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, and if you win, you can't go any further.
var img_b = new Image ();
IMG_B.SRC = "images/b.png";//White pictures
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 white, 2 for black.
for (var x = 0 < x + +) {
CHESSDATA[X] = new Array (15);
for (var y = 0; y < y++) {
Chessdata[x][y] = 0;
}
}
function DrawRect () {//page loaded, calling functions, initializing chessboard
Canvas = document.getElementById ("Canvas");
Context = Canvas.getcontext ("2d");
for (var i = 0; I <= 640 i = 40) {//Line drawing 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 is clicked (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
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;
Right and left to 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++;
}
Upper right and bottom left to 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 down 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, you can't go any further.
}
}
</script>
< body onload= "DrawRect ()" >
<div>
<canvas width= "640" id= "Canvas" onmousedown= "Play (event)" height= "640" > your browser does not support HTML5 canvas, please use Google Chrome The browser opens.
</canvas>
</div>
</body>
