【五目並べ実戦】第6章 共同デバッグ用通話インターフェース

Ajax呼び出しインターフェース

  Jquery を導入し、JQ によってパッケージ化された ajax を使用します。デモは次のとおりです。

<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>

バックギャモン インターフェイスを呼び出す

$.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);
	}
});

  上記のコードは、Ajax を使用した POST リクエストの例です。リクエストは に送信されhttp://localhost:5000/api/next_step、リクエスト パラメータにはboard、depth、ratioおよび が含まれますlength。正常に応答した後、返された結果に従って対応する処理を実行します。返されたcodeが200および でflagあるtrue場合は、勝ちの情報を表示します。そうでない場合は、返された結果に従ってボードの状態を更新し、対応する描画とプレーヤーの切り替え操作を実行します。リクエストにエラーがあった場合は、コンソールにエラーメッセージが出力されます。

クリックして最適化

  コンピューターの計算の過程で、もう一度クリックしても駒が描画されないように制御する必要があります。私がとっている方法は、クリック後にチェス盤にバインドされているクリックイベント関数をキャンセルし、コンピュータが計算を終えた後に再度バインドするというものです。

終わり

  すべての準備ができたら、チェスをプレイできます。

  インターフェイスが呼び出されるたびに、サーバーのバックグラウンドでログが出力されることがわかります。

さらに多くの機能を開発予定

  1. チェスのロジックを書き換えて、コンピューターにリバーシをプレイさせたり、自分でプレイさせたりして、ボードを埋めることができるかどうかを確認できます。

  2. このプロジェクトはコア機能のみを提供し、クロスプラットフォームおよびカスタム フロントエンド インターフェイスをサポートします。

  3. ゲーム ツールバーには、ボードの辺の長さ、ゲームの難易度 (攻撃係数とトラバースの深さ)、チェスの駒の統計 (ステップ)、コンピューターの計算時間などの設定項目も予約されており、独自のツールバーをカスタマイズすることもできます。 、プレーヤー名、メニューページなど。