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

news2024/11/16 13:27:39

【五子棋实战】第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)、电脑计算时间等等,包括你可以自定义自己的工具栏,比如玩家姓名、菜单页面等等

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

无显示器玩转树莓派桌面版

title: 无显示器玩转树莓派桌面版 zhaoolee在Github开启了长篇连载《树莓派不吃灰》https://github.com/zhaoolee/pi 目前已经更新到18篇&#xff0c;主要是给树莓派刷Ubuntu当做家庭服务器用。 恰好手头还有一块闲置的树莓派4B &#xff0c;我打算深度玩一下树莓派桌面版&…

CODESYS电子齿轮同步MC_GearIn指令编程应用

MC_GearIn属于比例随动控制,有关比例随动控制详细介绍请参看下面文章: 运动控制比例随动系统_RXXW_Dor的博客-CSDN博客PLC如何测量采集编码器的位置数据,不清楚的可以参看我的另一篇博文:三菱FX3U PLC高速计数器应用(附代码)_RXXW_Dor的博客-CSDN博客本文主要以三菱FX3U…

第十一章 EfficientNetv1网络详解

系列文章目录 第一章 AlexNet网络详解 第二章 VGG网络详解 第三章 GoogLeNet网络详解 第四章 ResNet网络详解 第五章 ResNeXt网络详解 第六章 MobileNetv1网络详解 第七章 MobileNetv2网络详解 第八章 MobileNetv3网络详解 第九章 ShuffleNetv1网络详解 第十章…

ffmpeg 音视频处理神器

1 FFmpeg是什么 ffmpeg是一套用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它包含了非常先进的音频/视频编解码库libavcodec&#xff0c;提供了录制、转换以及流化音视频的完整解决方案。 许多FFmpeg的开发人员都来自MPla…

AWS Lambda 介绍

计算服务的演进 EC2------Container-------Lambda 虚拟机---容器--------------serverless无服务器架构 什么是AWS Lambda&#xff1f; AWS lambda的核心是事件驱动&#xff0c;驱动可能来自&#xff0c;Alexa,SNS&#xff0c;DynamoDB&#xff0c;S3&#xff0c;Kinesis等&…

什么是队列?Python中如何使用队列(62)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 和猫妹学Python&#xff0c;一起趣味学编程。 今日主题 什么是队列&#xff1f; 队列有哪些接口(api)&#xff1f; 在Python中如何表示队列&#xff1f; 什么是队列 队…

HDFS的工作原理是怎么样的?是如何实现HA模式?

原文链接&#xff1a;http://www.ibearzmblog.com/#/technology/info?id714dcb3957e29185493239b269a9ef65 前言 HDFS是能够提供一个分布式文件存储的系统&#xff0c;在大型数据文件的存储中&#xff0c;能够提供高吞吐量的数据访问&#xff0c;那么它是如何实现数据文件的…

电机调速执行

一、建立思维导图&#xff0c;将功能分析近而转换成技术要点&#xff0c;逐步实现。 二、编码器 1、机械编码器 &#xff08;1&#xff09;机械编码器是什么&#xff0c;张啥样&#xff1f; 如下图&#xff0c;这个就是我们生活应用中常见的机械编码器&#xff0c;我们又叫旋…

【C++】模板初阶——函数模板和类模板

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f681; 个人主页&#xff1a;不 良 &#x1f525; 系列专栏&#xff1a;&#x1f6f8;C &#x1f6f9;Linux &#x1f4d5; 学习格言&#xff1a;博观而约取&#xff0…

鲍威尔一句话,BTC冲破30000!币圈涨跌不再依赖美联储降息?

仅仅一夜&#xff0c;全球最大的加密货币比特币价格突破30000美元关键阻力位&#xff0c;最高突破至30800美元&#xff0c;创2023年4月以来的最高价。而美联储主席鲍威尔的证词&#xff0c;竟是这波行情的最大催化剂。 鲍威尔周三出席众议院金融服务委员会接受质询&#xff0c;…

为什么独立站做不好?80%的人都走过这5个弯路

最近接触了不少卖家&#xff0c;发现不少独立站因为犯下一些常见的错误&#xff0c;导致最终失败&#xff0c;但是这些都是完全可以避免的。 那些新手卖家常见的问题就是许多人对独立站运营没有基本概念&#xff0c;同时并没有把脑袋中的零散的技巧串起来。要知道独立站运营是…

青大数据结构【2018】【单选、简答】

关键字: 计算机数据结构、存储方式、递归设计、矩阵压缩存储、二叉树形态、哈希冲突、希尔排序 一、单选 二、简答 对于线性表的存储,当采用顺序存储时,插入和删除元素平均需要移动半个表长,而链式存储结构只需要修改相应的指针就可以了。 递归设计要注意递归函数式的内…

【Java系列】深入解析Stream API

序言 你只管努力&#xff0c;其他交给时间&#xff0c;时间会证明一切。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记论点蓝色&#xff1a;用来标记论点 希望这篇文章能让你不仅有一定的收获&#xff0c;而且…

看完这篇 教你玩转渗透测试靶机vulnhub—Emplre: Lupinone

Vulnhub靶机Emplre: Lupinone渗透测试详解 Vulnhub靶机介绍&#xff1a;Vulnhub靶机下载&#xff1a;Vulnhub靶机安装&#xff1a;Vulnhub靶机漏洞详解&#xff1a;①&#xff1a;信息收集&#xff1a;②&#xff1a;SSH私钥爆破登入&#xff1a;③&#xff1a;pip提权&#xf…

[晕事]今天做了件晕事14,查单词charp

从内核模块的代码里看到一个单词charp&#xff0c;去尝试查单词&#xff0c;发现了一个 Charp impact value 【机】 夏比冲击值 这个直接是音译&#xff0c;肯定不是想要的&#xff0c; 后来使用bing搜索引擎&#xff0c;里面有一个链接&#xff1a; 这个网页真是很有迷惑性&am…

GEE:实现 Lee 杂波滤波器(Lee speckle filter)降低或去除SAR图像中的杂波(speckle noise)

作者:CSDN @ _养乐多_ 这段代码实现了一种叫做Refined Lee滤波器的雷达图像处理算法。Lee speckle filter(Lee杂波滤波器)是一种常用的合成孔径雷达(SAR)图像处理算法,用于降低或去除SAR图像中的杂波(speckle noise)。SAR图像中的杂波是由于SAR工作原理导致的干涉和散…

图形编辑器开发:缩放至适应画布

大家好&#xff0c;我是前端西瓜哥。 之前我们实现了画布缩放的功能&#xff0c;本文来讲讲如何让内容缩放至适应画布大小&#xff08;Zoom to fit&#xff09;。 我们看看效果。 文中的动图演示来自我正在开发的图形设计工具&#xff1a; https://github.com/F-star/suika 线…

SpringBoot 统⼀功能处理

目录 SpringBoot 统一功能处理概念 统一用户登录权限验证 登录功能代码 Spring拦截器实现步骤&#xff1a; 统一项目访问前缀 第一种方法&#xff1a;重写configurePathMatch方法进行配置 第二种方法&#xff1a;在系统的配置文件.properties中进行配置 统一异常处理返回…

香橙派4 2. 驱动usb2.0芯片cy7c68013

0. 环境 - 香橙派4&#xff08;Orangepi4_2.1.2_ubuntu_bionic_desktop_linux4.4.179.img&#xff09; - EZ-USB FX2LP CY7C68013A USB 核心板 1. 下载FX3_SDK_1.3.4_linux EZ-USB™ FX3 Software Development Kit https://www.infineon.com/cms/en/design-support/tools/sdk…