【项目】棋海争锋

  • 🎥 个人主页：Dikz12
  • 📕格言：吾愚多不敏，而愿加学
  • 欢迎大家👍点赞✍评论⭐收藏

目录

项目介绍

WebSocket介绍

 使用

项目创建 

数据库设计  

用户模块 

登录接口

 注册接口

获取用户信息接口

匹配模块

websocket交互接口

创建并配置 websocket 请求的入口类

创建匹配请求/响应对象

创建用户管理器 

 处理websocket连接成功

处理开始匹配/取消匹配请求

处理连接关闭和连接异常

对战模块 

websocket交互接口

创建并配置 websocket 请求的入口类

创建Room对象（游戏房间） 

创建落子请求/响应对象

 处理连接成功

处理连接异常和连接关闭  

 处理落子请求

实现对弈功能

 主要的判定输赢逻辑

​编辑项目验证

项目介绍

棋海争锋：实现一个网页版的五子棋对战，分为三个模块：用户模块、匹配模块、对战模块.

技术栈：Spring、Spring Boot、SpringMVC、MyBatis、 MySQL、WebSocket; 

 前端：html、css、js、ajax.

WebSocket介绍

传统的Http协议是一种“一问一答”结构的协议模型，也就是客户端发送一个请求，服务器就会回一个响应，这种情况下，服务器是不能主动给客户端发消息的;

而想这个项目，五子棋双人对战，是需要服务器主动给客户端发消息这种场景的，就可以使用WebSocket来实现“消息推送机制”.

而 WebSocket 则是更接近于 TCP 这种级别的通信方式. 一旦连接建立完成, 客户端或者服务器都可以主动的向对方发送数据.

 使用

 Spring 内置了 Websocket，可以直接使用；

比如：Test 类继承 TextWebsocketHandler，在实现四个方法，还需要把该配置告诉Spring，这是WebSocket配置。

@Component
public class TestSocket extends TextWebSocketHandler {@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("连接成功");}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("收到消息: "+message.getPayload());}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {System.out.println("连接异常");}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("连接关闭");}
}
@Configuration
@EnableWebSocket //告诉Spring,这是WebSocket配置
public class WebSocketConfig implements WebSocketConfigurer {@Autowiredprivate TestSocket testSocket;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {//当前前断页面访问这个url，就会执行 TestSocket这个类registry.addHandler(testSocket, "/test");}
}

 效果：

WebSocket实现消息推送最重要的就是掌握四个关键节点，也就是四个核心时机;

建立连接之后、收到消息之后、出现连接异常、出现连接关闭.

项目创建 

在创建项目Spring Boot项目时时引入Spring Web、MyBatis、MySQL、WebSocket、以及Lombok相关依赖.

数据库设计  

数据库就基于项目功能进行简单设计，需要用到id（自增主键）、用户名、用户密码、天梯分、总场数、获胜场数；也就是一个简单的实体表； 

create table user
(id          int primary key auto_increment,user_name   varchar(20) unique,password    varchar(128),score       int, -- 积分total_count int, -- 总场数win_count   int -- 胜利场数
) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

用户模块 

 该模块用实现用户注册和登录功能，以及管理用户的天梯分数、总场数、获胜场数；使用 MySQL 数据库存储数据，服务器端基于 Spring + MyBatis 来实现数据库的增删改查.

登录接口

[请求]
/user/login?userName=?&&password=?[响应]
{"id": 6,"userName": "gaodong","password": "d6ea380dee1f46758bf13b90a9aeb011bb0d40e9d84f042182e6a60cda9a0d27","score": 100,"totalCount": 0,"winCount": 0
}

 注册接口

[请求]
/user/register?userName=?&&password=?[响应]
{"id": 0,"userName": "cboh","password": "b6e029af45e949ad9a221a111c237e6290c0c4620c2fa242fe3daa401092c8c0","score": 0,"totalCount": 0,"winCount": 0
}

 这里密码进行了加密处理，采用的是摘要算法：MD5算法。（密码加随机盐生成一个MD5）

获取用户信息接口

用来实现登录成功后显示用户分数的信息.

[请求]
/user/getUserInfo[响应]
{"id": 6,"userName": "gaodong","password": "d6ea380dee1f46758bf13b90a9aeb011bb0d40e9d84f042182e6a60cda9a0d27","score": 100,"totalCount": 4,"winCount": 2
}

 后端代码实现：

    @Autowiredprivate UserService userService;/*** 登录* @param userName* @param password* @return*/@ResponseBody@RequestMapping(  "/login")public Object login(String userName, String password, HttpServletRequest request) {UserInfo user = userService.selectByName(userName);if (user == null || !SecurityUtils.verifyUser(password,user.getPassword())) {return new UserInfo();}//存sessionHttpSession session = request.getSession(true); //没有会话就创建一个会话session.setAttribute("user",user);log.info("密码正确");return user;}/*** 注册* @param userName* @param password* @return*/@ResponseBody@RequestMapping("/register")public UserInfo register(String userName,String password) {UserInfo user = userService.insertUser(userName, password);return user;}/*** 获取用户信息  用来实现登录成功后显示用户分数的信息.*/@RequestMapping("/getUserInfo")public Object getUserInfo(HttpServletRequest request) {try {HttpSession httpSession = request.getSession(false);UserInfo user = (UserInfo) httpSession.getAttribute("user");// 拿着这个 user 对象, 去数据库中找, 找到最新的数据UserInfo newUser = userService.selectByName(user.getUserName());return newUser;} catch (NullPointerException e) {return new UserInfo();}}

匹配模块

用户登录成功, 则进入游戏大厅页面.

游戏大厅中, 能够显示用户的名字, 天梯分数, 比赛场数和获胜场数.

同时显示一个 "匹配按钮".

点击匹配按钮则用户进入匹配队列, 并且界面上显示为 "取消匹配" .

再次点击则把用户从匹配队列中删除.

如果匹配成功, 则跳转进入到游戏房间页面.

页面加载时和服务器建立 websocket 连接. 双方通过 websocket 来传输 "开始匹配", "取消匹配", "匹配成功" 这样的信息.

websocket交互接口

[连接]
ws://127.0.0.1:8080/findMatch[请求]
{message: 'startMatch' / 'stopMatch',
}[响应1] //收到请求后响应
{ok: true,                // 是否成功. 比如用户 id 不存在, 则返回 falsereason: '',                // 错误原因message: 'startMatch' / 'stopMatch'
}[响应2] //匹配成功后的响应
{ok: true,                // 是否成功. 成功true, 否则 falsereason: '',                // 错误原因message: 'matchSuccess',    
}
  • 页面这端拿到匹配响应之后, 就跳转到游戏房间.
  • 如果返回的响应 ok 为 false, 则弹框的方式显示错误原因, 并跳转到登录页面.

创建并配置 websocket 请求的入口类

该类继承自  TextWebsocketHandler，作为处理 websocket 请求的入口类；

ObjectMapper, 后续用来处理 JSON 数据（字符串和对象之间的转换）

@Component
public class MatchAPI extends TextWebSocketHandler {private ObjectMapper objectMapper = new ObjectMapper();@Componentpublic class MatchAPI extends TextWebSocketHandler {}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {}
}

配置： 

在 addHandler 之后,在加上 new HttpSessionHandshakeIntercept0r(), 这样可以把之前登       录过程中往 HttpSession 中存放的session, 放到 WebSocket 的 session 中. 方便后面的代码中获取到当前用户信息.

创建匹配请求/响应对象

@Data
public class MatchRequest {/*** 表示一个websocket匹配请求*/private String message = "";
}
@Data
public class MatchResponse {/*** 表示一个websocket匹配响应*/private boolean ok = true;private String reason;  //错误信息private String message; // 发送的消息
}

创建用户管理器 

 用于管理当前用户的在线状态. 本质上是 哈希表 的结构. key 为用户 id, value 为用户的 WebSocketSession.借助这个类, 一方面可以判定用户是否是在线, 同时也可以进行方便的获取到 Session 从而给客户端回话.

  • 当玩家建立好 websocket 连接, 则将键值对加入 OnlineUserManager 中.
  • 当玩家断开 websocket 连接, 则将键值对从 OnlineUserManager 中删除.
  • 在玩家连接好的过程中, 随时可以通过 userId 来查询到对应的会话, 以便向客户端返回数据.

由于存在两个页面, 游戏大厅和游戏房间, 使用两个 哈希表 来分别存储两部分的会话.

@Component
public class OnlineUserManager {/*** 使用一个哈希表，来保存当前用户的在线状态:*    key -> id    value -> websocket会话*/// 多个用户和服务器建立连接或者断开连接,此时服务器并发执行对HashMap进行修改//会产生线程安全问题 改用ConcurrentHashMapConcurrentHashMap<Integer, WebSocketSession> gameHall = new ConcurrentHashMap<>();//表示在用户在游戏放假的在线状态ConcurrentHashMap<Integer, WebSocketSession> gameRoom = new ConcurrentHashMap<>();//上线public void enterGameHall(Integer id,WebSocketSession webSocketSession) {gameHall.put(id,webSocketSession);}//退出public void exitGameHall(Integer id) {gameHall.remove(id);}//查找public WebSocketSession getFromGameHall(Integer id) {return gameHall.get(id);}public void enterGameRoom(Integer id,WebSocketSession webSocketSession) {gameRoom.put(id,webSocketSession);}public void exitGameRoom(Integer id) {gameRoom.remove(id);}public WebSocketSession getSessionFromGameRoom(Integer id) {return gameRoom.get(id);}
}

 处理websocket连接成功

 实现 afterConnectionEstablished 方法.

  • 通过参数中的 session 对象, 拿到之前登录时设置的 用户 信息.
  • 使用 onlineUserManager 来管理用户的在线状态.
  • 禁止多开，采用账号登录成功之后，禁止在其它地方在登陆的方式；先判定用户是否是已经在线, 如果在线则直接返回出错 .
  • 设置玩家为上线状态.
    @Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {//玩家上线,添加到 onlineUserManager中try{// 1.先获取到当前的用户信息(谁在游戏大厅中,建立连接)UserInfo userInfo =  (UserInfo) session.getAttributes().get("user");// 当用户登录成功之后,禁止多开; 采用的是禁止在其它地方登录的方式（根源解决问题）if (onlineUserManager.getFromGameHall(userInfo.getId()) != null|| onlineUserManager.getSessionFromGameRoom(userInfo.getId()) != null) {//此时，用户已经登录了MatchResponse matchResponse = new MatchResponse();matchResponse.setOk(true);matchResponse.setReason("禁止多开！！");matchResponse.setMessage("repeatConnection");session.sendMessage(new TextMessage(objectMapper.writeValueAsString(matchResponse)));return;}//userInfo 可能为null,没有经过登录操作，直接通过url访问game_hall.html// 2. 拿到用户信息之后，设置成在线状态onlineUserManager.enterGameHall(userInfo.getId(),session);System.out.println("玩家进入游戏大厅userName: "+userInfo.getUserName());} catch (NullPointerException e) {System.out.println("[MatchAPI.afterConnectionEstablished] 当前用户未登录!");
//            e.printStackTrace(); //可控异常MatchResponse matchResponse = new MatchResponse();matchResponse.setOk(false);matchResponse.setReason("你尚未登录!不能进行匹配操作！！！");//先通过 ObjectMapper把MatchRequest转换成JSON字符串,在包装上一层TextMessagesession.sendMessage(new TextMessage(objectMapper.writeValueAsString(matchResponse)));}}

处理开始匹配/取消匹配请求

  • 先从会话中拿到当前玩家的信息.
  • 解析客户端发来的请求
  • 判定请求的类型, 如果是 startMatch, 则把用户对象加入到匹配队列. 如果是 stopMatch, 则把用户对象从匹配队列中删除.
  • 此处需要实现一个 匹配器 对象, 来处理匹配的实际逻辑.

匹配器对象：

1.匹配队列：这里采用的是搞三个队列， 根据玩家分数分为三个区间：

Normal：score < 500

High：score >= 500 && score < 1000

VeryHigh：score >= 1000

2.接下来还要在搞三个线程,针对三个队列进行扫描（判断队列是否 > 2），就可以把这一对玩家取出来，放到游戏房间里。

3.采用多线程编程要多考虑，线程安全安全问题（websocket本身就属于一个线程了，有写了一组线程，所以会出现线程安全问题），多个线程访问不同的队列不会出现线程安全问题，必须是多个线程操作同一个队列，才需要进行加锁。所以，使用synchronized选取加锁对象时，就可以选取这三个队列对象本身。

4.避免出现忙等问题。引入wait()和notify(), 线程如入口使用 wait 来等待, 直到队列中达到 2 个元素及其以上, 才唤醒线程消费队列.

 @Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {UserInfo userInfo = (UserInfo) session.getAttributes().get("user");//获取到客户端发送的数据内容String payload = message.getPayload();//当前这个数据载荷是一个JSON字符串,就需要转换成Java对象,MatchRequest 对象MatchRequest matchRequest = objectMapper.readValue(payload, MatchRequest.class);MatchResponse response = new MatchResponse();if (matchRequest.getMessage().equals("startMatch")) {//进入匹配队列//先创建一个匹配队列,把当前用户加进去matcher.add(userInfo);//就可以个客户端一个响应response.setOk(true);response.setMessage("startMatch");} else if(matchRequest.getMessage().equals("stopMatch")) {//退出匹配对队列// 把用户从匹配队列中移出matcher.remove(userInfo);// 返回个客户端一个响应response.setOk(true);response.setMessage("stopMatch");} else {//非法请求response.setOk(false);response.setReason("非法的匹配请求");}String jsonStr = objectMapper.writeValueAsString(response);session.sendMessage(new TextMessage(jsonStr));}

   //主要的处理逻辑private void handleMatch(Queue<UserInfo> matchQueue) {synchronized (matchQueue) {try {//队列初始情况,可能为null，往队列里添加一个元素是不能往下执行的// 所以此处，使用whilewhile (matchQueue.size() < 2) {matchQueue.wait();}// 1.从队列中取出两个玩家UserInfo player1 = matchQueue.poll();UserInfo player2 = matchQueue.poll();log.info("匹配到了两个玩家： " + player1.getUserName() + " ," + player2.getUserName());// 2.拿到玩家的websocket会话 目的就是为了告诉玩家,匹配到对手了WebSocketSession session1 = onlineUserManager.getFromGameHall(player1.getId());WebSocketSession session2 = onlineUserManager.getFromGameHall(player2.getId());//理论上,匹配队列中的玩家一定是在线状态, 前面逻辑以及处理过// 最后还是在进行判定,尽量避免出现bugif (session1 == null) {//玩家1,下线需要把玩家二重新放到匹配队列中matchQueue.offer(player2);return;}if (session2 == null) {matchQueue.offer(player1);return;}//这种情况理论上也不存在 1.前面的逻辑已经避免多开 2.玩家下线，就会移出匹配队列if (session1 == session2) {matchQueue.offer(player1);return;}// 3.匹配成功,把两个玩家放到游戏房间Room room = new Room();roomManager.addRoom(room,player1.getId(), player2.getId());// 4.给玩家反馈信息,告诉玩家你匹配成功了// 通过websocket 返回一个Message (JSON字符串) 为 "matchSuccess"的响应MatchResponse response1 = new MatchResponse();response1.setMessage("matchSuccess");String json1 = objectMapper.writeValueAsString(response1);session1.sendMessage(new TextMessage(json1));MatchResponse response2 = new MatchResponse();response2.setMessage("matchSuccess");String json2 = objectMapper.writeValueAsString(response2);session2.sendMessage(new TextMessage(json2));} catch (IOException | InterruptedException e) {e.printStackTrace();}}}

处理连接关闭和连接异常

  • 主要的工作就是把玩家从 onlineUserManager 中退出.
  • 退出的时候要注意判定, 当前玩家是否是多开的情况(一个userId, 对应到两个 websocket 连接). 如果一个玩家开启了第二个 websocket 连接, 那么这第二个 websocket 连接不会影响到玩家从 OnlineUserManager 中退出.
  • 如果玩家当前在匹配队列中, 则直接从匹配队列里移除.

对战模块 

玩家匹配成功, 则进入游戏房间页面.

每两个玩家在同一个游戏房间中.

在游戏房间页面中, 能够显示五子棋棋盘. 玩家点击棋盘上的位置实现落子功能.

并且五子连珠则触发胜负判定, 显示 "你赢了" "你输了".

页面加载时和服务器建立 websocket 连接. 双方通过 websocket 来传输 "准备就绪", "落子位置", "胜负" 这样的信息.

  • 准备就绪: 两个玩家均连上游戏房间的 websocket 时, 则认为双方准备就绪.
  • 落子位置: 有一方玩家落子时, 会通过 websocket 给服务器发送落子的用户信息和落子位置, 同时服务器再将这样的信息返回给房间内的双方客户端. 然后客户端根据服务器的响应来绘制棋子位置.
  • 胜负: 服务器判定这一局游戏的胜负关系. 如果某一方玩家落子, 产生了五子连珠, 则判定胜负并返回胜负信息. 或者如果某一方玩家掉线(比如关闭页面), 也会判定对方获胜

websocket交互接口

[连接]ws://127.0.0.1:8080/game
[连接响应]当两个玩家都连接好了, 则给双方都返回一个数据表示就绪{message: 'gameReady',    // 游戏就绪ok: true,                // 是否成功. reason: '',                // 错误原因roomId: 'abcdef',        // 房间号. 用来辅助调试. thisUserId: 1,            // 玩家自己的 idthatUserId: 2,            // 对手的 idwhiteUser: 1,            // 先手方的 id
}
[落子请求]{message: 'putChess',userId: 1,row: 0,col: 0
}
[落子响应]{message: 'putChess',userId: 1,    row: 0,col: 0, winner: 0
}

创建并配置 websocket 请求的入口类

 跟匹配模块的操作一样，这里就不在进行过多阐述！！

创建Room对象（游戏房间） 

public class Room {/*** 这个类表示游戏房间*///用String,方便保证房间号唯一private String roomId;//玩家一private UserInfo userInfo1;//玩家二private UserInfo userInfo2;// 先手方的idprivate Integer whiteUser;public Room() {// 生成随机盐,保证房间号唯一roomId = UUID.randomUUID().toString();//Room对象不能唯一,不能使用注解交给Spring管理//所以通过入口类中记录的context来手动获取到前面的RoomManager和 OnlineUserManageronlineUserManager = JavaGobangApplication.context.getBean(OnlineUserManager.class);roomManager = JavaGobangApplication.context.getBean(RoomManager.class);userInfoMapper = JavaGobangApplication.context.getBean(UserInfoMapper.class);}
}

创建落子请求/响应对象

@Data
//客户端连接到游戏房间后,服务器返回的响应
public class GameReadyResponse {private String message;private boolean ok;private String reason;private String roomId;//当前用户idprivate Integer thisUserId;//对手idprivate Integer thatUserId;// 先手方的idprivate Integer whiteUser;
}
@Data
//落子响应类
public class GameResponse {private String message;private Integer userId;private int row;private int col;// 判断谁获胜private Integer winner;
}
@Data
//表示落子请求类
public class GameRequest {private  String message;private Integer userId;private int row;private int col;
}

 处理连接成功

  • 首先需要检测用户的登录状态. 从 Session 中拿到当前用户信息.
  • 然后要判定当前玩家是否是在房间中.
  • 接下来进行多开判定.如果玩家已经在游戏中, 则不能再次连接.
  • 把两个玩家放到对应的房间对象中. 当两个玩家都建立了连接, 房间就放满了.这个时候通知两个玩家双方都准备就绪.
  • 如果有第三个玩家尝试也想加入房间, 则给出一个提示, 房间已经满了.
  public void afterConnectionEstablished(WebSocketSession session) throws Exception {GameReadyResponse response = new GameReadyResponse();//1.先获取用户信息UserInfo userInfo = (UserInfo) session.getAttributes().get("user");if (userInfo == null) {response.setOk(false);response.setReason("用户未登录!");session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));return;}//2.通过用户id，查询是否已经进入游戏房间Room room = roomManager.getRoomByUserId(userInfo.getId());if (room == null) {//没有找到房间,表示玩家还在匹配中response.setOk(false);response.setReason("尚未匹配到棋友!");session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));return;}// 3.判定当前用户是不是多开if (onlineUserManager.getFromGameHall(userInfo.getId()) != null|| onlineUserManager.getSessionFromGameRoom(userInfo.getId()) != null) {// 一个账号，一边在游戏大厅，一边在游戏房间,也认为是多开response.setOk(true);response.setReason("禁止多开游戏页面!");response.setMessage("repeatConnection");session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));return;}// 4.把玩家设置成上线onlineUserManager.enterGameRoom(userInfo.getId(), session);// 5.把两个玩家加入到游戏房间中//    前面的创建房间/匹配过程, 是在 game_hall.html 页面中完成的.//    因此前面匹配到对手之后, 需要经过页面跳转, 来到 game_room.html 才算正式进入游戏房间(才算玩家准备就绪)//    当前这个逻辑是在 game_room.html 页面加载的时候进行的.//    执行到当前逻辑, 说明玩家已经页面跳转成功了!!synchronized (room) {if (room.getUserInfo1() == null) {//第一个玩家加入房间room.setUserInfo1(userInfo);//先进的设置为先手room.setWhiteUser(userInfo.getId());log.info("玩家 " + userInfo.getUserName() + " 已经准备就绪! 作为玩家1");return;}if (room.getUserInfo2() == null) {//第二个玩家进入房间room.setUserInfo2(userInfo);room.setWhiteUser(userInfo.getId());log.info("玩家 " + userInfo.getUserName() + " 已经准备就绪! 作为玩家2");//当两个玩家都准备好了,服务器就需要个两个客户端发送响应//玩家1noticeGameReady(room,room.getUserInfo1(),room.getUserInfo2());//玩家2noticeGameReady(room,room.getUserInfo2(),room.getUserInfo1());return;}}// 6. 此处如果又有玩家尝试连接同一个房间, 就提示报错.//    这种情况理论上是不存在的, 还是做一个判定和提示.response.setOk(false);response.setReason("当时房间已经满了，加入房间失败");session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));

处理连接异常和连接关闭  

关闭和异常情况的处理一样！ 

    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {UserInfo userInfo = (UserInfo) session.getAttributes().get("user");if (userInfo == null) {return;}WebSocketSession existSession = onlineUserManager.getSessionFromGameRoom(userInfo.getId());if (existSession == session) {onlineUserManager.exitGameRoom(userInfo.getId());}log.info("用户退出! userId=" + userInfo.getId());//通知对手获胜 noticeThatUserWin(userInfo);}

 处理落子请求

  •  先获取到用户信息
  • 根据玩家 id 获取到房间对象
  • 通过 room 对象来处理这次具体的请求 
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {// 1.先获取到用户信息UserInfo userInfo  = (UserInfo)session.getAttributes().get("user");if (userInfo == null) {log.info("GameAPI[handleTextMessage]: 玩家未登录!");return;}// 2. 根据玩家 id 获取到房间对象Room room = roomManager.getRoomByUserId(userInfo.getId());if (room == null) {return;}// 3. 通过 room 对象来处理这次具体的请求room.putChess(message.getPayload());}

实现对弈功能

实现 room 中的 putChess 方法.

  • 先把请求解析成请求对象.
  • 根据请求对象中的信息, 往棋盘上落子.（判定当前子的位置是用户1的还是用户2的）
  • 落子完毕之后, 为了方便调试, 可以打印出棋盘的当前状况.
  • 判定胜负操作.（约定如果玩家1获胜，返回玩家1的用户id，玩家二获胜就返回玩家二的用户id；胜负未分就返回0）
  • 构造落子响应, 写回给每个玩家.
  • 写回的时候如果发现某个玩家掉线, 则判定另一方为获胜.
  • 如果游戏胜负已分, 则修改玩家的分数, 并销毁房间.

 主要的判定输赢逻辑

输赢逻辑判定操作写在服务器进行. 赢分为如下3中情况：

  1. 行
  2. 列
  3. 对角线（左和右） 

 情况一：

情况二：

情况三： 

项目验证

登录成功界面： 

 

 匹配界面：

判定胜负界面：

 分数更新成功

 

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

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

相关文章

cartographer代码学习-概率栅格地图（ActiveSubmaps2D与Submaps2D）

cartographer代码学习-概率栅格地图（ActiveSubmaps2D与Submaps2D）

概率栅格地图是二维激光SLAM的特点&#xff0c;能够将环境通过地图的形式表达出来。 ActiveSubmaps2D作为概率栅格地图中的重要成分&#xff0c;这个对象主要在LocalTrajectoryBuilder2D这里被使用 第一次调用&#xff1a; active_submaps_(options.submaps_options())传入一…
阅读更多...
P1598 垂直柱状图

P1598 垂直柱状图

链接 ​​​​​​题目链接&#xff1a;P1598 垂直柱状图 题目 题目描述 写一个程序从输入文件中去读取四行大写字母&#xff08;全都是大写的&#xff0c;每行不超过 $100$ 个字符&#xff09;&#xff0c;然后用柱状图输出每个字符在输入文件中出现的次数。严格地按照输出…
阅读更多...
为什么要学习SpringBoot呢？

为什么要学习SpringBoot呢？

学习SpringBoot的原因众多&#xff0c;以下是其中的一些主要理由&#xff1a; 简化Spring应用开发&#xff1a;SpringBoot极大地简化了Spring应用的开发过程。它提供了许多默认的配置&#xff0c;使开发者能够更快速地构建和运行Spring应用&#xff0c;而无需花费大量时间在繁…
阅读更多...
【Bing】开启代理后使用 Bing 搜索引擎总是: 没有与此相关的结果

【Bing】开启代理后使用 Bing 搜索引擎总是: 没有与此相关的结果

【Bing】开启代理后使用 Bing 搜索引擎总是: 没有与此相关的结果 1 问题描述2 解决方法2.1 修改代理规则2.1.1 Clash Verge2.1.2 Clash Verge Rev2.1.3 V2RayN 1 问题描述 当我开了代理访问 Bing 时&#xff0c;经常会出现下面的页面: 2 解决方法 我所知的有三种方法: 手动关…
阅读更多...
关于JVM-三色标记算法剖析

关于JVM-三色标记算法剖析

相关系列 深入理解JVM垃圾收集器-CSDN博客 深入理解JVM垃圾收集算法-CSDN博客 深入理解jvm执行引擎-CSDN博客 jvm优化原则-CSDN博客 jvm流程图-CSDN博客 三色标记产生的原因&#xff1f; 在并发标记的过程中&#xff0c;因为标记期间应用线程还在继续跑&#xff0c;对象间的引…
阅读更多...
使用Matplotlib绘制打断图Broken Axis

使用Matplotlib绘制打断图Broken Axis

使用Matplotlib绘制打断坐标轴Broken Axis 对于一批存在离群点的或者两极分化的数据&#xff0c;为了突出其值域差异&#xff0c;时常需要用到打断坐标轴效果。 使用Matplotlib绘制的效果如下&#xff1a; 对于同样的数据&#xff0c;使用brokenaxes库的绘制效果如下&#x…
阅读更多...
Ubuntu20.04安装和编译运行lidar_align来联合标定lidar与imu的外参

Ubuntu20.04安装和编译运行lidar_align来联合标定lidar与imu的外参

硬件&#xff1a;树霉派4b 1、下载并安装lidar_align mkdir -p lidar_align/src cd lidar_align/src git clone https://github.com/ethz-asl/lidar_align.git 将 lidar_align/src/lidar_align/NLOPTConfig.cmake 文件移动到 lidar_align/src/ 下(与lidar_align同级) NLOP…
阅读更多...
ShardingSphere-ShardingSphere读写分离和数据脱敏

ShardingSphere-ShardingSphere读写分离和数据脱敏

文章目录 一、读写分离1.1 读写分离1.2 读写分离应用方案1.3 分表+读写分离1.4 分库分表+读写分离二、ShardingSphere-JDBC读写分离2.1 创建SpringBoot并添加依赖2.2 创建实体类2.3 创建mapper2.4 配置读写分离2.5 测试测试插入数据测试读测试事务一致性测试负载均衡一、读写分…
阅读更多...
免费泛域名SSL证书申请

免费泛域名SSL证书申请

二级域名使用较多时&#xff0c;一个个申请证书有点麻烦。泛域名证书一次性解决。 申请SSL免费证书 生成SSL最佳配置 https://ssl-config.mozilla.org/ Install curl https://get.acme.sh | sh -s emailzengsmosong.cc alias acme.sh~/.acme.sh/acme.sh# 证书机构二选一&am…
阅读更多...
C语言每日一题（66）三数之和

C语言每日一题（66）三数之和

题目链接 力扣15.三数之和 题目描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答…
阅读更多...
KMP算法的实现示例（伪代码）

KMP算法的实现示例（伪代码）

KMP算法&#xff0c;即Knuth-Morris-Pratt算法&#xff0c;是一个线性时间复杂度的字符串匹配算法。它能在O(nm)的时间复杂度内完成一个长度为n的文本串S和一个长度为m的模式串T的匹配工作&#xff0c;其中n和m分别代表文本串和模式串的长度。相比于朴素字符串匹配算法&#xf…
阅读更多...
vue3+echarts：echarts地图打点显示的样式

vue3+echarts：echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…
阅读更多...
【H3C】开启web管理页面H3C S5120V2 Series

【H3C】开启web管理页面H3C S5120V2 Series

配置步骤 1.创建对应vlan并放行通过 2.添加vlanfi的ip地址 3.开启http和https的服务 4.创建用户&#xff0c;配置密码&#xff0c;配置服务类型&#xff0c;赋予权限 假设终端连接在交换机的g1/0/1口 假设终端的ip地址为(Ubuntu)&#xff1a;192.168.200.11 /24 假设交换机vlan…
阅读更多...
video替换webRtc视频流

video替换webRtc视频流

经过测试&#xff0c;本地mp4可播放的视频可替换成功&#xff1b;在线的视频会报错跨域&#xff1b;https安全要求; 核心api video.captureStream()html <video id"yyhTestVideo" src"./tmp.mp4" width"1280" height"720" autopl…
阅读更多...
【Java 刷题记录】双指针

【Java 刷题记录】双指针

双指针 1. 移动零 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: n…
阅读更多...
关于Ansible模块 ④

关于Ansible模块 ④

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 继《关于Ansible的模块 ①》、《关于Ansible的模块 ②》与《关于Ansible的模块 ③》之后&#xff0c;继续学习ansible常用模块之…
阅读更多...
P3654 First Step (ファーストステップ) Python深搜

P3654 First Step (ファーストステップ) Python深搜

First Step (ファーストステップ) 题目背景 知らないことばかりなにもかもが&#xff08;どうしたらいいの&#xff1f;&#xff09; 一切的一切 尽是充满了未知数&#xff08;该如何是好&#xff09; それでも期待で足が軽いよ&#xff08;ジャンプだ&#xff01;&#xff09…
阅读更多...
已解决：windows 下无法加载文件 xxx.ps1，因为在此系统上禁止运行脚本

已解决：windows 下无法加载文件 xxx.ps1，因为在此系统上禁止运行脚本

目录 1&#xff0c;问题描述2&#xff0c;问题解决 1&#xff0c;问题描述 当通过 npm 全局安装依赖后&#xff08;比如 ts 对应的 tsc 命令&#xff0c;还有 pnpm&#xff09;&#xff0c;想直接使用安装的命令&#xff0c;就会报错&#xff1a; 2&#xff0c;问题解决 以管…
阅读更多...
12+炫酷地图可视化效果，这次还真的有源码。

12+炫酷地图可视化效果，这次还真的有源码。

2023-09-17 22:35贝格前端工场 Hi&#xff0c;大家好&#xff0c;我是贝格前端工场&#xff0c;之前分享过各类UI图、动图、3D图、流程图&#xff0c;好多粉丝朋友给我要源文件&#xff0c;因为种种原因&#xff0c;无法提供。 本次分享12个炫酷的地图可视化效果&#xff0c;…
阅读更多...
实现几何对象按照一定距离向外缓冲

实现几何对象按照一定距离向外缓冲

1、首先&#xff0c;确保你已经引入了Turf.js库。你可以通过在HTML文件中添加以下代码来引入 <script src"https://cdn.jsdelivr.net/npm/turf/turf6.5.0/turf.min.js"></script>2、使用turf.buffer实现几何对象按照设定距离扩充 let originalCoordinat…
阅读更多...
最新文章

Copyright @ 2022~2023