网页版五子棋——匹配模块(客户端开发)

前一篇文章:网页版五子棋——用户模块(客户端开发)-CSDN博客

目录

·前言

一、前后端交互接口设计

二、游戏大厅页面

1.页面代码编写

2.前后端交互代码编写

3.测试获取用户信息功能

·结尾


·前言

        前面文章介绍完了五子棋项目用户模块的代码编写,从本篇文章就开始介绍五子棋项目匹配模块的代码编写了,匹配模块这里要做的事情就是可以让多个用户在游戏大厅中能够进行匹配,我们会按照天梯积分,把实力相近的两个玩家匹配到一起进行对战,本篇文章要介绍的内容是前后端交互接口的设计,以及游戏大厅页面的编写,还有前后端交互代码的编写,本篇文章新增的代码文件如下图圈起来的文件所示:

        下面就开始本篇文章的内容介绍。 

一、前后端交互接口设计

        我们先来设计一下匹配模块这里前后端交互的接口,像匹配这样的功能就需要用到前面文章中提到的消息推送机制了(文章链接:网页版五子棋—— WebSocket 协议-CSDN博客)这是因为玩家发送匹配请求的事情是可以确定的(当玩家点击匹配按钮,就会发送匹配请求),但是服务器什么时候告诉玩家匹配结果是不确定的,这就需要等待匹配结束的时候才能告知,如下图的场景:

        如上图所示,此时玩家2 点击匹配按钮,给服务器发送“我要进行匹配”这样的请求,服务器就会响应玩家2 的请求,同时要主动告诉玩家1 匹配成功,并告诉玩家1 它匹配到了哪个对手,这也就是消息推送的机制 ,所以我们下面要设计的前后端交互接口也都是基于 WebSocket 来展开的,前面文章介绍了 WebSocket 可以传输文本数据也可以传输二进制数据,我们这里就直接设计成让 WebSocket 传输 JSON 格式的文本数据即可,那么接口的设计就如下所示了:

  • 匹配连接:

                ws://127.0.0.1:8080/findMatch


  • 匹配请求:

                {

                        message: 'startMatch' / 'stopMatch',   // 开始/结束匹配

                }


  • 匹配响应1:

                {

                        ok: true / false,   // 匹配成功/失败

                        reason: "",          // 匹配如果失败, 失败原因的信息

                        message: 'startMatch' / 'stopMatch',

                }

        这个响应是客户端给服务器发送匹配请求之后,服务器立即返回的匹配响应。


  • 匹配响应2:

                {

                        ok: true / false,   // 匹配成功/失败

                        reason: "",

                        message: 'matchSuccess',

                }        

        这个响应是真正匹配到对手后,服务器主动推送回来的信息,匹配到的对手不需要在这个响应中体现,仍然都放在服务器中保存即可。

        上面设计好匹配模块中前后端交互的接口后,在通过 WebSocket 传输请求数据的时候,数据中不需要带有用户的身份信息,当前用户的身份信息在前面登录完成后就已经保存在 HttpSession 中了,在 WebSocket 中也是可以拿到之前登录完存在 HttpSession 中的信息。 

        关于上面的响应还要注意两点:

  • 客户端(页面)收到匹配的响应之后,就直接跳转到游戏房间页面;
  • 如果返回的匹配响应 ok 的值为 false,则弹框的方式显示错误原因,并跳转回登录页面。

二、游戏大厅页面

1.页面代码编写

        我们要编写游戏大厅页面的大致轮廓如下图所示:

        上图中的导航栏与页面主题区域的样式在前面已经编写过了,存放在了公共样式设置的 common.css 代码中,在下面编写游戏大厅页面的代码时就可以直接进行引用了,下面我们就来创建  game_hall.html 在这里编写游戏大厅的代码,这里主要包含:

  • #screen 用于显示玩家的分数信息;
  • #match-button 作为匹配按钮

        代码及详细的介绍如下所示: 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游戏大厅</title><!-- 引入 css 样式 --><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/game_hall.css">
</head>
<body><div class="nav">五子棋对战</div><!-- 整个页面的容器元素 --><div class="container"><!-- 这个 div 在 container 中是处于垂直水平居中这样的位置 --><div><!-- 展示用户信息 --><div id="screen"></div><!-- 匹配按钮 --><div id="match-button">开始匹配</div></div></div></body>
</html>

        游戏大厅样式 game_hall.css 的代码及介绍如下所示:

/* 游戏大厅样式 *//* 设置页面主体区域样式 */
.container {width: 100%;/* 导航栏已经占据 50px 像素这里使游戏大厅界面把剩余部分铺满 */height: calc(100% - 50px);/* 设置弹性布局 */display: flex;/* 设置位置垂直水平居中 */align-items: center;justify-content: center;
}/* 设置用户信息的展示框样式 */
#screen {width: 400px;height: 200px;/* 设置文字样式 */font-size: 20px;/* 设置背景颜色 */background-color: gray;/* 设置文字颜色 */color: white;/* 把边框的棱角钝化 */border-radius: 10px;/* 设置玩家信息内部位置 */text-align: center;/* 两行文本 */line-height: 100px;
}/* 设置匹配按钮的样式 */
#match-button {width: 400px;height: 50px;/* 设置字体样式 */font-size: 20px;color: white;/* 设置背景颜色 */background-color: orange;/* 去除边框与轮廓线 */border: none;outline: none;/* 把边框的棱角钝化 */border-radius: 10px;/* 设置文字位置 */text-align: center;/* 使文字垂直居中 */line-height: 50px;/* 增加与上面 div 的间距 */margin-top: 20px;
}/* 设置按钮被点击后的样式 */
#match-button:active {background-color: gray;
}

        到这里,游戏房间页面的代码就编写完毕了, 页面如下图所示:

        由于没有进行前后端交互代码的编写,所以这里的玩家信息还暂且获取不到。 

2.前后端交互代码编写

        为了让游戏大厅的页面能够获取到用户的信息,我们使用 Ajax 来使页面和服务器之间进行交互,这里的步骤是先引入 jQuery 代码,然后根据前面文章中规定好的获取用户信息的接口来编写这里前后端交互的代码,获取用户信息的接口如下图所示:

        在 game_hall.html 中编写 js 代码,通过 jQuery 中的 Ajax 来和服务器进行交互,同时创建 WebSocket 实例,建立 WebSocket 连接,来为后续匹配功能做准备,代码及详细介绍如下所示: 

    <!-- 引入 jQuery 代码 --><script src="js/jquery.min.js"></script><script>// 由于当前请求是在页面加载时就发送的// 所以直接进行前后端交互$.ajax({type: 'get',url: '/userInfo',success: function(body) {let screeDiv = document.querySelector('#screen');// 把要显示的数据组织好,放入 inneerHTML 中,进而显示到页面上screeDiv.innerHTML = '玩家: ' + body.username + " 分数: " + body.score+ "<br> 比赛场次: " + body.totalCount + " 获胜场次: " + body.winCount;},error: function() {alert("获取用户信息失败!");}});// 此处进行初始化 WebSocket, 并且实现前端的匹配逻辑.let websocket = new WebSocket("ws://127.0.0.1:8080/findMatch");websocket.onopen = function() {console.log("onopen");}websocket.onclose = function() {console.log("onclose");}websocket.onerror = function() {console.log("onerror");}// 监听页面关闭事件,在页面关闭之前,手动调用这里的 websocket 的 close 方法.websocket.onbeforeunload = function() {websocket.close();}// 处理服务器返回的响应数据websocket.onmessage = function(e) {// 这个响应是针对 "开始匹配" / "停止匹配" 来对应的// 解析得到的响应对象,返回的数据是一个 JSON 字符串,解析成 js 对象let resp = JSON.parse(e.data);let matchButton = document.querySelector('#match-button');if (!resp.ok) {console.log("游戏大厅中接收到了失败响应! " + resp.reason);return;}if (resp.message == 'startMatch') {// 开始匹配请求发送成功console.log("进入匹配队列成功!");matchButton.innerHTML = '匹配中...(点击停止)';} else if (resp.message == 'stopMatch') {// 结束匹配请求发送成功console.log("离开匹配队列成功!");matchButton.innerHTML = '开始匹配';} else if (resp.message == 'matchSuccess') {// 已经匹配到对手console.log("匹配到对手! 进入游戏房间!");location.assign("/game_room.html");} else {console.log("收到了非法的响应! message = " + resp.message);}}// 给匹配按钮添加一个点击事件let matchButton = document.querySelector('#match-button');// 点击匹配按钮后触发的操作matchButton.onclick = function() {// 在触发 websocket 请求之前,先确认下 websocket 连接是否正常if (websocket.readyState == websocket.OPEN) {// 当前 readyState 处在 OPEN 状态,表示连接正常// 这里发送的数据有两种可能, 开始匹配/停止匹配if (matchButton.innerHTML == '开始匹配') {console.log("开始匹配");// 通过 websocket 发送数据// send 是把一个 JSON 类型的数据进行发送// JSON.stringify() 先把我们要发送的数据转换成 JSON 字符串websocket.send(JSON.stringify({message: 'startMatch',}));} else if (matchButton.innerHTML == "匹配中...(点击停止)") {console.log("停止匹配");websocket.send(JSON.stringify({message: 'stopMatch',}));}} else {// 这是说明连接当前是异常的状态alert("当前您的连接已经断开! 请重新登录!");location.assign("/login.html");}}</script>

       在上面前后端交互代码的编写中,我们还要注意一点, JSON 字符串和 JS 对象的转换,这里 JSON 字符串转成 JS 对象用到的方法是 JSON.parse,JS 对象转成 JSON 字符串使用的方法是 JSON.stringify。

        编写完前后端交互的代码后,我们要注意一点,当我们修改完 css 样式或者 js 文件之后,往往需要在访问的页面中使用 Ctrl + F5 强制刷新一下页面才能生效,否则,浏览器可能仍然使用旧版本的代码,这是由于 css / js 的代码一般比较大,加载会比较慢,服务器会在第一次加载页面的时候把 css / js 部分的代码下载下来作为缓存,这样下次访问速度就会变快,Ctrl + F5 就是清除页面缓存让浏览器重新加载 css / js 代码。 

3.测试获取用户信息功能

        前后端交互做好之后,我们就可以启动服务器,在浏览器中输入:http://127.0.0.1:8080/login.html 进入登录页面,通过登录跳转到游戏大厅页面,来观察是否可以正确获取到用户信息,测试过程如下图所示:

        经过测试,图中的结果符合预期,游戏大厅页面中获取用户信息的功能就算是一个正常的功能了。 

·结尾

        文章到此就要结束了,本篇文章对匹配模块要用到的前后端交互接口进行了设计,并将游戏大厅的页面进行了编写,完成了获取用户信息的前后端交互代码,并测试了其功能的正确性,那么到这,五子棋匹配模块中的客户端代码开发也就基本完成了,如果对本篇文章内容有所疑惑,欢迎在评论区进行留言,如果感觉本篇文章还不错,希望能收到你的三连支持,下一篇文章就开始五子棋项目匹配模块中服务器端的代码开发了,我们下一篇文章再见吧~~~

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elasticSearch 7.12.1 Docker 安装ik分词

一、下载 https://github.com/infinilabs/analysis-ik/releases/tag/v7.12.1 将文件解压&#xff0c;复制到docker挂载的目录 docker ps#重启docker docker restart f7ec58e91f1f 测试 GET _analyze?pretty {"analyzer": "ik_max_word","text&qu…

在JS中, 0 == [0] 吗

在不知道答案的情况下, 你觉得这段代码的输出是什么 我当时觉得是false, 结果我错了–^^– 那为什么输出是true呢 因为的隐式类型转换, 运算符会尝试将两个操作数转换为相同的类型&#xff0c;然后再进行比较。 在这个例子中&#xff0c;0 是一个数字&#xff0c;而 [0] 是…

【学习AI-相关路程-mnist手写数字分类-win-硬件:windows-自我学习AI-实验步骤-全连接神经网络(BPnetwork)-操作流程(3) 】

【学习AI-相关路程-mnist手写数字分类-win-硬件&#xff1a;windows-自我学习AI-实验步骤-全连接神经网络&#xff08;BPnetwork&#xff09;-操作流程&#xff08;3&#xff09; 】 1、前言2、前置学习&#xff08;1&#xff09;window和Linux中python寻找目录的方式。&#x…

RabbitMQ客户端应用开发实战

这一章节我们将快速完成RabbitMQ客户端基础功能的开发实战。 一、回顾RabbitMQ基础概念 这个RabbitMQ的核心组件&#xff0c;是进行应用开发的基础。 二、RabbitMQ基础编程模型 RabbitMQ提供了很多种主流编程语言的客户端支持。这里我们只分析Java语言的客户端。 上一章节提…

一文了解Android SELinux

在Android系统中&#xff0c;SELinux&#xff08;Security-Enhanced Linux&#xff09;是一个增强的安全机制&#xff0c;用于对系统进行强制访问控制&#xff08;Mandatory Access Control&#xff0c;MAC&#xff09;。它限制了应用程序和进程的访问权限&#xff0c;提供了更…

python画图|hist()函数深层体验

【1】引言 前述学习已经掌握hist()函数的基本运用技巧&#xff0c;可通过下述链接直达&#xff1a; python画图|hist()函数画直方图初探-CSDN博客 python画图|hist()函数画直方图进阶-CSDN博客 我们已经理解hist()函数本质上画的是概率分布图&#xff0c;相关知识属于数理统…

火狐浏览器同源策略禁止解决方案

前言 火狐浏览器同源策略禁止解决方案_同源策略禁止读取远程资源怎么办-CSDN博客 在使用Firefox火狐浏览器进行Web开发时&#xff0c;有时会遇到因为同源策略&#xff08;Same-Origin Policy&#xff09;导致的跨域请求被拦截的问题。例如&#xff0c;控制台可能会显示如下错…

计算机网络——TCP篇

TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗&#xff1f; 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的&#xff1f; 一次握手:客户端发送带有 …

解决ImportError: DLL load failed while importing _message: 找不到指定的程序。

C:\software\Anoconda\envs\yolov5_train\python.exe C:\Project\13_yolov5-master\train.py C:\software\Anoconda\envs\yolov5_train\lib\site-packages\torchvision\io\image.py:13: UserWarning: Failed to load image Python extension: [WinError 127] 找不到指定的程序…

AOSP沙盒android 11

这里介绍一下aosp装系统 什么是aosp AOSP&#xff08;Android Open Source Project&#xff09;是Android操作系统的开源版本。 它由Google主导&#xff0c;提供了Android的源代码和相关工具&#xff0c;供开发者使用和修改。 AOSP包含了Android的核心组件和API&#xff0c;使…

git提交冲突的原因及解决方案

一、场景一 1.冲突原因 提交者的版本库 < 远程库 要保障提交者的版本库信息和远程仓库是一致的 2.解决方案 实现本地同步git pull,再提交代码&#xff08;最好每次git push之前都git pull一下&#xff0c;防止这种情况的出现&#xff09; 场景二 1.冲突原因 别人跟你…

第十五届蓝桥杯C/C++B组题解——数字接龙

题目描述 小蓝最近迷上了一款名为《数字接龙》的迷宫游戏&#xff0c;游戏在一个大小为N N 的格子棋盘上展开&#xff0c;其中每一个格子处都有着一个 0 . . . K − 1 之间的整数。游戏规则如下&#xff1a; 从左上角 (0, 0) 处出发&#xff0c;目标是到达右下角 (N − 1, N …

得物多模态大模型在重复商品识别上的应用和架构演进

重复商品治理介绍 根据得物的平台特性&#xff0c;同一个商品在平台上不能出现多个链接&#xff0c;原因是平台需要保证一品一链的特点&#xff0c;以保障商品的集中竞价&#xff0c;所以说一个商品在整个得物平台上只能有一个商详链接&#xff0c;因此我们需要对一品多链的情…

盘点2024年惊艳的10款录屏工具!!

你是否经常需要捕捉电脑屏幕上的精彩瞬间&#xff1f;或者想要记录自己操作某个应用程序的流程&#xff1f;这时候你就需要一款录屏工具啦&#xff01;在学习、工作和娱乐中&#xff0c;录屏工具都能成为你的得力助手。无论你是做教学视频、游戏解说还是分享精彩瞬间&#xff0…

vue+websocket实现即时聊天平台

目录 1 什么是websocket 2 实现步骤 2.1 导入依赖 2.2 编写代码 1 什么是websocket WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它主要用于在客户端和服务器之间建立持久的连接&#xff0c;允许实时数据交换。WebSocket 的设计目的是为了提高 Web 应用程序的…

软件设计师-上午题-15 计算机网络(5分)

计算机网络题号一般为66-70题&#xff0c;分值一般为5分。 目录 1 网络设备 1.1 真题 2 协议簇 2.1 真题 3 TCP和UDP 3.1 真题 4 SMTP和POP3 4.1 真题 5 ARP 5.1 真题 6 DHCP 6.1 真题 7 URL 7.1 真题 8 浏览器 8.1 真题 9 IP地址和子网掩码 9.1 真题 10 I…

C++:map 和 set 的使用

前言 平衡二叉搜索树 ( AVL树 ) 由于二叉搜索树在特殊情况下&#xff0c;其增删查的效率会降低到 O ( N )&#xff0c;因此对二叉搜索树进行改良&#xff0c;通过旋转等方式将其转换为一个左右均衡的二叉树&#xff0c;这样的树就称为平衡二叉搜索树&#xff0c;又称 AVL树。…

Vue 自定义icon组件封装SVG图标

通过自定义子组件CustomIcon.vue使用SVG图标&#xff0c;相比iconfont下载文件、重新替换更节省时间。 子组件包括&#xff1a; 1. Icons.vue 存放所有SVG图标的path 2. CustomIcon.vue 通过icon的id索引对应的图标 使用的时候需要将 <Icons></Icons> 引到使用的…

面相小白的php反序列化漏洞原理剖析

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理反序列化漏洞的一些成因原理 建议学习反序列化之前 先对php基础语法与面向对象有个大体的了解 (我觉得我整理的比较细致&#xff0c;了解这俩是个啥就行) 漏洞实战情况 这个漏洞黑盒几乎不会被发现&am…

ReactPress:深入解析技术方案设计与源码

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;欢迎一起共建&#xff0c;感谢Star。 ReactPress是一个基于React框架开发的开源发布平台&#xff0c;它不仅仅是一个简单的博客系统&#xff0c;更是一个功能全…