Home > Developer > JavaScript
This is just a simple JAVAscript and HTML5 applet, without human-machine combat.
The two-dimensional array corresponding to the sub-point of the five-game board. Array elements correspond to child points. For example, if the array element value is 0, it indicates that the sub-point corresponding to this element does not have a pawn, and if the array element value is 1, it indicates that the sub-point corresponding to this element has a white pawn, if the array element value is 2, the sub-point corresponding to the element has a black pawn;
The algorithm used to determine whether a game is to win is implemented by performing operations on the two-dimensional array corresponding to the logon position of the game board.
Judge the game winning Algorithm
The following functions can be used to determine the game winning algorithm, or follow the corresponding algorithms in the textbooks.
The xx. yy parameter of the function is the array subscript, And the chess array is used to map the data structure of the five sub-points on the board.
The algorithm uses the subscript corresponding to the current Child point as the base point to search for the eight directions around it. If there are five children connected to the same Shard, 1 or 2 is returned; otherwise, 0 is returned. If the return value is 1, it indicates that the player wins the game. If the return value is 2, it indicates that the player wins the game. If the return value is 0, the data structure of the game is not in progress.
Copy codeThe Code is 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; // you can specify whether the game is playing white.
Var isWell = false; // set whether or not the board of the Bureau wins. If it wins, it cannot leave.
Var img_ B = new Image ();
Img_ B .src = "images/B .png"; // white picture
Var img_w = new Image ();
Img_1_src = "images/w.png"; // black picture
Var chessData = new Array (15); // the two-dimensional Array of the board is used to save the Board information. The initialization value 0 is not passed, the value 1 is left blank, and the value 2 is left blank.
For (var x = 0; x <15; x ++ ){
ChessData [x] = new Array (15 );
For (var y = 0; y <15; y ++ ){
ChessData [x] [y] = 0;
}
}
Function drawRect () {// call the function after the page is loaded to initialize the chessboard
Canvas = document. getElementById ("canvas ");
Context = canvas. getContext ("2d ");
For (var I = 0; I <= 640; I + = 40) {// draw the line of the Board
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 you click the mouse
Var x = parseInt (e. clientX-20)/40); // calculate the area where the mouse is clicked. If you click (), it is the location where () is clicked.
Var y = parseInt (e. clientY-20)/40 );
If (chessData [x] [y]! = 0) {// determines whether the location has been deleted
Alert ("You cannot 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) {// The parameter is:
If (isWell = true ){
Alert ("it's over. If you need to play it again, please refresh ");
Return;
}
If (x> = 0 & x <15 & y> = 0 & y <15 ){
If (chess = 1 ){
Context. drawImage (img_w, x * 40 + 20, y * 40 + 20); // draw white games
ChessData [x] [y] = 1;
}
Else {
Context. drawImage (img_ B, x * 40 + 20, y * 40 + 20 );
ChessData [x] [y] = 2;
}
Judge (x, y, chess );
}
}
Function judge (x, y, chess) {// determines whether the board of the Board has won
Var count1 = 0;
Var count2 = 0;
Var count3 = 0;
Var count4 = 0;
// Left and right judgment
For (var I = x; I> = 0; I --){
If (chessData
[Y]! = Chess ){
Break;
}
Count1 ++;
}
For (var I = x + 1; I <15; I ++ ){
If (chessData
[Y]! = Chess ){
Break;
}
Count1 ++;
}
// Upstream/downstream judgment
For (var I = y; I> = 0; I --){
If (chessData [x]
! = Chess ){
Break;
}
Count2 ++;
}
For (var I = y + 1; I <15; I ++ ){
If (chessData [x]
! = Chess ){
Break;
}
Count2 ++;
}
// Upper left and lower right corner
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 <15, j <15; I ++, j ++ ){
If (chessData
[J]! = Chess ){
Break;
}
Count3 ++;
}
// Upper left lower right corner
For (var I = x, j = y; I> = 0, j <15; I --, j ++ ){
If (chessData
[J]! = Chess ){
Break;
}
Count4 ++;
}
For (var I = x + 1, j = y-1; I <15, j> = 0; I ++, j --){
If (chessData
[J]! = Chess ){
Break;
}
Count4 ++;
}
If (count1> = 5 | count2> = 5 | count3> = 5 | count4> = 5 ){
If (chess = 1 ){
Alert ("White wins ");
}
Else {
Alert (" ");
}
IsWell = true; // set the board to win. You cannot leave it 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 open it in google chrome.
</Canvas>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
