【Gomoku Actual Combat】Chapter 6 Call Interface for Joint Debugging

Ajax call interface

  Introduce Jquery, use the ajax packaged by JQ, the demo is as follows:

<script src="jquery-3.5.0.min.js"></script>
<script>
$.ajax({
    
    
	url: 'http://localhost:5000/api/next_step',
	type: 'POST',
	data: {
    
     'board':board.value.toString(), 'depth': 3, 'ratio':1, 'length': 15},
	dataType: 'json',
	success: function(response) {
    
    
		console.log(response);
	},
	error: function(error) {
    
    
		console.log(error);
	}
});
</script>

Call backgammon interface

$.ajax({
    
    
	url: 'http://localhost:5000/api/next_step',
	type: 'POST',
	data: {
    
     'board':board.value.toString(), 'depth': 3, 'ratio':1, 'length': 15},
	dataType: 'json',
	success: function(response) {
    
    
		console.log(response);

		if(response.code === 200){
    
    
			if(response.data.flag === true){
    
    
				alert(response.data.player + "win !!");
				return;
			}
			var data = response.data;
			var i = data.x;
			var j = data.y;

			if(currentPlayer == 1){
    
    
				var c = new Chess(i,j,black_flag);
				board.value[i][j]=black_flag;
			}else{
    
    
				var c = new Chess(i,j,white_flag);
				board.value[i][j]=white_flag;
			}
			
			board.chessList.push(c);
			draw.drawChessAll(board.chessList);
			currentPlayer = (currentPlayer === 1) ? 2 : 1;
			
		}else{
    
    
			alert(response.msg);
		}
		$("span").css("display","none");
	},
	error: function(error) {
    
    
		console.log(error);
	}
});

  The above code is an example of a POST request using Ajax. The request is sent to http://localhost:5000/api/next_step, and the request parameters include board, depth, ratioand length. After a successful response, perform corresponding processing according to the returned result. If the returned codeis 200and flagis true, then display the winning information; otherwise, update the board state according to the returned result, and perform corresponding drawing and player switching operations. If there is an error in the request, the error message will be output to the console.

Click to optimize

  In the process of computer calculation, we need to control that clicking again will not draw the chess pieces. The method I take is to cancel the click event function bound to the chessboard after the click, and rebind it again after the computer finishes calculating.

end

  When everything is ready, you can play chess:

  You can see that every time the interface is called, the server background will print the log:

More functions to be developed

  1. You can rewrite the logic of playing chess, let the computer play Reversi and play by yourself, and see if you can fill the board

  2. This project only provides core functions and supports cross-platform and custom front-end interface

  3. On the game toolbar, I also reserved configuration items, such as board side length, game difficulty (attack coefficient and traversal depth), chess piece statistics (step), computer calculation time, etc., including you can customize your own Toolbars, such as player names, menu pages, etc.