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

前一篇文章:网页版五子棋——用户模块(客户端开发)-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.mzph.cn/bicheng/59927.shtml

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

相关文章

【微服务】不同微服务之间用户信息的获取和传递方案

如何才能在每个微服务中都拿到用户信息&#xff1f;如何在微服务之间传递用户信息&#xff1f; 文章目录 概述利用微服务网关做登录校验网关转微服务获取用户信息openFeign传递微服务之间的用户信息 概述 要在每个微服务中获取用户信息&#xff0c;可以采用以下几种方法&#…

OpenEuler 下 Docker 安装、配置与测试实例

文章目录 前言1. 环境准备2. 下载 Docker3.配置服务文件4.配置加速器加速下载docker镜像5. 验证 Docker 安装 前言 Docker 安装大致分为包管理器安装、脚本安装、离线手动安装、容器编排工具安装、桌面版安装等&#xff0c;每种安装各有特点&#xff0c;但涉及知识面不少&…

GK7205V500 GK7250V510 国科微 SOC芯片

GK7205V500 芯片是国科推出的新一代高集成度、高画质、低码率、低功耗的 AI IP Camera SoC 芯 片。 芯片集成 ARM Cortex A7 处理器&#xff0c;支持专业的 ISP 图像处理单元&#xff0c;H.265/H.264 视频编码与神经网络 处理单元&#xff08;NPU&#xff09;&#xff0c…

_浅谈单片机的gcc优化级别__以双音频信号发生器为例

一、简介 gcc有多种优化级别&#xff0c;一般不选择的情况下&#xff0c;IDE默认是按照-Og或这-O2优化的。 以gcc编译器为例&#xff0c;浅谈一下优化级别&#xff0c;我们常见的优化一般是指gcc的-O2、-Og。除此之外&#xff0c;gcc还有-Os等一系列优化&#xff0c;链接器也有…

qt QTreeWidgetItem详解

1、概述 QTreeWidgetItem 是 Qt 框架中的一个类&#xff0c;专门用于在 QTreeWidget&#xff08;一个基于项的树形视图&#xff09;中表示单个节点&#xff08;或称为项&#xff09;。QTreeWidget 继承自 QAbstractItemView&#xff0c;而 QTreeWidgetItem 则作为树中的一个节…

[每周一更]-(第122期):模拟面试|数据库面试思路解析

10|数据库索引:为什么 MySQL 用 B+ 树而不用 B 树? 为什么 MySQL 用 B+ 树而不用 B 树? 什么是覆盖索引? 什么是聚簇索引/非聚簇索引? 什么是哈希索引?MySQL InnoDB 引擎怎么创建一个哈希索引? 什么回表?如何避免回表? 树的高度和查询性能是什么关系? 什么是索引最左…

java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl

用大模型做车牌号识别&#xff0c;最简单高效 在Java场景中&#xff0c;java识别车牌号的需求非常普遍。过去&#xff0c;我们主要依赖OCR等传统方法来实现java识别车牌号&#xff0c;但这些方法的效果往往不稳定。随着技术的发展&#xff0c;现在有了更先进的解决方案——大模…

FreeRTOS学习日志--中断测试实验,以及遇到的问题

目录 实验项目&#xff1a;FreeRTOS 中断测试实验 1、实验目的 2、实验设计 遇到的问题 stm32F103战舰在运行程序后&#xff0c;USB232串口不能接收到信号问题。 从跑马灯FreeRTOS文件基础上移植的FreeRTOS中断无效&#xff0c;而例程中断有效问题。 问题来源与解决方法…

shodan[3](泷羽sec)

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章。 笔记只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 这节课旨在扩大自己在网络安全方面的知识面&#xff0c;了解网络安全领域的见闻&#xff0c;了…

Element UI组件Dialog显示闪动问题【解决方案】

在ElementUI中&#xff0c;el-dialog弹窗确实有时会导致页面出现抖动或闪动的问题。这通常是由于弹窗出现时对页面布局的影响&#xff0c;特别是滚动条的出现或消失&#xff0c;导致了页面的重新布局和渲染。以下是一些解决或缓解这一问题的方法&#xff1a; 解决方案 1. 关闭…

计算机毕业设计Python流量检测可视化 DDos攻击流量检测与可视化分析 SDN web渗透测试系统 网络安全 信息安全 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

BO-CNN-LSTM回归预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多输入单输出回归预测

BO-CNN-LSTM回归预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多输入单输出回归预测 目录 BO-CNN-LSTM回归预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 …

【node模块】深入解读node:assert模块

&#x1f9d1;‍&#x1f4bc; 一名茫茫大海中沉浮的小小程序员&#x1f36c; &#x1f449; 你的一键四连 (关注 点赞收藏评论)是我更新的最大动力❤️&#xff01; &#x1f4d1; 目录 &#x1f53d; 前言1️⃣ 什么是node:assert模块&#xff1f;2️⃣ node:assert模块的核心…

JDBC学习记录

文章目录 一、JDBC简介1.1、 JDBC概念1.2、 JDBC本质1.3、 JDBC好处 二、JDBC快速入门2.1、 编写代码步骤2.2、 代码示例 三、JDBC API详解3.1、DriverManager3.1.1、注册驱动3.1.2、获取连接 3.2、Connection3.2.1、获取执行对象3.2.2、事务管理 3.3、Statement3.3.1、执行DDL…

Linux和,FreeRTOS 任务调度原理,r0-r15寄存器,以及移植freertos(一)

目录、 1、r0-r15寄存器&#xff0c;保护现场&#xff0c;任务切换的原理 2、freertos移植 3、freertos的任务管理。 一、前言 写这篇文章的目的&#xff0c;是之前面试官&#xff0c;刚好问到我&#xff0c;移植FreeRTOS 到mcu&#xff0c;需要做哪些步骤&#xff0c;当时回…

安利一款开源企业级的报表系统SpringReport

SpringReport是一款企业级的报表系统&#xff0c;支持在线设计报表&#xff0c;并绑定动态数据源&#xff0c;无需写代码即可快速生成想要的报表&#xff0c;可以支持excel报表和word报表两种格式&#xff0c;同时还可以支持excel多人协同编辑&#xff0c;后续考虑实现大屏设计…

css:基础

前言 我们之前其实也可以写出一个看起来算是一个网页的网页&#xff0c;为什么我们还要学css&#xff1f; CSS&#xff08;Cascading Style Sheets&#xff09;也叫层叠样式表&#xff0c;是负责美化的&#xff0c;我们之前说html就是一个骨架&#xff0c;css就可以用来美化网…

qt QCompleter详解

1、概述 QCompleter是Qt框架中的一个类&#xff0c;用于为文本输入提供自动完成功能。它可以与Qt的输入控件&#xff08;如QLineEdit、QTextEdit等&#xff09;结合使用&#xff0c;根据用户的输入实时过滤数据源&#xff0c;并在输入控件下方或内部显示补全建议列表。用户可以…

探索 Move 编程语言:智能合约开发的新纪元

目录 引言 一、变量的定义 二、整型 如何在Move中表示小数和负数&#xff1f; 三、运算符 as运算符 布尔型 地址类型 四、什么是包&#xff1f; 五、什么是模块&#xff1f; 六、如何定义方法&#xff1f; 方法访问权限控制 init方法 总结 引言 Move 是一种专为区…

ETLCloud异常问题分析ai功能

在数据处理和集成的过程中&#xff0c;异常问题的发生往往会对业务运营造成显著影响。为了提高ETL&#xff08;提取、转换、加载&#xff09;流程的稳定性与效率&#xff0c;ETLCloud推出了智能异常问题分析AI功能。这一创新工具旨在实时监测数据流动中的潜在异常&#xff0c;自…