【五子棋实战】第6章 调用接口进行联调

【五子棋实战】第6章 调用接口进行联调

  • Ajax调用接口
  • 调用五子棋接口
  • 点击优化
  • 尾声
  • 更多待开发的功能

Ajax调用接口

  引入Jquery,使用JQ封装的ajax,demo如下:

<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,请求参数包括 boarddepthratiolength。成功响应后,根据返回结果进行相应的处理。如果返回的 code200,且 flagtrue,则显示获胜信息;否则根据返回结果更新棋盘状态,并进行相应的绘制和切换玩家操作。若请求出错,则输出错误信息到控制台。

点击优化

  在电脑计算过程中,我们要控制再次点击并不会绘制棋子。我采取的方法是在点击之后,取消和棋盘绑定的点击事件函数,等到电脑算完之后,再次重新绑定。

尾声

  一切准备就绪后,就可以下棋了:
在这里插入图片描述

  可以看到每次接口调用,服务器后台都会打印日志:
在这里插入图片描述

更多待开发的功能

  1、可以改写下棋逻辑,让电脑分别扮演黑白棋和自己下,看看能不能下满棋盘

  2、本项目只提供了核心功能,支持前端界面跨平台、自定义

  3、在游戏工具栏上,我也预留了配置项,比如棋盘边长、游戏难度(进攻系数和遍历深度)、棋子统计(step)、电脑计算时间等等,包括你可以自定义自己的工具栏,比如玩家姓名、菜单页面等等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/31251.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python 操作 Excel 全攻略 | 包括读取、写入、表格操作、图像输出和字体设置

文章目录 前言Python 操作 Excel 教程1. Excel 文件的读取与写入2. Excel 表格的操作2.1 插入和删除行和列2.2 遍历表格中的单元格并修改值 3. 图像的输出3.1 输出柱状图 4. 字体的设置4.1 设置单元格的字体大小和颜色4.2 设置单元格的加粗和斜体4.3 设置单元格的边框和填充颜色…

CSS弹性布局常用设置

目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 //初始化*{padding: 0;margin: 0}//…

【Python GUI编程系列 01】安装python pycharm 和 pyside6

Python GUI编程系列 01 安装python pycharm 和 pyside61、安装python2、安装pycharm3、安装 pyside6 安装python pycharm 和 pyside6 本系列使用python3 pycharmpyside6 来进行python gui设计&#xff0c;首先我们来配置编程环境 PS&#xff1a;为了减少复杂程度&#xff0c;本…

MySQL:事务

事务 在介绍事务之前&#xff0c;我们先来了解一个案例&#xff1a; 在一个买票的软件中&#xff0c;当客户端A检查还有一张票时&#xff0c;将票卖点&#xff0c;但是还没有更新数据库&#xff0c;客户端B检查了票数&#xff0c;发现大于0&#xff0c;于是又卖掉了一张票。然…

【五子棋实战】第3章 算法包装成第三方接口

【五子棋实战】第3章 算法包装成第三方接口 使用Flask开放接口 ## 定义接口输入 ## 开放接口、跨域配置、数据解析 数据预处理 ## 数据检查与异常捕获 ## 预处理数据 ## 定义接口输出 开启接口 继续学习下一篇实战&#xff01; 我们在上一章实现了博弈树负值极大alpha…

Web服务器群集:部署LNMP平台

目录 一、理论 1.LNMP平台 2.Nginx服务基础 3.Nginx访问控制 4.Nginx虚拟主机 5.PHP 二、实验 1.LNMP架构DISCUZ论坛应用 三、问题 1.没有规则可以创建“default”需要的目标“build”。 2.nginx重启报错 3.yum安装提示报错 4.配置文件报错 5.PHP页面无法打开 四…

菲涅尔圆孔衍射matlab完整程序分享

根据惠更斯 &#xff0d; 菲涅耳原理&#xff0c;光的衍射是光束内部的次波之间的相干叠加&#xff0c;衍射光波场的光振动符合菲涅耳积分公式。但直接运用菲涅耳积分公式计算衍射光场是很困难的。对于夫琅和费衍射(远场衍射)&#xff0c;在光源和接收屏距离衍射屏均为无穷远的…

【C++】内存管理、new和delete操作类型、operator new和operator delete函数、new和delete的实现原理

文章目录 1.C/C内存管理2.C语言的内存管理方式3.C内存管理方式3.1 new和delete操作内置类型3.2 new和delete操作自定义类型 4.operator new与operator delete函数5.new和delete的实现原理5.1内置类型5.2 自定义类型 1.C/C内存管理 在C/C中&#xff0c;内存管理是程序员负责管理…

TCP 学习笔记

Win R 打开控制台输入CMD 打开小黑窗&#xff0c; 输入ipconfig 查询本机地址 “外网IP是全世界唯一的IP地址,仅分配给一个网络设备。而内网IP是由路由器分配给每一部内部使用的IP地址,而内网的所有用户都是通过同一个外网IP地址进行上网的,而内网的IP地址每个人的都不一样…

SQL 基础语句

SQL 基础语句 DDL Data Definition Language 数据定义语言创建 create删除 drop修改 alter清空 truncate show tables ; --查看所有表&#xff1a; drop database db1; --删除数据库 create database db1 default character set utf8; --创建数据库 use databas…

十大基础算法

一、选择排序 过程简单描述&#xff1a; 首先&#xff0c;找到数组中最小的那个元素&#xff0c;其次&#xff0c;将它和数组的第一个元素交换位置(如果第一个元素就是最小元素那么它就和自己交换)。其次&#xff0c;在剩下的元素中找到最小的元素&#xff0c;将它与数组的第二…

C++【STL】之priority_queue学习

优先级队列 优先级队列priority_queue也是STL库中容器适配器的一种&#xff0c;常用于进行数据优先级的处理&#xff0c;说到这儿是不是发现有些熟悉&#xff0c;没错它和我们之前讲解的堆本质上就是一个东西&#xff0c;底层都是数组存储的完全二叉树&#xff0c;它在STL库中…

设计模式(二十二):行为型之备忘录模式

设计模式系列文章 设计模式(一)&#xff1a;创建型之单例模式 设计模式(二、三)&#xff1a;创建型之工厂方法和抽象工厂模式 设计模式(四)&#xff1a;创建型之原型模式 设计模式(五)&#xff1a;创建型之建造者模式 设计模式(六)&#xff1a;结构型之代理模式 设计模式…

华为OD机试真题 JavaScript 实现【最短木板长度】【2022Q4 100分】,附详细解题思路

一、题目描述 小明有 n 块木板&#xff0c;第 i ( 1 ≤ i ≤ n ) 块木板长度为 ai。 小明买了一块长度为 m 的木料&#xff0c;这块木料可以切割成任意块&#xff0c;拼接到已有的木板上&#xff0c;用来加长木板。 小明想让最短的木板尽量长。 请问小明加长木板后&#xff0c…

Android12之执行adb disable-verity后android无法启动(一百五十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

前沿应用丨大规模无人机集群与“虚实结合”半实物仿真系统

一、应用背景 无人机集群在军事、安全、救援、航空监测、物流配送等领域具有广泛的应用前景。它可以提高任务执行的效率、灵活性和安全性&#xff0c;同时降低人力资源的需求和风险&#xff0c;无人机集群研究涉及多个学科领域&#xff0c;如机器人学、控制理论、通信技术和人工…

Verilog | 基4 booth乘法器

上接乘法器介绍 原理 跟基2的算法一样&#xff0c;假设A和B是乘数和被乘数&#xff0c;且有&#xff1a; A ( a 2 n 1 a 2 n ) a 2 n − 1 a 2 n − 2 … a 1 a 0 ( a − 1 ) B b 2 n − 1 b 2 n − 2 … b 1 b 0 \begin{align}A&(a_{2n1}a_{2n})a_{2n−1}a_{2n−2}……

【ARIMA-LSTM】合差分自回归移动平均方法-长短期记忆神经网络研究(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

基于Nginx1.22+PHP8+MySQL8安装Discuz! X3.5

基于Nginx1.22PHP8MySQL8安装Discuz! X3.5 1. 安装PHP82. 安装MySQL83. 配置Nginx1.224. 安装Discuz! X3.5 1. 安装PHP8 更新系统&#xff1a; yum update安装EPEL存储库&#xff1a; yum install epel-release安装Remi存储库&#xff08;提供了最新的 PHP 版本&#xff09;&…

阿里云主机详解:ECS/轻量/虚拟主机/GPU/裸金属/云电脑详解

阿里云云主机分为云虚拟主机、云服务器ECS、轻量应用服务器、GPU云服务器、弹性裸金属服务器、专有宿主机、FPGA云服务器、高性能计算E-HPC、无影云电脑等&#xff0c;阿里云百科来详细说下阿里云云主机详解&#xff1a; 目录 阿里云云主机 云服务器ECS 轻量应用服务器 云…