• 基于 SpringBoot + MyBatis 的网页版五子棋对战

    目录

    一、项目所要实现的功能模块

    1、用户模块

    2、匹配模块

    3、对战模块

    二、使用技术

    三、项目截图

    1、登录页面

    2、注册页面

    3、游戏大厅页面

    4、游戏房间页面

    四、创建 SpringBoot 项目

    1、在 IDEA 中创建一个 SpringBoot 项目

    2、设置项目名称

    3、选择项目依赖

    4、选择项目存放路径，就可以创建出一个 SpringBoot 项目

    五、配置文件

    六、数据库设计

    七、工具包

    1、ResponseBodyMessage 类

    2、Constant 类

    3、密码加密

    （1）在 pom.xml 文件中添加依赖

    （2）在springboot启动类添加注解

    （3）在 config 包中创建 AppConfig 类

    八、配置拦截器

    1、创建 config 包，在 config 包中创建 LoginInterceptor 类

    2、在 AppConfig 类中添加下面的代码

    九、实现登录注册模块

    1、登录功能的请求和响应设计

    2、注册功能的请求和响应

    3、创建 User 类

    4、创建对应的 Mapper 和 API

    （1）创建接口 UserMapper

    （2）创建 UserMapper.xml

    5、在 com.example.online_gobang.api 包中创建 UerAPI 类

    6、注册登录功能测试

    （1）注册功能

    （2）登录功能

    7、前端代码

    （1）注册功能

    （2）登录功能

    十、实现匹配模块

    1、匹配功能的请求和响应设计

    （1）匹配请求

    （2）匹配响应 1

    （3）匹配响应 2

    2、获取用户信息的请求和响应设计

    3、在 UserAPI 类中添加 getUserInfo 方法

    4、用户的在线状态

    5、创建游戏房间

    6、创建房间管理器

    7、创建匹配队列

    8、websocket 的匹配请求

    9、websocket 的匹配响应

    10、处理匹配功能的 websocket 请求

    11、触发 websocket 约定好的请求与响应路径

    12、前端代码

    十一、实现对战模块

    1、对战功能的请求和响应设计

    （1）建立连接请求

    （2）建立连接响应

    （3）玩家落子请求

    （4）玩家落子响应

    2、触发 websocket 约定好的请求与响应路径

    3、建立连接的响应

    4、websocket 的落子请求

    5、websocket 的落子响应

    6、玩家在游戏房间的在线状态

    7、更新玩家的比赛场次、获胜场次、天梯积分

    （1）在 UserMapper 接口中添加代码

    （2）在 UserMapper.xml 中添加代码

    8、在 Room 类中实现棋局判定胜负的逻辑

    （1）修改启动类

    （2）获取 RoomManager 与 OnlineUserManager

    （3）在 Room 类中创建一个二维数组用来表示棋盘

    （4）Room 类的完整代码

    9、处理对战功能的 websocket 请求

    10、前端代码

    （1）使用 canvas 绘制棋盘（game_room.html）

    （2）绘制棋盘的 JavaScript 文件(script.js)

    一、项目所要实现的功能模块

    1、用户模块

    • 用户的注册和登录。
    • 管理用户的天梯积分、比赛场数、获胜场数等信息。

    2、匹配模块

    • 游戏大厅页面
    • 依据用户的天梯积分，实现匹配机制。

    3、对战模块

    • 游戏房间页面
    • 把两个匹配到的玩家放到一个游戏房间中，双方进行对战比赛。

    二、使用技术

    • 前端：HTML、CSS、JavaScript、jQuery、Ajax
    • 后端：Java、SpringBoot、WebSocket
    • 数据库：MySQL、MyBatis

    三、项目截图

    1、登录页面

    2、注册页面

    3、游戏大厅页面

    4、游戏房间页面

    四、创建 SpringBoot 项目

    1、在 IDEA 中创建一个 SpringBoot 项目

    2、设置项目名称

    3、选择项目依赖

    4、选择项目存放路径，就可以创建出一个 SpringBoot 项目

    五、配置文件

    • 在 application.properties 配置如下信息
    1. #配置数据库
    2. spring.datasource.url=jdbc:mysql://127.0.0.1:3306/online_gobang?characterEncoding=utf8&serverTimezone=UTC
    3. spring.datasource.username=数据库用户名
    4. spring.datasource.password=数据库密码
    5. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    6.  
    7. mybatis.mapper-locations=classpath:mybatis/**Mapper.xml

    六、数据库设计

    1. create database if not exists online_gobang;
    2.  
    3. use online_gobang;
    4.  
    5. -- 用户表
    6. drop table if exists user;
    7. create table user(
    8.     userId int primary key auto_increment comment '用户id',
    9.     username varchar(50) unique comment '用户名',
    10.     password varchar(255) not null comment '用户密码',
    11.     score int comment '天梯积分',
    12.     totalCount int comment '比赛总场数',
    13.     winCount int comment '获胜场数'
    14. );

    七、工具包

    • 在 package com.example.online_gobang 目录下创建一个 tools 包，在这个包中存放整个项目要使用的工具类。

    1、ResponseBodyMessage 类

    • 设计统一的响应体工具类，因为做任何操作时都需要响应，所以封装一个通用的响应工具类，这个工具类设计成一个泛型类。
    1. package com.example.online_gobang.tools;
    2.  
    3. import lombok.Data;
    4.  
    5. @Data
    6. public class ResponseBodyMessage {
    7.     private int status; // 状态码
    8.     private String message; // 返回的信息（出错原因等）
    9.     private T data; // 返回给前端的数据（因为返回的数据类型不确定，可能是 String，boolea，int ...,因此使用泛型）
    10.  
    11.     public ResponseBodyMessage(int status, String message, T data) {
    12.         this.status = status;
    13.         this.message = message;
    14.         this.data = data;
    15.     }
    16. }

    2、Constant 类

    • 这个类用来存储不变的常量。 例如：设置 session 对象中的 key 值，key 是一个不变的字符串。
    • 如果在其他地方获取对应的 session 就可以通过这个类中的字符串进行获取。
    1. package com.example.online_gobang.tools;
    2.  
    3. public class Constant {
    4.     public static final String USER_SESSION_KEY = "user"; // 设置 session 中的 key 值
    5. }

    3、密码加密

    使用 Bcrypt 对用户密码进行加密

    • Bcrypt 是一款加密工具，可以比较方便地实现数据的加密工作。也可以简单理解为它内部自己实现了随机加盐处理 。
    • 使用MD5加密，每次加密后的密文其实都是一样的，这样就方便了MD5通过大数据的方式进行破解。
    • Bcrypt生成的密文是60位的，而MD5的是32位的，因此 Bcrypt 破解难度更大。

    （1）在 pom.xml 文件中添加依赖

    • 添加到 标签内
    2. <dependency>
    3. 	<groupId>org.springframework.securitygroupId>
    4. 	<artifactId>spring-security-webartifactId>
    5. dependency>
    6. <dependency>
    7. 	<groupId>org.springframework.securitygroupId>
    8. 	<artifactId>spring-security-configartifactId>
    9. dependency>

    （2）在springboot启动类添加注解

    1. @SpringBootApplication(exclude =
    2. 		{org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class})

    （3）在 config 包中创建 AppConfig 类

    1. package com.example.online_gobang.config;
    2.  
    3. import org.springframework.context.annotation.Bean;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    6. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    7. import org.springframework.web.socket.config.annotation.EnableWebSocket;
    8. import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
    9.  
    10. /**
    11.  * Created with IntelliJ IDEA.
    12.  * Description:
    13.  * User: 74646
    14.  * Date: 2022-11-14
    15.  * Time: 16:35
    16.  */
    17. @Configuration
    18. @EnableWebSocket
    19. public class AppConfig implements WebSocketConfigurer,WebMvcConfigurer {
    20.     @Bean
    21.     public BCryptPasswordEncoder getBCryptPasswordEncoder(){
    22.         return  new BCryptPasswordEncoder();
    23.     }
    24. }

    八、配置拦截器

    • 未登录的情况下拦截其他页面，登录成功后才可以访问其他界面

    1、创建 config 包，在 config 包中创建 LoginInterceptor 类

    1. package com.example.online_gobang.config;
    2.  
    3. import com.example.online_gobang.tools.Constant;
    4. import org.springframework.web.servlet.HandlerInterceptor;
    5. import javax.servlet.http.HttpServletRequest;
    6. import javax.servlet.http.HttpServletResponse;
    7. import javax.servlet.http.HttpSession;
    8.  
    9. public class LoginInterceptor implements HandlerInterceptor {
    10.     @Override
    11.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    12.             HttpSession session = request.getSession(false);
    13.             if(session == null || session.getAttribute(Constant.USER_SESSION_KEY)==null){
    14.                 return false;
    15.             }
    16.             return true;
    17.         }
    18. }

    2、在 AppConfig 类中添加下面的代码

    1. @Configuration
    2. @EnableWebSocket
    3. public class AppConfig implements WebSocketConfigurer,WebMvcConfigurer {
    4.     /**
    5.      * 添加拦截器
    6.      * @param registry
    7.      */
    8.     @Override
    9.     public void addInterceptors(InterceptorRegistry registry) {
    10.         // 登录之后才可以访问其他页面
    11.         LoginInterceptor loginInterceptor = new LoginInterceptor();
    12.         registry.addInterceptor(loginInterceptor).
    13.                 // 拦截所有的
    14.                  addPathPatterns("/**")
    15.                 //排除所有的JS
    16.                 .excludePathPatterns("/js/**.js")
    17.                 //排除images下所有的元素
    18.                 .excludePathPatterns("/images/**")
    19.                 .excludePathPatterns("/css/**.css")
    20.                 .excludePathPatterns("/fronts/**")
    21.                 .excludePathPatterns("/player/**")
    22.                 .excludePathPatterns("/login.html")
    23.                 .excludePathPatterns("/register.html")
    24.                 //排除登录和注册接口
    25.                 .excludePathPatterns("/login")
    26.                 .excludePathPatterns("/register")
    27.                 .excludePathPatterns("/logout");
    28.     }
    29. }

    九、实现登录注册模块

    1、登录功能的请求和响应设计

    1. 请求：
    2.     {
    3.       post, // 使用 post 请求
    4.       /login // 请求路径
    5.       data:{ username, password } // 传入的数据
    6.     }
    7.      
    8. 响应：
    9.     {
    10.        "status": 200,
    11.        "message": "登录成功",
    12.        "data": {
    13.                  "id": xxxxx,
    14.                  "username": xxxxxx,
    15.                  "score": 1000,
    16.                  "totalCount": 0,
    17.                  "winCount": 0
    18.        }
    19.      
    20.     }
    21.      
    22. 响应设计字段解释：
    23.     {
    24.       状态码为 200 表示成功，-200表示失败
    25.       状态描述信息，描述此次请求成功或者失败的原因
    26.       返回的数据，请求成功后，服务器返回给前端的数据
    27.     }

    2、注册功能的请求和响应

    1. 请求：
    2.     {
    3.       post, // 使用 post 请求
    4.       /register // 请求路径
    5.       data:{ username, password } // 传入的数据
    6.     }
    7.      
    8. 响应：
    9.     {
    10.        "status": 200,
    11.        "message": "注册成功",
    12.        "data": {
    13.                  "id": xxxxx,
    14.                  "username": xxxxxx,
    15.                  "score": 1000,
    16.                  "totalCount": 0,
    17.                  "winCount": 0
    18.        }
    19.      
    20.     }
    21.      
    22. 响应设计字段解释：
    23.     {
    24.       状态码为 200 表示成功，-200表示失败
    25.       状态描述信息，描述此次请求成功或者失败的原因
    26.       返回的数据，请求成功后，服务器返回给前端的数据
    27.     }

    3、创建 User 类

    • 在 com.example.online_gobang.model 包中创建 User 类

    1. package com.example.online_gobang.model;
    2.  
    3. import lombok.Data;
    4.  
    5. @Data
    6. public class User {
    7.     private int userId; // 用户id
    8.     private String username; // 用户名
    9.     private String password; // 密码
    10.     private int score; // 天梯积分
    11.     private int totalCount; // 比赛总场数
    12.     private int winCount; // 获胜场数
    13. }

    4、创建对应的 Mapper 和 API

    （1）创建接口 UserMapper，实现用户信息的插入与查询

    • 在 com.example.online_gobang.mapper 包中创建 UserMapper 接口
    1. package com.example.online_gobang.mapper;
    2.  
    3. import com.example.online_gobang.model.User;
    4. import org.apache.ibatis.annotations.Mapper;
    5.  
    6. @Mapper
    7. public interface UserMapper {
    8.     /**
    9.      *  数据库中插入用户信息，用于注册功能
    10.      * @param user
    11.      */
    12.     void insert(User user);
    13.  
    14.     /**
    15.      *  根据用户名，查询用户的详细信息，用户登录功能
    16.      * @param username
    17.      * @return
    18.      */
    19.     User selectByName(String username);
    20. }

    （2）创建 UserMapper.xml

    • 在 resource 目录下，创建 mybatis 文件夹，创建 UserMapper.xml，在 UserMapper.xml 文件中写SQL语句。
    1. "1.0" encoding="UTF-8"?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    3. <mapper namespace="com.example.online_gobang.mapper.UserMapper">
    4.     <insert id="insert">
    5.         insert into user values(null, #{username}, #{password}, 1000, 0, 0);
    6.     insert>
    7.  
    8.     <select id="selectByName" resultType="com.example.online_gobang.model.User">
    9.         select *
    10.         from user
    11.         where username = #{username};
    12.     select>
    13. mapper>

    5、在 com.example.online_gobang.api 包中创建 UerAPI 类

    • 在 UserAPI 类中实现用户注册、用户登录功能
    1. package com.example.online_gobang.api;
    2.  
    3. import com.example.online_gobang.mapper.UserMapper;
    4. import com.example.online_gobang.model.User;
    5. import com.example.online_gobang.tools.Constant;
    6. import com.example.online_gobang.tools.ResponseBodyMessage;
    7. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    8. import org.springframework.web.bind.annotation.*;
    9.  
    10. import javax.annotation.Resource;
    11. import javax.servlet.http.HttpServletRequest;
    12. import javax.servlet.http.HttpSession;
    13.  
    14. @RestController
    15. public class UserAPI {
    16.  
    17.     @Resource
    18.     private UserMapper userMapper;
    19.  
    20.     // 使用 BCrypt 对密码进行加密
    21.     @Resource
    22.     private BCryptPasswordEncoder bCryptPasswordEncoder;
    23.  
    24.     @PostMapping("/login")
    25.     @ResponseBody
    26.     public ResponseBodyMessage login(@RequestParam String username,@RequestParam String password,HttpServletRequest request){
    27.         /**
    28.          *  根据 username 到数据库中进行查询
    29.          *  如果能找到匹配的用户，并且密码也一致，就认为登录成功
    30.          */
    31.         User user = userMapper.selectByName(username);
    32.         System.out.println("登录的用户："+ username);
    33.         if(user != null){
    34.             System.out.println("登录成功");
    35.  
    36.             // 判断当前用户输入的密码(password) 与 数据库中查询到的密码(加密的密码，getPassword())是否匹配
    37.             boolean flag = bCryptPasswordEncoder.matches(password,user.getPassword());
    38.  
    39.             if(!flag){
    40.                 // 密码不匹配，登录失败
    41.                 return new ResponseBodyMessage<>(-200,"用户名或密码错误",user);
    42.             }
    43.             // 如果登录成功就将信息写入到 session 中（在 session 中存储了一个用户信息对象,此后可以随时从 session 中将这个对象取出来进行一些操作）
    44.             request.getSession().setAttribute(Constant.USER_SESSION_KEY,user);
    45.             // 状态码为200,表示登录成功,并返回用户信息
    46.             return   new ResponseBodyMessage<>(200,"登录成功",user);
    47.         }else {
    48.             // 登录失败,返回一个空的对象
    49.             System.out.println("登录失败");
    50.             return new ResponseBodyMessage<>(-200,"用户名或密码错误",user);
    51.         }
    52.     }
    53.  
    54.     @RequestMapping("/register")
    55.     @ResponseBody
    56.     public ResponseBodyMessage register(@RequestParam String username, @RequestParam String password){
    57.         User user1 = userMapper.selectByName(username);
    58.         if(user1 != null) {
    59.             return new ResponseBodyMessage<>(-200,"当前用户已经存在",false);
    60.         }else {
    61.             User user = new User();
    62.             String newPassword = bCryptPasswordEncoder.encode(password);
    63.             user.setUsername(username);
    64.             user.setPassword(newPassword);
    65.             boolean flag = userMapper.insert(user);
    66.             if(flag == true){
    67.                 return new ResponseBodyMessage<>(200,"注册成功",true);
    68.             }else{
    69.                 return new ResponseBodyMessage<>(-200,"注册失败",false);
    70.             }
    71.         }
    72.     }
    73. }

    6、注册登录功能测试

    • 使用 postman 进行测试。

    （1）注册功能

    （2）登录功能

    7、前端代码

    （1）注册功能

    1.

    （2）登录功能

    1.

    十、实现匹配模块

    • 让多个用户在游戏大厅进行匹配，系统将天梯积分相近的两个玩家匹配到同一个房间中进行对战。

    1、匹配功能的请求和响应设计

    • 玩家发送匹配请求，这个事情是确定的（点击了匹配按钮，就会发送匹配请求） ，但是服务器什么时候告知玩家匹配结果是不确定的。
    • 匹配功能需要依赖消息推送机制（websocket），当服务器匹配成功之后就会主动告诉当前进行匹配的所有玩家“你匹配成功了”。

    消息推送机制：

    • 消息推送就是服务器主动将数据发送给客户端（服务器主动发送请求），而 HTTP 协议必须是客户端主动将数据发送给服务器（客户端主动发送请求）。
    • 匹配功能需要服务器主动给客户端发送数据，因此需要使用 websocket，接下来所设计的前后端交互接口都是基于 websocket 这样的交互方式进行的。

    （1）匹配请求

    • 客户端通过 websocket 给服务器发送一个 json 格式的文本数据
    1. 请求：
    2. {
    3.   ws://127.0.0.1:8081/findMatch // 请求路径
    4.   data:{ message：'startMatch' // 开始匹配
    5.                或 'stopMatch' // 结束匹配
    6.        } // 请求内容
    7. }

    （2）匹配响应 1

    • 这个响应是客户端给服务器发送匹配请求之后，服务器立即返回的匹配响应
    1. 响应：
    2.      {
    3.        ws://127.0.0.1:8081/findMatch // 响应路径
    4.        data:{ 
    5.               status: 200, // 匹配成功
    6.               reason: '', // 如果匹配失败，失败原因的信息
    7.               message: 'startMatch' // 开始匹配
    8.                     或 'stopMatch' // 结束匹配
    9.             } // 响应内容
    10.      }
    11.  
    12. 响应设计字段解释：
    13.     {
    14.       状态码为 200 表示成功，-200表示失败
    15.       状态描述信息，描述此次请求成功或者失败的原因
    16.       返回的数据，请求成功后，服务器返回给前端的数据
    17.     }

    （3）匹配响应 2

    • 这个响应是匹配到对手之后，服务器主动给客户端发送的响应。
    1. 响应：
    2.      {
    3.        ws://127.0.0.1:8081/findMatch // 响应路径
    4.        data:{ 
    5.               status: 200, // 匹配成功
    6.               reason: '', // 如果匹配失败，失败原因的信息
    7.               message: 'matchSuccess'
    8.             } // 响应内容
    9.      }
    10.  
    11. 响应设计字段解释：
    12.     {
    13.       状态码为 200 表示成功，-200表示失败
    14.       状态描述信息，描述此次请求成功或者失败的原因
    15.       返回的数据，请求成功后，服务器返回给前端的数据
    16.     }

    2、获取用户信息的请求和响应设计

    • 用户登录成功之后，让客户端随时通过这个接口来访问服务器，获取到自身的信息。
    1. 请求：
    2.     {
    3.       get, // 使用 get 请求
    4.       /userInfo // 请求路径
    5.     }
    6.      
    7. 响应：
    8.     {
    9.        "status": 200,
    10.        "message": "相关信息",
    11.        "data": {
    12.                  "id": xxxxx,
    13.                  "username": xxxxxx,
    14.                  "score": 1000,
    15.                  "totalCount": 0,
    16.                  "winCount": 0
    17.        }
    18.      
    19.     }
    20.      
    21. 响应设计字段解释：
    22.     {
    23.       状态码为 200 表示成功，-200表示失败
    24.       状态描述信息，描述此次请求成功或者失败的原因
    25.       返回的数据，请求成功后，服务器返回给前端的数据
    26.     }

    3、在 UserAPI 类中添加 getUserInfo 方法

    • 根据当前存储的 session 对象, 查找对应的用户
    1.     @RequestMapping("/userInfo")
    2.     @ResponseBody
    3.     public ResponseBodyMessage getUserInfo(HttpServletRequest request){
    4.         HttpSession session = request.getSession(false);
    5.         User user = (User)session.getAttribute("user"); // 从会话中获取 User 对象
    6.         User newUser = userMapper.selectByName(user.getUsername());
    7.         if(newUser != null){
    8.             return new ResponseBodyMessage<>(200,"获取成功",user);
    9.         }else {
    10.             System.out.println("没有该用户");
    11.             return new ResponseBodyMessage<>(-200,"获取失败",user);
    12.         }
    13.     }

    4、用户的在线状态

    • 创建 game 包，在 game 包中创建 OnlineUserManager 类
    • 维护用户的在线状态，目的是为了能够方便获取到某个用户当前的 websocket 会话，从而可以通过这个会话来给这个客户端发送信息，同时也可以感知到当前玩家的在线/离线状态。

    使用哈希表来保存当前用户的在线状态，当用户登录的时候, 就将用户状态添加到哈希表中。

    • 玩家的在线状态是多线程的, 很多用户访问同一个哈希表就会出现线程安全的问题, 所以这里就使用 ConcurrentHashMap, 确保了线程安全问题。
    • 这里存储的, key是用户的Id, value是对应的 websocket 会话。

    提供三个方法：

    1. 玩家进入游戏大厅的时候, 将用户的状态存入哈希表中
    2. 玩家退出游戏大厅的时候, 将用户的状态从哈希表中删除
    3. 在游戏大厅获取当前用户的信息
    1. package com.example.online_gobang.game;
    2.  
    3. import org.springframework.stereotype.Component;
    4. import org.springframework.web.socket.WebSocketSession;
    5.  
    6. import java.util.concurrent.ConcurrentHashMap;
    7.  
    8. @Component
    9. public class OnlineUserManager {
    10.     // 这个哈希表用来表示当前用户在游戏大厅的在线状态
    11.     private ConcurrentHashMap gameHall = new ConcurrentHashMap<>();
    12.  
    13.     // 玩家进入游戏大厅
    14.     public void enterGameHall(int userId,WebSocketSession webSocketSession){
    15.         gameHall.put(userId,webSocketSession);
    16.     }
    17.  
    18.     // 玩家退出游戏大厅
    19.     public void exitGameHall(int userId){
    20.         gameHall.remove(userId);
    21.     }
    22.  
    23.     public WebSocketSession getFromGameHall(int userId){
    24.         return gameHall.get(userId);
    25.     }
    26.  
    27. }

    5、创建游戏房间

    • 在 com.example.online_gobang.game 包中创建 Room 类。
    • 将 roomId 设置成字符串类型，使用 UUID 生成唯一的 roomId。

    UUID：通用唯一识别码（Universally Unique Identifier）的缩写

    • 表示“唯一的身份标识”。
    • 通过一系列算法能够生成一串字符串（一组十六进制表示的数字）。
    • 每次调用这个算法，得到的结果都是不相同的。
    • Java 中有现成的类可以直接生成 UUID。
    1. package com.example.online_gobang.game;
    2.  
    3. import com.example.online_gobang.model.User;
    4. import lombok.Data;
    5.  
    6. import java.util.UUID;
    7.  
    8. // 这个类表示一个游戏房间
    9. @Data
    10. public class Room {
    11.     private String roomId;
    12.  
    13.     private User user1;
    14.     private User user2;
    15.  
    16.     public Room() {
    17.         // 构造 Room 的时候生成一个唯一的字符串表示房间 id.
    18.         // 使用 UUID 来作为房间 id
    19.         roomId = UUID.randomUUID().toString();
    20.     }
    21. }

    6、创建房间管理器

    • 在 com.example.online_gobang.game 包中创建 RoomManager 类。
    • 一个游戏服务器上会同时存在多个游戏房间，因此需要一个“游戏房间管理器”来管理多个游戏房间。

    使用哈希表存储每个游戏房间并对其进行管理。

    private ConcurrentHashMap rooms = new ConcurrentHashMap<>();
    • key：roomId(每个游戏房间的id都是唯一的)，value：Room。

    使用哈希表维护玩家和游戏房间之间的关系。

    private ConcurrentHashMap  usrIdToRoomId = new ConcurrentHashMap<>();
    • 考虑到线程安全问题，因此使用 ConcurrentHashMap。
    • key：userId，value：roomId。

    提供4个方法：

    1. 添加玩家进入到游戏房间中。
    2. 删除游戏房间中的玩家。
    3. 根据游戏房间的Id，获取对应的游戏房间。
    4. 通过用户Id，查找该玩家所在的游戏房间。
    1. package com.example.online_gobang.game;
    2.  
    3. import org.springframework.stereotype.Component;
    4.  
    5. import java.util.concurrent.ConcurrentHashMap;
    6.  
    7. // 房间管理器
    8. @Component
    9. public class RoomManager {
    10.     private ConcurrentHashMap rooms = new ConcurrentHashMap<>();
    11.     // 通过用户id 与房间id 维护玩家和房间之间的关系
    12.     private ConcurrentHashMap  usrIdToRoomId = new ConcurrentHashMap<>();
    13.     public void add(Room room, int userId1,int userId2){
    14.         // 添加一个房间到房间管理器的同时，也将两个玩家的 userId 添加到 usrIdToRoomId 中，便于维护玩家和房间之间的关系
    15.         rooms.put(room.getRoomId(),room);
    16.         usrIdToRoomId.put(userId1,room.getRoomId());
    17.         usrIdToRoomId.put(userId2,room.getRoomId());
    18.     }
    19.  
    20.     public void remove(String roomId, int userId1,int userId2){
    21.         // 移除一个房间的同时也要同时移除两个玩家的信息
    22.         rooms.remove(roomId);
    23.         usrIdToRoomId.remove(userId1);
    24.         usrIdToRoomId.remove(userId2);
    25.     }
    26.  
    27.     public Room getByRoomId(String roomId){
    28.         return rooms.get(roomId);
    29.     }
    30.  
    31.     // 通过用户id 查找对应的房间
    32.     public Room getRoomByUserId(int userId){
    33.         String rooId = usrIdToRoomId.get(userId);
    34.         if(rooId == null){
    35.             // rooId == null 表示游戏房间不存在
    36.             // userId -> roomId 映射关系不存在，直接返回 null
    37.             return null;
    38.         }
    39.         return rooms.get(rooId);
    40.     }
    41. }

    7、创建匹配队列

    • 在 com.example.online_gobang.game 包中创建 Matcher 类。
    • 从待匹配的玩家中选中分数相近的玩家进行匹配。

    将所有玩家按照天梯积分划分成三类（基础分：1000）：

    • 业余水平：score < 2000
    • 普通水平：score >= 2000 && score < 3000
    • 大师水平：score >= 3000
    1.     // 1. 业余水平：score < 2000
    2.     private Queue amateurQueue = new LinkedList<>();
    3.     // 2. 普通水平：score >= 2000 && score < 3000
    4.     private Queue normalQueue = new LinkedList<>();
    5.     // 3. 大师水平：score >= 3000
    6.     private Queue masterQueue = new LinkedList<>();
    • 给这三个等级分配三个不同的队列，根据当前玩家的天梯积分，将玩家的用户信息放到对应的队列中。
    • 设置一个线程去不停的扫描匹配队列，只要队列中的元素（匹配中的玩家）积分相近，就将这一对玩家放到一个游戏房间中。

    1、线程安全问题：

    • 如果多个线程针对同一个队列进行并发修改操作（入队、出队）就会产生线程安装问题。如果是针对多个不同队列进行操作就不会产生线程安全问题。

    解决办法：对创建的三个队列对象在进行队列操作时分别进行加锁（synchronized）。

    2、忙等问题：

    • 如果当前匹配队列中没有玩家或只有一个玩家在进行匹配，线程就会调用 handlerMatch 方法并且直接返回，然后再次调用 handlerMatch 方法 ...... 一直循环。这个过程中 CPU 占用率会非常高。

    解决方法：

    • 在判断当前队列中的元素（正在匹配的玩家）是否有2个以上的时候，如果当前队列中的玩家数 < 2，就调用 wait() 进行匹配等待，如果没有玩家进入匹配队列就会一直等。
    • 直到有玩家进入匹配队列，就调用 notify() 唤醒线程，再次判断当前队列中是否有2个以上的玩家。
    1. package com.example.online_gobang.game;
    2.  
    3. import com.example.online_gobang.model.User;
    4. import com.fasterxml.jackson.databind.ObjectMapper;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.stereotype.Component;
    7. import org.springframework.web.socket.TextMessage;
    8. import org.springframework.web.socket.WebSocketSession;
    9.  
    10. import java.io.IOException;
    11. import java.util.LinkedList;
    12. import java.util.Queue;
    13.  
    14. // 匹配器, 这个类是用来完成匹配功能的
    15. @Component
    16. public class Matcher {
    17.     // 创建匹配队列 按等级划分
    18.     // 1. 业余水平：score < 2000
    19.     private Queue amateurQueue = new LinkedList<>();
    20.     // 2. 普通水平：score >= 2000 && score < 3000
    21.     private Queue normalQueue = new LinkedList<>();
    22.     // 3. 大师水平：score >= 3000
    23.     private Queue masterQueue = new LinkedList<>();
    24.  
    25.     @Autowired
    26.     private OnlineUserManager onlineUserManager;
    27.  
    28.     @Autowired
    29.     private ObjectMapper objectMapper;
    30.  
    31.     @Autowired
    32.     private RoomManager roomManager;
    33.  
    34.     /**
    35.      * 将当前玩家添加到匹配队列中
    36.      * @param user
    37.      */
    38.     public void add(User user) {
    39.         // 按等级加入队列中
    40.         if (user.getScore() < 2000) {
    41.             synchronized (amateurQueue) {
    42.                 amateurQueue.offer(user);
    43.                 // 只要有用户进入了, 就进行唤醒
    44.                 amateurQueue.notify();
    45.             }
    46.             // 打印日志
    47.             System.out.println("把玩家"+user.getUsername()+"加入到了amateurQueue 中");
    48.         }else if (user.getScore() >= 2000 && user.getScore() < 3000) {
    49.             synchronized (normalQueue) {
    50.                 normalQueue.offer(user);
    51.                 normalQueue.notify();
    52.             }
    53.             System.out.println("把玩家"+user.getUsername()+"加入到了normalQueue 中");
    54.         }else {
    55.             synchronized (masterQueue) {
    56.                 masterQueue.offer(user);
    57.                 masterQueue.notify();
    58.             }
    59.             System.out.println("把玩家"+user.getUsername()+"加入到了masterQueue 中");
    60.         }
    61.     }
    62.  
    63.     /**
    64.      *  当玩家点击停止匹配
    65.      * 就把当前玩家匹配队列中删除
    66.      * @param user
    67.      */
    68.     public void remove(User user) {
    69.         // 按照当前等级去对应匹配队列中删除
    70.         if (user.getScore() < 2000) {
    71.             synchronized (amateurQueue){
    72.                 amateurQueue.remove(user);
    73.             }
    74.             System.out.println("把玩家"+user.getUsername()+"移除了masterQueue");
    75.         }else if (user.getScore() >= 2000 && user.getScore() < 3000) {
    76.             synchronized (normalQueue) {
    77.                 normalQueue.remove(user);
    78.             }
    79.             System.out.println("把玩家"+user.getUsername()+"移除了normalQueue");
    80.         }else {
    81.             synchronized (masterQueue) {
    82.                 masterQueue.remove(user);
    83.             }
    84.             System.out.println("把玩家"+user.getUsername()+"移除了masterQueue");
    85.         }
    86.     }
    87.  
    88.     // 使用3个线程去一直的进行查看是否有2个以上的人, 如果有进行匹配
    89.     public Matcher() {
    90.         // 创建三个线程, 操作三个匹配队列
    91.         Thread t1 = new Thread() {
    92.             @Override
    93.             public void run() {
    94.                 // 扫描 amateurQueue
    95.                 while (true) {
    96.                     handlerMatch(amateurQueue);
    97.                 }
    98.             }
    99.         };
    100.         t1.start();
    101.         Thread t2 = new Thread() {
    102.             @Override
    103.             public void run() {
    104.                 // 扫描 normalQueue
    105.                 while (true) {
    106.                     handlerMatch(normalQueue);
    107.                 }
    108.             }
    109.         };
    110.         t2.start();
    111.         Thread t3 = new Thread() {
    112.             @Override
    113.             public void run() {
    114.                 // 扫描 masterQueue
    115.                 while (true) {
    116.                     handlerMatch(masterQueue);
    117.                 }
    118.             }
    119.         };
    120.         t3.start();
    121.     }
    122.  
    123.     private void handlerMatch(Queue matchQueue) {
    124.         // 因为三个队列都调用了 handlerMatch 方法，因此对这个方法里面的操作进行加锁即可。
    125.         // 针对形参进行加锁（传入不同的实参就可以对不同的队列对象进行加锁）
    126.         synchronized (matchQueue) {
    127.             try{
    128.                 // 1. 先查看当前队列中的元素个数, 是否满足两个
    129.                 //    在往队列里添加一个元素后仍然不能进行后续匹配操作，
    130.                 //    因此使用 while 循环检测是否有两个元素添加到队列中更合理
    131.                 while (matchQueue.size() < 2) {
    132.                     // 玩家数 < 2 的时候, 就进行等待
    133.                     matchQueue.wait();
    134.                 }
    135.                 // 2. 尝试从队列中取出两个玩家
    136.                 User player1 = matchQueue.poll();
    137.                 User player2 = matchQueue.poll();
    138.                 System.out.println("匹配到的两个玩家: " + player1.getUsername()+ " , " + player2.getUsername());
    139.  
    140.                 // 3. 获取到玩家的 websocket 的会话.
    141.                 WebSocketSession session1 = onlineUserManager.getFromGameHall(player1.getUserId());
    142.                 WebSocketSession session2 = onlineUserManager.getFromGameHall(player2.getUserId());
    143.                 // 再次判断是否为空
    144.                 if (session1 == null && session2 != null) {
    145.                     // 如果玩家1 掉线了，就把玩家2 重新放到匹配队列中
    146.                     matchQueue.offer(player2);
    147.                     return;
    148.                 }
    149.                 if (session1 != null && session2 == null) {
    150.                     // 如果玩家2 掉线了，就把玩家1 重新放到匹配队列中
    151.                     matchQueue.offer(player1);
    152.                     return;
    153.                 }
    154.                 if (session1 == null && session2 == null) {
    155.                     return;
    156.                 }
    157.                 if (session1 == session2) {
    158.                     // 如果两个玩家是同一个用户（一个玩家入队了两次,理论上不存在，但还是需要再判定一次）
    159.                     // 就把其中的一个玩家放回到匹配队列
    160.                     matchQueue.offer(player1);
    161.                     return;
    162.                 }
    163.  
    164.                 // 4. 把两个玩家放入一个游戏房间中
    165.                 Room room = new Room();
    166.                 roomManager.add(room, player1.getUserId(), player2.getUserId());
    167.  
    168.                 // 5. 给玩家反馈信息, 通知匹配到了对手
    169.                // 给玩家1返回的响应
    170.                 MatchResponse response1 = new MatchResponse();
    171.                 response1.setStatus(200);
    172.                 response1.setMessage("matchSuccess");
    173.                 String json1 = objectMapper.writeValueAsString(response1);
    174.                 session1.sendMessage(new TextMessage(json1));
    175.  
    176.                 // 给玩家2返回的响应
    177.                 MatchResponse response2 = new MatchResponse();
    178.                 response2.setMessage("matchSuccess");
    179.                 response2.setStatus(200);
    180.                 String json2 = objectMapper.writeValueAsString(response2);
    181.                 session2.sendMessage(new TextMessage(json2));
    182.  
    183.             } catch (IOException | InterruptedException e) {
    184.                 e.printStackTrace();
    185.             }
    186.         }
    187.     }
    188. }

    8、websocket 的匹配请求

    • 在 com.example.online_gobang.game 包下创建 MatchRequest 类。
    1. package com.example.online_gobang.game;
    2.  
    3. import lombok.Data;
    4.  
    5. // 表示 websocket 的一个匹配请求
    6. @Data
    7. public class MatchRequest {
    8.     private String message;
    9. }

    9、websocket 的匹配响应

    • 在 com.example.online_gobang.game 包下创建 MatchResponse 类。
    1. package com.example.online_gobang.game;
    2.  
    3. import lombok.Data;
    4.  
    5. // 表示 websocket 的一个匹配响应
    6. @Data
    7. public class MatchResponse {
    8.     private int status; // 状态码
    9.     private String reason; // 响应内容（失败的原因）
    10.     private String message; // 匹配信息
    11. }

    10、处理匹配功能的 websocket 请求

    • 在 com.example.online_gobang.api 包中创建 MatchAPI 类
    • afterConnectionEstablished 方法：在游戏大厅建立连接
    • handleTextMessage 方法：在游戏大厅中接收发送的响应
    • handleTransportError 方法：处理玩家异常下线
    • afterConnectionClosed 方法：处理玩家正常下线
    1. package com.example.online_gobang.api;
    2.  
    3. import com.example.online_gobang.game.MatchRequest;
    4. import com.example.online_gobang.game.MatchResponse;
    5. import com.example.online_gobang.game.Matcher;
    6. import com.example.online_gobang.game.OnlineUserManager;
    7. import com.example.online_gobang.model.User;
    8. import com.example.online_gobang.tools.Constant;
    9. import com.fasterxml.jackson.databind.ObjectMapper;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.stereotype.Component;
    12. import org.springframework.web.socket.CloseStatus;
    13. import org.springframework.web.socket.TextMessage;
    14. import org.springframework.web.socket.WebSocketSession;
    15. import org.springframework.web.socket.handler.TextWebSocketHandler;
    16.  
    17. // 通过这个类来处理匹配功能中的 websocket 请求
    18. @Component
    19. public class MatchAPI extends TextWebSocketHandler {
    20.     private ObjectMapper objectMapper = new ObjectMapper();
    21.  
    22.     @Autowired
    23.     private OnlineUserManager onlineUserManager;
    24.  
    25.     @Autowired
    26.     private Matcher matcher;
    27.  
    28.     @Override
    29.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    30.         // 玩家上线，加入到 OnlineUserManager 中
    31.  
    32.         // 1. 获取当前的用户信息（谁在游戏大厅创建连接）
    33.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    34.  
    35.         // 2. 判断当前用户是否已经登录
    36.         MatchResponse response = new MatchResponse();
    37.         if (onlineUserManager.getFromGameHall(user.getUserId()) != null ) {
    38.             // 当前用户已经登录
    39.             response.setMessage("当前用户已经登录!");
    40.             response.setStatus(-200);
    41.             response.setReason("禁止游戏多开");
    42.             /**
    43.              *  先通过 ObjectMapper 把 MathResponse 对象转成 JSON 字符串
    44.              *  然后再包装上一层 TextMessage,再进行传输
    45.              *  TextMessage 就表示一个文本格式的 websocket 数据包
    46.               */
    47.             session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(response)));
    48.             session.close();
    49.             return;
    50.         }
    51.  
    52.         // 3. 设置在线状态
    53.         onlineUserManager.enterGameHall(user.getUserId(),session);
    54.         System.out.println("玩家"+user.getUsername()+"进入游戏大厅");
    55.     }
    56.  
    57.     @Override
    58.     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    59.         // 处理开始匹配 和 停止匹配
    60.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    61.         // 获取到客户端给服务器发送的数据
    62.         String payload = message.getPayload();
    63.         // 当前这个数据载荷是一个 JSON 格式的字符串，需要将它转换成 Java 对象（ MatchRequest )
    64.         MatchRequest matchRequest = objectMapper.readValue(payload, MatchRequest.class); // 从客户端获取的数据
    65.         MatchResponse matchResponse = new MatchResponse(); // 给客户端返回的数据
    66.         if (matchRequest.getMessage().equals("startMatch")) {
    67.             // 进入匹配队列, 加入用户
    68.             matcher.add(user);
    69.             // 返回响应给前端
    70.             matchResponse.setStatus(200);
    71.             matchResponse.setMessage("startMatch");
    72.         }else if(matchRequest.getMessage().equals("stopMatch")) {
    73.             // 退出匹配队列, 将用户移除
    74.             matcher.remove(user);
    75.             matchResponse.setMessage("stopMatch");
    76.             matchResponse.setStatus(200);
    77.         }else{
    78.             // 非法情况
    79.             matchResponse.setStatus(-200);
    80.             matchRequest.setMessage("非法匹配");
    81.         }
    82.         session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(matchResponse)));
    83.     }
    84.  
    85.     @Override
    86.     public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
    87.         // 玩家下线，从 OnlineUserManager 中删除
    88.         // 1. 获取用户信息
    89.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    90.         WebSocketSession webSocketSession = onlineUserManager.getFromGameHall(user.getUserId());
    91.         if(webSocketSession == session) {
    92.             // 2. 设置在线状态
    93.             onlineUserManager.exitGameHall(user.getUserId());
    94.         }
    95.         // 如果玩家正在匹配中，而 websocket 连接断开了就应该移除匹配队列
    96.         matcher.remove(user);
    97.     }
    98.  
    99.     @Override
    100.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
    101.         // 玩家下线，从 OnlineUserManager 中删除
    102.         // 1. 获取用户信息
    103.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    104.         WebSocketSession webSocketSession = onlineUserManager.getFromGameHall(user.getUserId());
    105.         if(webSocketSession == session) {
    106.             // 2. 设置在线状态
    107.             onlineUserManager.exitGameHall(user.getUserId());
    108.         }
    109.         // 如果玩家正在匹配中，而 websocket 连接断开了就应该移除匹配队列
    110.         matcher.remove(user);
    111.     }
    112. }

    11、触发 websocket 约定好的请求与响应路径

    • ws://127.0.0.1:8081/findMatch（触发这个路径与服务器建立连接）
    • 在 AppConfig 类中添加代码 websocket 请求路径的代码
    1. @Configuration
    2. @EnableWebSocket
    3. public class AppConfig implements WebSocketConfigurer,WebMvcConfigurer {
    4.  
    5.     @Autowired
    6.     private MatchAPI matchAPI;
    7.  
    8.     @Override
    9.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    10.         registry.addHandler(matchAPI,"/findMatch").
    11.                 addInterceptors(new HttpSessionHandshakeInterceptor());
    12.     }
    13. }

    12、前端代码

    十一、实现对战模块

    1、对战功能的请求和响应设计

    （1）建立连接请求

    • 客户端通过 websocket 给服务器发送一个 json 格式的文本数据
    1. 请求：
    2.     {
    3.       ws://127.0.0.1:8081/game // 请求路径
    4.     }

    （2）建立连接响应

    • 玩家匹配成功后服务器生成一些游戏的初始信息返回给客户端。
    1. 响应:
    2.     {
    3. 	    message: 'gameReady' // 消息的类别（游戏准备就绪） 
    4. 	    status: 200  // 200 是正常响应, -200 是异常响应 
    5.         reason: ''  // 报错原因
    6. 	    roomId: ''  // 玩家所处的房间 Id
    7. 	    thisUserId: 1 // 自己的用户Id
    8. 	    thatUserId: 2 // 对手的用户Id
    9. 	    whiteUser: 1  // 执白子的玩家先手 (1:先手; 2:后手)
    10.     }

    （3）玩家落子请求

    1. 请求:
    2.     {
    3.         message: 'putChess'
    4.         userId: 1 // 落子的用户id
    5.         row: 0 // 落子的行
    6.         col: 0 // 落子的列
    7.     }

    （4）玩家落子响应

    1. 响应:
    2.     {
    3.         message: 'putChess'
    4.         userId: 1 // 落子的用户id
    5.         row: 0 // 落子的行
    6.         col: 0 // 落子的列
    7.         winner:0 // 为0时: 胜负未分; 非0时（获胜者的用户id）: 胜负已分
    8.     }

    2、触发 websocket 约定好的请求与响应路径

    • ws://127.0.0.1:8081/game（触发这个路径与服务器建立连接）
    • 在 AppConfig 类中添加触发 websocket 请求路径的代码
    1. @Configuration
    2. @EnableWebSocket
    3. public class AppConfig implements WebSocketConfigurer,WebMvcConfigurer {
    4.     @Autowired
    5.     private GameAPI gameAPI;
    6.  
    7.     @Override
    8.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    9.         registry.addHandler(gameAPI,"/game")
    10.                 .addInterceptors(new HttpSessionHandshakeInterceptor());
    11.     }
    12. }

    3、建立连接的响应

    • 在 com.example.online_gobang.game 包下创建 GameReadyResponse 类。
    1. package com.example.online_gobang.game;
    2.  
    3. import lombok.Data;
    4.  
    5. // 客户端连接游戏房间后，服务器返回的响应
    6. @Data
    7. public class GameReadyResponse {
    8.     private String message; // 消息的类别
    9.     private int status; // 状态码
    10.     private String roomId; // 房间id
    11.     private int thisUserId; // 自己的用户id
    12.     private int thatUserId; // 对手的用户id
    13.     private int whiteUser; // 执白子的玩家先手
    14. }

    4、websocket 的落子请求

    • 在 com.example.online_gobang.game 包下创建 GameRequest 类。
    1. package com.example.online_gobang.game;
    2.  
    3. import lombok.Data;
    4.  
    5. // 落子请求
    6. @Data
    7. public class GameRequest {
    8.     private String message;
    9.     private int userId; // 玩家id
    10.     private int row; // 落子的行
    11.     private int col; // 落子的列
    12. }

    5、websocket 的落子响应

    • 在 com.example.online_gobang.game 包下创建 GameRequest 类。
    1. package com.example.online_gobang.game;
    2.  
    3. import lombok.Data;
    4.  
    5. // 落子响应
    6. @Data
    7. public class GameResponse {
    8.     private String message;
    9.     private int userId;
    10.     private int row;
    11.     private int col;
    12.     private int winner; // 判断胜负（未分出胜负为0，分出胜负则为获胜者的id）
    13. }

    6、玩家在游戏房间的在线状态

    使用哈希表来保存当前玩家在游戏房间的在线状态，当玩家进入游戏房间的时候, 就将玩家的状态添加到哈希表中。

    • key是用户的Id, value是对应的 websocket 会话。
    1. // 这个哈希表用来表示当前用户在游戏房间的在线状态
    2. private ConcurrentHashMap gameRoom = new ConcurrentHashMap<>();

    提供三个方法

    1. 玩家进入游戏房间的时候, 将用户的状态存入哈希表中
    2. 玩家退出游戏房间的时候, 将用户的状态从哈希表中删除
    3. 在游戏房间获取当前用户的信息
    • 在 com.example.online_gobang.game 包中的 OnlineUserManager 类中添加下面的代码
    1. @Component
    2. public class OnlineUserManager {
    3.     // 这个哈希表用来表示当前用户在游戏房间的在线状态
    4.     private ConcurrentHashMap gameRoom = new ConcurrentHashMap<>();
    5.  
    6.     // 玩家进入游戏房间
    7.     public void enterGameRoom(int userId,WebSocketSession webSocketSession){
    8.         gameRoom.put(userId,webSocketSession);
    9.     }
    10.  
    11.     // 玩家退出游戏房间
    12.     public void exitGameRoom(int userId){
    13.         gameRoom.remove(userId);
    14.     }
    15.  
    16.     public WebSocketSession getFromGameRoom(int userId){
    17.         return gameRoom.get(userId);
    18.     }
    19. }

    7、更新玩家的比赛场次、获胜场次、天梯积分

    （1）在 UserMapper 接口中添加代码

    1. @Mapper
    2. public interface UserMapper {
    3.     /**
    4.      * 更新的数据：总场数 +1，获胜场数 +1，天梯积分 + 50
    5.      * @param userId
    6.      */
    7.     void userWin(int userId);
    8.  
    9.     /**
    10.      * 更新的数据：总场数 +1，获胜场数不变，天梯积分 - 50
    11.      * @param userId
    12.      */
    13.     void userLose(int userId);
    14. }

    （2）在 UserMapper.xml 中添加代码

    1. "1.0" encoding="UTF-8"?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    3. <mapper namespace="com.example.online_gobang.mapper.UserMapper">
    4.     
    5.     <update id="userWin">
    6.         update user set totalCount = totalCount + 1,winCount = winCount + 1,score = score + 50
    7.         where userId = #{userId};
    8.     update>
    9.  
    10.     <update id="userLose">
    11.         update user set totalCount = totalCount + 1,score = score - 50
    12.         where userId = #{userId};
    13.     update>
    14.  
    15. mapper>

    8、在 Room 类中实现棋局判定胜负的逻辑

    （1）修改启动类

    Room 要注入Spring对象, 不能使用@Autowired @Resource注解. 需要使用context

    1. package com.example.online_gobang;
    2.  
    3. import org.springframework.boot.SpringApplication;
    4. import org.springframework.boot.autoconfigure.SpringBootApplication;
    5. import org.springframework.context.ConfigurableApplicationContext;
    6.  
    7. public class OnlineGobangApplication {
    8.  
    9. 	public static ConfigurableApplicationContext context;
    10.  
    11. 	public static void main(String[] args) {
    12. 		context = SpringApplication.run(OnlineGobangApplication.class, args);
    13. 	}
    14.  
    15. }

    （2）获取 RoomManager 与 OnlineUserManager

    • 在 Room 类中通过 Room 类的构造方法获取 RoomManager 与 OnlineUserManager
    1. // 这个类表示一个游戏房间
    2. @Data
    3. public class Room {
    4.  
    5.     private static final int ROW = 15;
    6.     private static final int COL = 15;
    7.  
    8.     private OnlineUserManager onlineUserManager;
    9.  
    10.     // 引入 roomManager 用于房间销毁
    11.     private RoomManager roomManager;
    12.  
    13.     public Room() {
    14.         // 构造 Room 的时候生成一个唯一的字符串表示房间 id.
    15.         // 使用 UUID 来作为房间 id
    16.         roomId = UUID.randomUUID().toString();
    17.         // 通过入口类中记录的 context 来手动获取到前面的 RoomManager 和 OnlineUserManager
    18.         onlineUserManager = OnlineGobangApplication.context.getBean(OnlineUserManager.class);
    19.         roomManager = OnlineGobangApplication.context.getBean(RoomManager.class);
    20.         userService = JavaGobangApplication.context.getBean(UserService.class);
    21.     }
    22. }

    （3）在 Room 类中创建一个二维数组用来表示棋盘

    • 用 0 表示没有落棋子，用 1 表示玩家1落的棋子，用 2 表示玩家2落的棋子。
    1. // 这个类表示一个游戏房间
    2. @Data
    3. public class Room {
    4.     private static final int ROW = 15;
    5.     private static final int COL = 15;
    6.  
    7.     private OnlineUserManager onlineUserManager;
    8.  
    9.     // 引入 roomManager 用于房间销毁
    10.     private RoomManager roomManager;
    11.  
    12.     // 用于将 JSON 格式的字符串转换 Java 对象
    13.     private ObjectMapper objectMapper = new ObjectMapper();
    14.  
    15.     // 这个二维数组表示棋盘
    16.     // 1) 使用 0 表示当前位置未落子. 初始化好的 int 二维数组, 就相当于是 全 0
    17.     // 2) 使用 1 表示 user1 的落子位置
    18.     // 3) 使用 2 表示 user2 的落子位置
    19.     private int[][] board = new int[ROW][COL];
    20.  
    21.     // 处理一次落子的操作
    22.     public void putChess(String payload) throws IOException {
    23.         // 1. 记录当前落子的位置
    24.        
    25.         // 2. 打印出当前的棋盘信息, 方便来观察局势. 也方便后面验证胜负关系的判定.
    26.         printBoard();
    27.  
    28.         // 3. 进行胜负判定
    29.         int winner = checkWinner(row, col, chess);
    30.  
    31.         // 4. 给房间里的所有客户端返回响应
    32.         response.setMessage("putChess");
    33.         response.setUserId(request.getUserId());
    34.         response.setRow(row);
    35.         response.setCol(col);
    36.         response.setWinner(winner);
    37.  
    38.         // 5. 如果当前胜负已分, 此时这个房间就失去存在的意义了. 就可以直接销毁房间. (把房间从房间管理器中给移除)
    39.        
    40.         // 打印棋盘内容
    41.         private void printBoard() {
    42.         
    43.         }
    44.  
    45.         // 使用这个方法来判定当前落子是否分出胜负.
    46.         // 约定如果玩家1 获胜, 就返回玩家1 的 userId
    47.         // 如果玩家2 获胜, 就返回玩家2 的 userId
    48.         // 如果胜负未分, 就返回 0
    49.         private int checkWinner(int row, int col, int chess) {
    50.             return 0;
    51.         }
    52. }

    （4）Room 类的完整代码

    1. package com.example.online_gobang.game;
    2.  
    3. import com.example.online_gobang.OnlineGobangApplication;
    4. import com.example.online_gobang.mapper.UserMapper;
    5. import com.example.online_gobang.model.User;
    6. import com.fasterxml.jackson.databind.ObjectMapper;
    7. import lombok.Data;
    8. import org.springframework.web.socket.TextMessage;
    9. import org.springframework.web.socket.WebSocketSession;
    10.  
    11. import java.io.IOException;
    12. import java.util.UUID;
    13.  
    14. // 这个类表示一个游戏房间
    15. @Data
    16. public class Room {
    17.     private String roomId;
    18.     private User user1;
    19.     private User user2;
    20.     private int whiteUser; // 先手方的玩家id
    21.  
    22.     private static final int ROW = 15;
    23.     private static final int COL = 15;
    24.  
    25.     private OnlineUserManager onlineUserManager;
    26.  
    27.     // 引入 roomManager 用于房间销毁
    28.     private RoomManager roomManager;
    29.  
    30.     // 用于将 JSON 格式的字符串转换 Java 对象
    31.     private ObjectMapper objectMapper = new ObjectMapper();
    32.  
    33.     // 引入 UserMapper，用于更新比赛数据
    34.     private UserMapper userMapper;
    35.  
    36.     // 这个二维数组表示棋盘
    37.     // 1) 使用 0 表示当前位置未落子. 初始化好的 int 二维数组, 就相当于是 全 0
    38.     // 2) 使用 1 表示 user1 的落子位置
    39.     // 3) 使用 2 表示 user2 的落子位置
    40.     private int[][] board = new int[ROW][COL];
    41.  
    42.     public Room() {
    43.         // 构造 Room 的时候生成一个唯一的字符串表示房间 id.
    44.         // 使用 UUID 来作为房间 id
    45.         roomId = UUID.randomUUID().toString();
    46.         // 通过入口类中记录的 context 来手动获取到前面的 RoomManager 和 OnlineUserManager
    47.         onlineUserManager = OnlineGobangApplication.context.getBean(OnlineUserManager.class);
    48.         roomManager = OnlineGobangApplication.context.getBean(RoomManager.class);
    49.         userMapper = OnlineGobangApplication.context.getBean(UserMapper.class);
    50.     }
    51.  
    52.     // 处理一次落子的操作
    53.     public void putChess(String payload) throws IOException {
    54.         // 1. 记录当前落子的位置
    55.         // 将 json 格式的字符串转换成 Java 对象
    56.         GameRequest request = objectMapper.readValue(payload,GameRequest.class);
    57.         GameResponse response = new GameResponse();
    58.         // 当前这个子是玩家1 落的还是玩家2 落的. 根据这个玩家1 和 玩家2 来决定往数组中是写 1 还是 2
    59.         int chess = request.getUserId() == user1.getUserId() ? 1 : 2;
    60.         int row = request.getRow();
    61.         int col = request.getCol();
    62.         if (board[row][col] != 0) {
    63.             System.out.println("当前位置: ("+row+" ," + col+" )" +"已经有子了");
    64.             return;
    65.         }
    66.         board[row][col] = chess;
    67.  
    68.         // 2. 打印出当前的棋盘信息, 方便来观察局势. 也方便后面验证胜负关系的判定.
    69.         printBoard();
    70.  
    71.         // 3. 进行胜负判定
    72.         int winner = checkWinner(row, col, chess);
    73.  
    74.         // 4. 给房间里的所有客户端返回响应
    75.         response.setMessage("putChess");
    76.         response.setUserId(request.getUserId());
    77.         response.setRow(row);
    78.         response.setCol(col);
    79.         response.setWinner(winner);
    80.  
    81.         // 要想给用户发送 websocket 数据, 就需要获取到这个用户的 WebSocketSession
    82.         WebSocketSession session1 = onlineUserManager.getFromGameRoom(user1.getUserId());
    83.         WebSocketSession session2 = onlineUserManager.getFromGameRoom(user2.getUserId());
    84.  
    85.         // 万一当前查到的会话为空(玩家已经下线了) 特殊处理一下
    86.         if (session1 == null) {
    87.             // 玩家1 已经下线了. 直接认为玩家2 获胜!
    88.             response.setWinner(user2.getUserId());
    89.             System.out.println("玩家1 掉线!");
    90.         }
    91.         if (session2 == null) {
    92.             // 玩家2 已经下线. 直接认为玩家1 获胜!
    93.             response.setWinner(user1.getUserId());
    94.             System.out.println("玩家2 掉线!");
    95.         }
    96.         // 把响应构造成 JSON 字符串, 通过 session 进行传输.
    97.         if (session1 != null) {
    98.             session1.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));
    99.         }
    100.         if (session2 != null) {
    101.             session2.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));
    102.         }
    103.  
    104.         // 5. 如果当前胜负已分, 此时这个房间就失去存在的意义了. 就可以直接销毁房间. (把房间从房间管理器中给移除)
    105.         if (response.getWinner() != 0) {
    106.             // 胜负已分
    107.             System.out.println("游戏结束! 房间即将销毁! roomId=" + roomId + " 获胜方为: " + response.getWinner());
    108.             // 更新获胜方和失败方的信息.
    109.             int winUserId = response.getWinner();
    110.             int loseUserId = response.getWinner() == user1.getUserId() ? user2.getUserId() : user1.getUserId();
    111.             userMapper.userWin(winUserId);
    112.             userMapper.userLose(loseUserId);
    113.             // 销毁房间
    114.             roomManager.remove(roomId, user1.getUserId(), user2.getUserId());
    115.         }
    116.     }
    117.  
    118.     // 打印棋盘内容
    119.     private void printBoard() {
    120.         System.out.println("打印棋盘信息, 当前房间: " + roomId);
    121.         System.out.println("====================================================");
    122.         for (int i = 0; i < ROW; i++) {
    123.             for (int j = 0; j < COL; j++) {
    124.                 System.out.print(board[i][j] + " ");
    125.             }
    126.             System.out.println();
    127.         }
    128.         System.out.println("====================================================");
    129.     }
    130.  
    131.  
    132.     // 使用这个方法来判定当前落子是否分出胜负.
    133.     // 如果玩家1 获胜, 就返回玩家1的userId
    134.     // 如果玩家2 获胜, 就返回玩家2的userId
    135.     // 如果胜负未分, 就返回 0
    136.     private int checkWinner(int row, int col, int chess) {
    137.         //  判断当前是谁获胜
    138.         // 1. 一行五子连珠
    139.         for (int c = col -4; c <= col && c <= COL-5; c++) {
    140.             try{
    141.                     if (board[row][c] == chess
    142.                             && board[row][c +1] == chess
    143.                             && board[row][c +2] == chess
    144.                             && board[row][c +3] == chess
    145.                             && board[row][c +4] == chess) {
    146.                         // 构成五子连珠，chess == 1 获胜者是玩家1；chess == 2 获胜者是玩家2
    147.                         return chess == 1 ? user1.getUserId() : user2.getUserId();
    148.                 }
    149.             }catch (ArrayIndexOutOfBoundsException e){
    150.                 // 如果出现数组下标越界的情况，就忽略这个异常
    151.                 continue;
    152.             }
    153.         }
    154.         // 2. 一列五子连珠
    155.         for (int r = row - 4; r <= row && r <= ROW-5; r++) {
    156.             try{
    157.                 if (board[r][col] == chess
    158.                         && board[r +1][col] == chess
    159.                         && board[r +2][col] == chess
    160.                         && board[r +3][col] == chess
    161.                         && board[r +4][col] == chess) {
    162.                     return chess == 1 ? user1.getUserId() : user2.getUserId();
    163.                 }
    164.             }catch (ArrayIndexOutOfBoundsException e){
    165.                 continue;
    166.             }
    167.         }
    168.         // 3. 斜着五子连珠 -> 左上到右下(左对角线)
    169.         for (int r = row - 4, c = col - 4; r <= row && c <= col; c++, r++){
    170.             try {
    171.                 if (board[r][c] == chess
    172.                         && board[r +1][c +1] == chess
    173.                         && board[r +2][c +2] == chess
    174.                         && board[r +3][c +3] == chess
    175.                         && board[r +4][c +4] == chess) {
    176.                     return chess == 1 ? user1.getUserId() : user2.getUserId();
    177.                 }
    178.             }catch (ArrayIndexOutOfBoundsException e) {
    179.                 continue;
    180.             }
    181.         }
    182.         // 4. 斜着五子连珠 -> 右上到左下(右对角线)
    183.         for (int r = row - 4, c = col + 4; r <= row && c >= col; r++, c--) {
    184.             try {
    185.                 if (board[r][c] == chess
    186.                         && board[r + 1][c - 1] == chess
    187.                         && board[r + 2][c - 2] == chess
    188.                         && board[r + 3][c - 3] == chess
    189.                         && board[r + 4][c - 4] == chess) {
    190.                     return chess == 1 ? user1.getUserId() : user2.getUserId();
    191.                 }
    192.             } catch (ArrayIndexOutOfBoundsException e) {
    193.                 continue;
    194.             }
    195.         }
    196.  
    197.         // 胜负未分返回0
    198.         return 0;
    199.     }
    200. }

    9、处理对战功能的 websocket 请求

    • 在 com.example.online_gobang.api 包中创建 GameAPI 类。
    • afterConnectionEstablished 方法：游戏房间建立连接.
    • handleTextMessage 方法：在游戏房间中接收发送的响应
    • handleTransportError 方法：玩家异常下线
    • afterConnectionClosed 方法：玩家正常下线
    1. package com.example.online_gobang.api;
    2.  
    3. import com.example.online_gobang.game.*;
    4. import com.example.online_gobang.mapper.UserMapper;
    5. import com.example.online_gobang.model.User;
    6. import com.example.online_gobang.tools.Constant;
    7. import com.fasterxml.jackson.databind.ObjectMapper;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Component;
    10. import org.springframework.web.socket.CloseStatus;
    11. import org.springframework.web.socket.TextMessage;
    12. import org.springframework.web.socket.WebSocketSession;
    13. import org.springframework.web.socket.handler.TextWebSocketHandler;
    14.  
    15. import javax.annotation.Resource;
    16. import java.io.IOException;
    17. import java.util.Random;
    18.  
    19. @Component
    20. public class GameAPI extends TextWebSocketHandler {
    21.  
    22.     @Autowired
    23.     private OnlineUserManager onlineUserManager;
    24.  
    25.     @Autowired
    26.     private RoomManager roomManager;
    27.  
    28.     @Autowired
    29.     private ObjectMapper objectMapper;
    30.  
    31.     @Resource
    32.     private UserMapper userMapper;
    33.  
    34.     @Override
    35.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    36.         GameReadyResponse gameReadyResponse = new GameReadyResponse();
    37.  
    38.         // 1. 获取玩家信息
    39.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    40.         if(user == null){
    41.             gameReadyResponse.setStatus(-200);
    42.             gameReadyResponse.setReason("用户未登录");
    43.             session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(gameReadyResponse)));
    44.             return;
    45.         }
    46.         // 2. 判断当前玩家是否已经进入房间
    47.         Room room = roomManager.getRoomByUserId(user.getUserId());
    48.         if (room == null) {
    49.             gameReadyResponse.setStatus(-200);
    50.             gameReadyResponse.setMessage("玩家尚未匹配到!");
    51.             session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(gameReadyResponse)));
    52.             return;
    53.         }
    54.         // 3. 判断当前玩家是否多开(如果一个账号一边在游戏大厅一边在游戏房间，这种也视为多开)
    55.         if (onlineUserManager.getFromGameHall(user.getUserId()) != null || onlineUserManager.getFromGameRoom(user.getUserId()) != null) {
    56.             gameReadyResponse.setReason("禁止玩家多开游戏页面!");
    57.             gameReadyResponse.setStatus(-200);
    58.             gameReadyResponse.setMessage("repeatConnection");
    59.             session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(gameReadyResponse)));
    60.             return;
    61.         }
    62.  
    63.         // 4. 设置当前玩家上线（进入游戏房间）
    64.         onlineUserManager.enterGameRoom(user.getUserId(), session);
    65.  
    66.         // 5. 把两个玩家加入到游戏房间中
    67.         synchronized (room) {
    68.             if (room.getUser1() == null) {
    69.                 room.setUser1(user);
    70.                 System.out.println("玩家1 " + user.getUsername() + " 已经准备就绪");
    71.                 return;
    72.             }
    73.  
    74.             if (room.getUser2() == null) {
    75.                 room.setUser2(user);
    76.                 System.out.println("玩家2 " + user.getUsername() + " 已经准备就绪");
    77.  
    78.                 Random random = new Random();
    79.                 int num = random.nextInt(10);
    80.                 if (num % 2 == 0) {
    81.                     room.setWhiteUser(room.getUser1().getUserId());
    82.                 } else{
    83.                     room.setWhiteUser(room.getUser2().getUserId());
    84.                 }
    85.  
    86.                 // 当两个玩家都加入成功后, 让服务器给这两个玩家都返回 websocket 的响应数据.
    87.                 // 通知玩家1
    88.                 noticeGameReady(room,room.getUser1(),room.getUser2());
    89.                 // 通知玩家2
    90.                 noticeGameReady(room,room.getUser2(),room.getUser1());
    91.                 return;
    92.             }
    93.         }
    94.  
    95.         // 6. 如果又有其他玩家连接到已经满了的房间，给出一个提示。（这种情况理论上不存在）
    96.         gameReadyResponse.setStatus(-200);
    97.         gameReadyResponse.setMessage("当前房间已满");
    98.         session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(gameReadyResponse)));
    99.     }
    100.  
    101.     private void noticeGameReady(Room room, User thisUser, User thatUser) throws IOException {
    102.         GameReadyResponse resp = new GameReadyResponse();
    103.         resp.setStatus(200);
    104.         resp.setReason("");
    105.         resp.setMessage("gameReady");
    106.         resp.setRoomId(room.getRoomId());
    107.         resp.setThisUserId(thisUser.getUserId());
    108.         resp.setThatUserId(thatUser.getUserId());
    109.         resp.setWhiteUser(room.getWhiteUser());
    110.         // 把当前的响应数据传回给玩家.
    111.         WebSocketSession webSocketSession = onlineUserManager.getFromGameRoom(thisUser.getUserId());
    112.         webSocketSession.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
    113.     }
    114.  
    115.     @Override
    116.     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    117.         // 1. 先从 session 中获取当前用户的身份信息
    118.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    119.         if (user == null){
    120.             System.out.println("[handleTextMessage]当前玩家"+ user.getUsername()+"未登录");
    121.             return;
    122.         }
    123.         // 2. 根据玩家id 获取房间对象
    124.         Room room =  roomManager.getRoomByUserId(user.getUserId());
    125.  
    126.         // 通过room对象处理这次请求
    127.         room.putChess(message.getPayload());
    128.     }
    129.  
    130.     @Override
    131.     public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
    132.         // 玩家异常下线
    133.         // 1. 获取玩家信息
    134.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    135.         WebSocketSession webSocketSession = onlineUserManager.getFromGameRoom(user.getUserId());
    136.         if(webSocketSession == session){
    137.             // 2. 退出游戏房间
    138.             onlineUserManager.exitGameRoom(user.getUserId());
    139.         }
    140.         System.out.println("当前用户: " + user.getUsername()+" 游戏房间连接异常！");
    141.  
    142.         // 通知对手获胜了
    143.         noticeThatUserWin(user);
    144.     }
    145.  
    146.     @Override
    147.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
    148.         // 玩家正常下线
    149.         // 1. 获取玩家信息
    150.         User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
    151.         WebSocketSession webSocketSession = onlineUserManager.getFromGameRoom(user.getUserId());
    152.         if(webSocketSession == session){
    153.             // 2. 退出游戏房间
    154.             onlineUserManager.exitGameRoom(user.getUserId());
    155.         }
    156.         System.out.println("当前用户: " + user.getUsername()+" 离开房间");
    157.  
    158.         // 通知对手获胜了
    159.         noticeThatUserWin(user);
    160.     }
    161.  
    162.     private void noticeThatUserWin(User user) throws IOException {
    163.         // 1. 根据当前玩家, 找到玩家所在的房间
    164.         Room room = roomManager.getRoomByUserId(user.getUserId());
    165.         if (room == null) {
    166.             // 这个情况意味着房间已经被释放了, 也就没有 "对手" 了
    167.             System.out.println("当前房间已关闭, 无需通知对手!");
    168.             return;
    169.         }
    170.  
    171.         // 2. 根据房间找到对手
    172.         User thatUser = (user == room.getUser1()) ? room.getUser2() : room.getUser1();
    173.         // 3. 获取对手的在线状态
    174.         WebSocketSession webSocketSession = onlineUserManager.getFromGameRoom(thatUser.getUserId());
    175.         if (webSocketSession == null) {
    176.             // 对手掉线了!
    177.             System.out.println("对方掉线了, 无需通知!");
    178.             return;
    179.         }
    180.         // 4. 构造一个响应, 来通知对手, 你是获胜方
    181.         GameResponse resp = new GameResponse();
    182.         resp.setMessage("putChess");
    183.         resp.setUserId(thatUser.getUserId());
    184.         resp.setWinner(thatUser.getUserId());
    185.         webSocketSession.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
    186.  
    187.         // 5. 更新玩家的分数信息
    188.         int winUserId = thatUser.getUserId();
    189.         int loseUserId = user.getUserId();
    190.         userMapper.userWin(winUserId);
    191.         userMapper.userLose(loseUserId);
    192.  
    193.         // 6. 释放房间对象
    194.         roomManager.remove(room.getRoomId(), room.getUser1().getUserId(), room.getUser2().getUserId());
    195.     }
    196. }

    10、前端代码

    （1）使用 canvas 绘制棋盘（game_room.html）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>游戏房间title>
    8.     <link rel="stylesheet" href="css/common.css">
    9.     <link rel="stylesheet" href="css/game_room.css">
    10. head>
    11. <body>
    12.     <div class="container">
    13.         <div >
    14.             
    15.             <canvas id="chess" width="450px" height="450px">
    16.             canvas>
    17.             
    18.             <div id="screen">等待玩家连接中...div>
    19.             <div class="buttons">div>
    20.         div>
    21.     div>
    22.     <script src="js/script.js">script>
    23. body>
    24. html>

    （2）绘制棋盘的 JavaScript 文件(script.js)

    • setScreenText 方法：用来将显示框中的内容, 根据当前是哪个玩家下的棋来修改内容。
    • initGame 方法：用来初始画棋盘的, 棋盘大小为 15 * 15。
    • oneStep 方法：当点击下子之后, 会绘制对应颜色的棋子。
    • onmessage 方法：用来处理后端传输的响应（使用 isWhite 判断是否是先手方）。
    • send方法： 通过 websocket 发送落子请求。
    • 棋盘数组：0 表示该位置没有落子, 1表示该位置已经落子，避免一个位置重复落子。
    1. let gameInfo = {
    2.     roomId: null,
    3.     thisUserId: null,
    4.     thatUserId: null,
    5.     isWhite: true,
    6. }
    7.  
    8.  
    9. // 设定界面显示的相关操作
    10. function setScreenText(me) {
    11.     let screen = document.querySelector('#screen');
    12.     if (me) {
    13.         screen.innerHTML = "轮到你落子了!";
    14.     } else {
    15.         screen.innerHTML = "轮到对方落子了!";
    16.     }
    17. }
    18.  
    19. // 初始化 websocket
    20. let websocketUrl = "ws://" + location.host + "/game";
    21. let websocket = new WebSocket(websocketUrl);
    22.  
    23. websocket.onopen = function() {
    24.     console.log("连接游戏房间成功!");
    25. }
    26.  
    27. websocket.close = function() {
    28.     console.log("和游戏服务器断开连接!");
    29. }
    30.  
    31. websocket.onerror = function() {
    32.     console.log("和服务器的连接出现异常!");
    33. }
    34.  
    35. window.onbeforeunload = function() {
    36.     websocket.close();
    37. }
    38.  
    39. // 处理服务器返回的响应数据
    40. websocket.onmessage = function(event) {
    41.     console.log("[handlerGameReady] " + event.data);
    42.     let resp = JSON.parse(event.data);
    43.  
    44.     if(resp.message != 'gameReady') {
    45.         console.log("响应类型错误");
    46.         location.assign("game_hall.html");
    47.         return;
    48.     }
    49.  
    50.     if (resp.status == -200) {
    51.         alert("连接游戏失败! reason: " + resp.reason);
    52.         // 如果出现连接失败的情况, 回到游戏大厅
    53.         location.assign("/game_hall.html");
    54.         return;
    55.     }
    56.  
    57.     // 游戏就绪
    58.     if (resp.message == 'gameReady') {
    59.         gameInfo.roomId = resp.roomId;
    60.         gameInfo.thisUserId = resp.thisUserId;
    61.         gameInfo.thatUserId = resp.thatUserId;
    62.         // 判断先手方，如果执白子的Userid是自己，那么就是自己先手
    63.         gameInfo.isWhite = (resp.whiteUser == resp.thisUserId);
    64.  
    65.         // 初始化棋盘
    66.         initGame();
    67.         // 设置显示区域的内容
    68.         setScreenText(gameInfo.isWhite);
    69.     } else if (resp.message == 'repeatConnection') { // 重复连接
    70.         alert("检测到游戏多开（游戏大厅和游戏房间多开）! 请使用其他账号登录!");
    71.         location.assign("/login.html");
    72.     }
    73. }
    74.  
    75. // 初始化一局游戏
    76. function initGame() {
    77.     // 是我下还是对方下. 根据服务器分配的先后手情况决定
    78.     let me = gameInfo.isWhite;
    79.     // 游戏是否结束
    80.     let over = false;
    81.     let chessBoard = [];
    82.     //初始化chessBord数组(表示棋盘的数组)
    83.     for (let i = 0; i < 15; i++) {
    84.         chessBoard[i] = [];
    85.         for (let j = 0; j < 15; j++) {
    86.             chessBoard[i][j] = 0;
    87.         }
    88.     }
    89.     let chess = document.querySelector('#chess');
    90.     let context = chess.getContext('2d');
    91.     context.strokeStyle = "#000000";
    92.     // 背景图片
    93.     let logo = new Image();
    94.     logo.src = "images/game_room2.png";
    95.     logo.onload = function () {
    96.         context.drawImage(logo, 0, 0, 450, 450);
    97.         initChessBoard();
    98.     }
    99.  
    100.     // 绘制棋盘网格
    101.     function initChessBoard() {
    102.         for (let i = 0; i < 15; i++) {
    103.             context.moveTo(15 + i * 30, 15);
    104.             context.lineTo(15 + i * 30, 435);
    105.             context.stroke();
    106.             context.moveTo(15, 15 + i * 30);
    107.             context.lineTo(435, 15 + i * 30);
    108.             context.stroke();
    109.         }
    110.     }
    111.  
    112.     // 绘制一个棋子, me 为 true
    113.     function oneStep(i, j, isWhite) {
    114.         context.beginPath();
    115.         context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
    116.         context.closePath();
    117.         var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
    118.         if (!isWhite) {
    119.             gradient.addColorStop(0, "#0A0A0A");
    120.             gradient.addColorStop(1, "#636766");
    121.         } else {
    122.             gradient.addColorStop(0, "#D1D1D1");
    123.             gradient.addColorStop(1, "#F9F9F9");
    124.         }
    125.         context.fillStyle = gradient;
    126.         context.fill();
    127.     }
    128.  
    129.     chess.onclick = function (e) {
    130.         if (over) {
    131.             return;
    132.         }
    133.         if (!me) {
    134.             return;
    135.         }
    136.         let x = e.offsetX;
    137.         let y = e.offsetY;
    138.         // 注意, 横坐标是列, 纵坐标是行
    139.         let col = Math.floor(x / 30);
    140.         let row = Math.floor(y / 30);
    141.         if (chessBoard[row][col] == 0) {
    142.             // 发送坐标给服务器, 服务器要返回结果
    143.             send(row, col);
    144.         }
    145.     }
    146.  
    147.     function send(row, col) {
    148.         let req = {
    149.             message: 'putChess',
    150.             userId: gameInfo.thisUserId,
    151.             row: row,
    152.             col: col
    153.         };
    154.  
    155.         websocket.send(JSON.stringify(req));
    156.     }
    157.  
    158.     // 之前 websocket.onmessage 主要是用来处理了游戏就绪响应. 在游戏就绪之后, 初始化完毕之后, 也就不再有这个游戏就绪响应了.
    159.     // 就在这个 initGame 内部, 修改 websocket.onmessage 方法, 让这个方法里面针对落子响应进行处理!
    160.     websocket.onmessage = function(event) {
    161.         console.log("[handlerPutChess] " + event.data);
    162.  
    163.         let resp = JSON.parse(event.data);
    164.         if (resp.message != 'putChess') {
    165.             console.log("响应类型错误!");
    166.             location.assign("game_hall.html")
    167.             return;
    168.         }
    169.  
    170.         // 先判定当前这个响应是自己落的子, 还是对方落的子.
    171.         if (resp.userId == gameInfo.thisUserId) {
    172.             // 自己落的子
    173.             oneStep(resp.col, resp.row, gameInfo.isWhite);
    174.         } else if (resp.userId == gameInfo.thatUserId) {
    175.             // 对手落的子
    176.             oneStep(resp.col, resp.row, !gameInfo.isWhite);
    177.         } else {
    178.             // 响应错误! userId 是有问题的!
    179.             console.log('[handlerPutChess] resp userId 错误!');
    180.             return;
    181.         }
    182.  
    183.         // 给对应的位置设为 1, 方便后续逻辑判定当前位置是否已经有子了.
    184.         chessBoard[resp.row][resp.col] = 1;
    185.  
    186.         // 交换双方的落子轮次
    187.         me = !me;
    188.         setScreenText(me);
    189.  
    190.         // 判定游戏是否结束
    191.         let screenDiv = document.querySelector('#screen');
    192.         if (resp.winner != 0) {
    193.             if (resp.winner == gameInfo.thisUserId) {
    194.                 // alert('你赢了!');
    195.                 screenDiv.innerHTML = '恭喜你，获胜了!';
    196.             } else if (resp.winner = gameInfo.thatUserId) {
    197.                 // alert('你输了!');
    198.                 screenDiv.innerHTML = '很遗憾，你输了!';
    199.             } else {
    200.                 alert("winner 字段错误! " + resp.winner);
    201.             }
    202.             // 回到游戏大厅
    203.             let room = document.querySelector(".buttons");
    204.             console.log(room)
    205.             let backButton = document.createElement("button");
    206.             backButton.innerHTML = '返回游戏大厅';
    207.             backButton.className = "backButton";
    208.             backButton.onclick = function() {
    209.                 location.assign('/game_hall.html');
    210.             }
    211.             room.appendChild(backButton);
    212.         }
    213.     }
    214. }
  • 相关阅读:
    计算机毕业设计（附源码）python租车信息管理系统
    9.WAL
    初识C语言
    Spring 更简单的读取和存储对象
    GNU-ncurses库简介
    Spark Windos模式
    C#面：XML与 HTML 的主要区别是什么
    MyBatis--逆向工程
    使用ESP8266构建家庭自动化系统
    数据结构之单链表
  • 原文地址：https://blog.csdn.net/qq_45058331/article/details/127845026