The examples in this article share with you the specific code of JS implementation Gozi for your reference. The specific content is as follows
Ideas:
1. Use canvas to draw the chess board
2. Get the location of the mouse click
3. Judging by the position of the mouse click, and draw chess pieces
4. Judging whether you have won based on the chess piece you play
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
margin: 10px;
border: 2px solid #000;
}
#box {
display: inline-block;
position: absolute;
margin-top: 200px;
margin-left: 100px;
}
span {
font: 24px "Microsoft Yahei";
display: inline-block;
height: 50px;
}
input {
margin-top: 30px;
display: block;
width: 100px;
height: 50px;
font: 16px "Microsoft Yahei";
color: #fff;
background-color: #0099cc;
}
</style>
</head>
<body>
<canvas width="640" height="640" >
Your browser does not support itcanvas，Please upgrade to the latest browser
</canvas>
<div >
<span ></span>
<input type="button" value="restart"/>
</div>
<script>
var flag = true; //true represents the chess piece played by white chess, false represents the chess piece played by black chess. var isWin = false; //Judge whether it ends, true ends, false does not end var step = 40; //Set the width and height of each grid are 40
var txt = ("txt");
var btn = ("btn");
var cas = ("cas");// Get the canvas object var ctx = ("2d"); //Canvas context
// Create image objects var img_b = new Image();
img_b.src = "imgs/";//Set black chess picture path var img_w = new Image();
img_w.src = "imgs/";//Set the white chess picture path
// Use a two-dimensional array to save the board. 0 means that you have not walked, 1 means that you have walked through the white chess, and 2 means that you have walked through the black chess. var arr = new Array(15); //Declare a one-dimensional array for (var i = 0; i < 15; i++) {
arr[i] = new Array(15); //Declare a one-dimensional array for each value, thus forming a two-dimensional array for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
//Draw the chessboard function drawLine() {
for (var i = 0; i < / step; i++) {
// Draw vertical lines ((i + 1) * step, 0);
((i + 1) * step, );
// Draw horizontal lines (0, (i + 1) * step);
(, (i + 1) * step);
();
}
}
//Get the mouse click location = function (e) {
// First determine whether the game is over if (isWin) {
alert("The game is over, please refresh and start again!");
return 0;
}
//Judge where the chess pieces are displayed, and the chess pieces are not displayed on the four sides. //The position of the mouse click subtracts the distance from the upper and left of the border (10) from the page, and subtracts half of the width and height of a grid (20) var x = ( - 10 - 20) / 40;
var y = ( - 10 - 20) / 40;
//Please round to determine the final display area of the piece x = parseInt(x);
y = parseInt(y);
//If the board exceeds the board or returns directly at the board boundary, you cannot draw chess pieces on the border if(x < 0 || x >= 15 || y < 0 || y >= 15) {
return;
}
//Document whether the chess piece has been displayed at this position if (arr[x][y] != 0) {
alert("You can't play chess in this position");
return;
}
// Determine whether to display black or white if (flag) {//Bai Zi flag = false; //Set the flag to false to indicate that it is a black child next time drawChess(1, x, y); //Call the function to draw chess pieces
} else {//Hiko flag = true; //Set the flag to true to indicate that it is a white child next time drawChess(2, x, y); //Call the function to draw chess pieces
}
}
//Draw chess pieces function drawChess(num, x, y) {
//Determine the image display position based on x and y, and let the image be displayed in the middle of the crosshair. Because a grid is 40 and the image size is 30, 40-30/2 equals 25, so 25 needs to be added var x0 = x * step + 25;
var y0 = y * step + 25;
if (num == 1) {
//Draw white chess (img_w, x0, y0);
arr[x][y] = 1; //Bai Zi } else if (num == 2) {
// Draw black chess (img_b, x0, y0);
arr[x][y] = 2; //Hiko }
//Calling the function to determine the winner judge(num, x, y);
}
//Judge the win or lose function judge(num, x, y) {
var n1 = 0, //Left and left direction n2 = 0, //Up and down direction n3 = 0, //Upper left to lower right direction n4 = 0; // Top right to bottom left //***************Left and left direction********************* //First look for the left from the click position, add the chess piece n1 of the same color to itself until it is not the chess piece of the same color, and then the loop will be out of the for (var i = x; i >= 0; i--) {
if (arr[i][y] != num) {
break;
}
n1++;
}
// Then look for it from the clicked position to the next right position, add the chess piece n1 of the same color to itself until it is not the chess piece of the same color, and then the loop will be out of the for (var i = x + 1; i < 15; i++) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//***************Up and down direction****************** for (var i = y; i >= 0; i--) {
if (arr[x][i] != num) {
break;
}
n2++;
}
for (var i = y + 1; i < 15; i++) {
if (arr[x][i] != num) {
break;
}
n2++;
}
//*********************Upper left to lower right oblique direction*************** for(var i = x, j = y; i >=0, j >= 0; i--, j--) {
if (i < 0 || j < 0 || arr[i][j] != num) {
break;
}
n3++;
}
for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) {
if (i >= 15 || j >= 15 || arr[i][j] != num) {
break;
}
n3++;
}
//*********************Up right to lower left oblique direction****************** for(var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (i < 0 || j >= 15 || arr[i][j] != num) {
break;
}
n4++;
}
for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) {
if (i >= 15 || j < 0 || arr[i][j] != num) {
break;
}
n4++;
}
//Use a timer to delay, otherwise the dialog box will pop up first and then the chess piece will be displayed var str;
if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) {
if (num == 1) {//White Chess str = "White chess wins, the game is over!"
} else if (num == 2) {//Black Chess str = "Black Chess Wins, the game is over!"
}
= str;
isWin = true;
}
}
//restart = function() {
flag = true;
isWin = false;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
(0, 0, 640, 640);
= "";
drawLine();
}
drawLine();
</script>
</body>
</html>
Code link address:Gozi demo
More interesting classic game implementation topics, share with you:
Summary of C++ classic games
Summary of classic python games
python Tetris game collection
JavaScript classic game
Summary of classic javascript games
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.