五子棋
前言
这篇博客主要详细介绍我的五子棋项目的核心功能的实现细节，也就是详细介绍五子棋各个功能是如何实现前后端交互的。
由于该项目对数据要求做实时性的发送和接收，所以大部分的API都是基于websocket来实现的。
并且我会按照我在开发该项目时的思路来写这篇博客，比如：在开发一个匹配功能时，我会先约定好前后端的交互发送请求的接收响应的接口详情，然后就是编写前端和后端代码。
一、登录功能
功能详情：不支持游客，必须登录才能进行游戏。
思路分析:数据库有张用户表,记录着用户的信息,登录功能就是通过前端发送数据,然后在后端根根据用户名查表并且进行密码校验,考虑到该项目只是一个小游戏,所以没有对密码采用MD5+盐算法.
1.约定前后端交互接口
前端发送的http请求我设计这个样子：
后端处理完请求之后返回的响应，我设计成这个样子：
2.编写前端代码
这里解释一下，这里只是贴出了前端代码的核心内容，就是通过一个点击事件触发mysub()这个函数,然后给后端发送ajax请求.
function mysub(){
// 1.非空效验
var username = jQuery("#username");
var password = jQuery("#password");
if(username.val()==""){
alert("请先输入用户名！");
username.focus();
return;
}
if(password.val()==""){
alert("请先输入密码！");
password.focus();
return;
}
// 2.ajax 请求登录接口
jQuery.ajax({
url:"/user/login",
type:"POST",
data:{
"username":username.val(),"password":password.val()},
success:function(result){
if(result!=null && result.code==200 && result.data!=null){
// 登录成功
location.href = "game_hall.html";
// location.replace("/game_hall.html")
}else{
alert("抱歉登录失败，用户名或密码输入错误，请重试！");
}
}
});
}
3.后端代码
由于这是一个ssm项目,所以我先解释一下项目的目录结构:
这里我就贴出我controller层的一段代码:
@RequestMapping("/login")
public User login(String username, String password){
//参数非空校验
if (username == null || password == null){
AjaxResult.failed(-1,"登录失败",null);
}
//获取user表里username对应的密码
User user =userService.getUserByusername(username);
// if (user == null || !password.equals(user.getPassword())){
// return AjaxResult.failed(-1,"登录失败",null);
// }
//创建session会话
HttpSession session = request.getSession(true);
session.setAttribute(AppVariable.USER_SESSION_KEY,user);
//屏蔽敏感信息
user.setPassword(null);
// return AjaxResult.success("登录成功",user);
return user;
}
更多的细节,可以通过码云访问我的码云项目源代码
然后注册功能和游戏大厅页面获取登录用户信息功能区别都不大,就是普通的进行数据库的插入和查询操作,这里不再赘述了.
提一点,我这里使用AOP面向切面的思想对登录功能做了拦截器和统一数据返回格式:
拦截器类:
public class LoginInterceptor implements HandlerInterceptor {
/**
* 返回true,说明以登录
* 返回false:未登录 跳转到登录页面
*/
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession(false);
if(session != null && session.getAttribute(AppVariable.USER_SESSION_KEY)!=null){
//打印会话对象里的用户名
User user = (User) session.getAttribute(AppVariable.USER_SESSION_KEY);
System.out.println("拦截器,当前用户会话:"+user.getUsername());
return true;
}
response.sendRedirect("/login.html");
return false;
}
}
注册里拦截器并设置拦截路由:
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/**")
//静态页面
.excludePathPatterns("/login.html")
.excludePathPatterns("/css/**")
.excludePathPatterns("/img/**")
.excludePathPatterns("/js/**")
.excludePathPatterns("/register.html")
.excludePathPatterns("/TestAPI.html")
//接口
.excludePathPatterns("/user/login")
.excludePathPatterns("/user/reg");
}
}
统一数据返回格式:
自定义返回的数据格式:
public class AjaxResult {
private Integer code;
private String msg;
private Object data;
/**
* 成功的完成一次请求
* @param data
* @return
*/
public static AjaxResult success(Object data){
AjaxResult ajaxResult = new AjaxResult();
ajaxResult.setCode(200);
ajaxResult.setMsg("请求成功");
ajaxResult.setData(data);
return ajaxResult;
}
public static AjaxResult success(String msg,Object data){
AjaxResult ajaxResult = new AjaxResult();
ajaxResult.setCode(200);
ajaxResult.setMsg(msg);
ajaxResult.setData(data);
return ajaxResult;
}
/**
* 没有成功的返回一次请求
* @param code 根据不同的情况自定义 -1.-2
* @param msg 根据不同的情况自定义:用户名为空....
* @param data 根据不同的情况自定义:null
* @return
*/
public static AjaxResult failed(Integer code,String msg,Object data){
AjaxResult ajaxResult = new AjaxResult();
ajaxResult.setCode(code);
ajaxResult.setMsg(msg);
ajaxResult.setData(data);
return ajaxResult;
}
public static AjaxResult failed(Integer code,String msg){
AjaxResult ajaxResult = new AjaxResult();
ajaxResult.setCode(code);
ajaxResult.setMsg(msg);
return ajaxResult;
}
}
返回数据前对数据格式进行统一处理:
@ControllerAdvice
public class ResponseAdvice implements ResponseBodyAdvice {
@Autowired
ObjectMapper objectMapper;//用于处理字符串
/**
* 开关,为true才会执行beforeBodyWrite方法
* @param returnType
* @param converterType
* @return
*/
@Override
public boolean supports(MethodParameter returnType, Class converterType) {
return true;
}
/**
* 在response返回给前端之前会执行的方法,参数只关注body
* @param body
* @param returnType
* @param selectedContentType
* @param selectedConverterType
* @param request
* @param response
* @return
*/
@SneakyThrows
@Override
public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
//如果body已经被封装成AjaxResult了,直接返回
if(body instanceof AjaxResult){
return body;
}
//如果body是string类型,得使用jackson序列化
if(body instanceof String){
return objectMapper.writeValueAsString(AjaxResult.success(body));
}
//如果没被封装,就调用success方法封装一下
System.out.println("这里对响应进行了统一的封装处理");
return AjaxResult.success(body);
}
}
# 二、使用步骤
## 1.引入库
>代码如下（示例）：
```c
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
二.哈希表管理用户的会话和房间
使用了多张哈希表来管理userId和session对应的关系，roomId和room的对应关系，userId与room的对应关系，极大的简化的后序的开发。
三.基于Websocket连接开发的功能
1.匹配功能
功能详情: 在线用户通过"随机匹配",匹配到在线玩家进行五子棋对局.
思路分析:创建一系列的匹配队列,把根据分数梯段把触发"匹配功能"的用户放到同一个匹配队列里,然后把两个用户从队列里拿出来进行一句游戏。
队列具有"先进先出"的特性，这有就能简单实现“谁先来就开始游戏”的随机性。
当两名玩家比配成功之后，就安排两名玩家进入游戏。
1.约定前后端交互接口
2.前端代码：
创建websocket对象，点击事件触发send()函数给服务器发送‘’匹配请求‘’和"停止匹配请求",websocket.onmessage根据约定的前后端交互接口来处理逻辑。
```javascript
//在此处进行初始化websocket,并且实现前端的匹配逻辑
//此处的路径必须写作是 /findmatch,千万不要写作 /findmatch/
let websocketurl = 'ws://'+location.host+'/findmatch'//location.host根据浏览器的html页面获取到服务器的ip和端口
let websocket = new WebSocket(websocketurl)//ws://就是websocket协议名
//回调函数
websocket.onopen = function(){
console.log('[MatchAPI]连接成功')
}
websocket.onerror = function () {
console.log('[MatchAPI]出现异常')
}
//服务器
websocket.onclose = function(){
console.log('[MatchAPI]连接失败')
}
//监听页面关闭事件(前端页面关闭),在页面关闭(离开已经建立websocket连接的页面)之前,手动调用这里的websocket的close方法
window.onbeforeunload = function(){
websocket.close();
}
//重点实现,处理服务器返回的响应
websocket.onmessage = function(e){
//处理服务器返回的响应数据,这个响应就是针对:"开始匹配"/"停止匹配"来对应的
//解析得到的响应对象,返回的数据是一个JSON字符串,先解析成 js 对象
let resp = JSON.parse(e.data);
if(!resp.ok){
//ok不为true
//有新用户上上线,调用
if(resp){
console.log("有新用户上线/下线，调用top10（）");
top10();
return;
}
console.log("游戏大厅中接收到了失败响应" + resp.reason);
return;
}
//响应的三种情况
if(resp.message == 'startMatch'){
//开始匹配请求发送成功
console.log('进入匹配队列成功!');
//修改button标签内容为 正在匹配中...(点击停止)
matchButton.innerHTML='正在匹配中...(点击停止)';
}else if(resp.message == 'stopMatch'){
//停止匹配请求发送成功
console.log('退出匹配队列成功!');
//修改button标签内容为 开始匹配
matchButton.innerHTML = '开始匹配';
}else if(resp.message == 'matchSuccess'){
//已经匹配到对手
console.log('匹配到对手,进入游戏房间');
location.assign('/game_room.html');
// location.replace('/game_room.html')
}else if(resp.message == 'repeatConnection'){
//检查到多开
console.log('检测到多开!当前用户已经在其他设备上登录!');
location.assign('/login.html');
//使用replace,浏览器不会将页面入栈保存
// location.replace('/login.html')
}
else{
//这三种情况之外的情况,认为是异常的情况
console.log('收到了非法的响应! message='+resp.message);
}
}
//点击按钮,给服务器发送匹配请求
function send(){
//在触发 websocket 请求之前,先确认一下 websocket 连接是否正常
if(websocket.readyState == websocket.OPEN){
//当readyState处在OPNE状态,说明连接是正常的
//这里发送数据有两种可能: 1.开始匹配 2.停止匹配
if (matchButton.innerHTML == '开始匹配'){
//发送开始匹配的请求
console.log('开始匹配');
//发送json格式的请求
websocket.send(JSON.stringify(
{
message: 'startMatch',
}
));
}else if(matchButton.innerHTML == '正在匹配中...(点击停止)'){
//发送停止匹配的请求
console.log('停止匹配')
websocket.send(JSON.stringify(
{
message:'stopMatch',
}
));
}
}else{
//if没进入,到这里说明连接是不正常的
alert('当前您的连接已断开!请重新登录!');
location.assign('/login.html');
alert("")
}
}
3.后端代码：
后端代码比较多，不是核心的我就不贴了，我在这里描述一下逻辑:
匹配的核心是Match类，这个类里创建了匹配队列，扫描匹配队列的线程和匹配函数：
首先是创建匹配队列：
然后创建多线程持续扫描队列：调用handleMatch()方法
handleMatch()方法
总结：点击匹配的用户会被加入到匹配队列里，不同分段匹配队列全局只需要一份，spring项目支持多线程所以存在线程安全问题，使用synchronized，匹配队列有线程在一直扫描该队列，为了保证cpu资源不被浪费是用来wait和notify，当队列里玩家少于2时，线程不用继续扫描了，等待该队列添新的用户时唤醒线程继续扫描，当队列元素为偶数时，可以匹配出两名玩家，并且为他们创建游戏房间并返回匹配成功的响应。
具体源代码：码云项目源代码
2.游戏房间
功能需求：进行五子棋的游戏。
思路分析：进入游戏房间的用户可以进行五子棋对局，前端使用画canvasAPI画布画出棋盘，然后在二维坐标上画子。前端点击棋盘的二维坐标，给后端发送落子响应（row：哪行，col：那列）给的后端，后端根据请求来判断对局是否结结束，然后将响应返回给两个前端，前端在画子。
1.约定前后端交互接口
websocket连接
ws://127.0.0.1:8080/game
连接响应：
{
message: 'gameReady', // 游戏就绪
ok: true, // 是否成功.
reason: '', // 错误原因
roomId: 'abcdef', // 房间号. 用来辅助调试.
thisUserId: 1, // 玩家自己的 id
thatUserId: 2, // 对手的 id
whiteUser: 1, // 先手方的 id
}
落子请求：
{
message: 'putChess',
userId: 1,
row: 0,
col: 0
}
落子响应：
{
message: 'putChess',
userId: 1,
row: 0,
col: 0
}
2.前端页面
核心：用 onclick 来处理用户点击事件. 当用户点击的时候通过这个函数来控制绘制棋子.
前端匹配成功后跳转到game_room.html页面
chess.onclick = function (e) {
if (over) {
return;
}
if (!me) {
return;
}
let x = e.offsetX;
let y = e.offsetY;
// 注意, 横坐标是列, 纵坐标是行
let col = Math.floor(x / 30);
let row = Math.floor(y / 30);
if (chessBoard[row][col] == 0) {
// 发送坐标给服务器, 服务器要返回结果
send(row, col);
// 留到浏览器收到落子响应的时候再处理(收到响应再来画棋子)
// oneStep(col, row, gameInfo.isWhite);
// chessBoard[row][col] = 1;
}
}
在 initGame 之前, 处理的是游戏就绪响应, 在收到游戏响应之后, 就改为接收落子响应了.
me 变量用来表示当前是否轮到我落子. over 变量用来表示游戏结束.
websocket.onmessage = function (event) {
console.log('handlerPutChess: ' + event.data);
let response = JSON.parse(event.data);
if (response.message != 'putChess') {
console.log('响应类型错误!');
return;
}
// 1. 判断 userId 是自己的响应还是对方的响应,
// 以此决定当前这个子该画啥颜色的
if (response.userId == gameInfo.thisUserId) {
oneStep(response.col, response.row, gameInfo.isWhite);
} else if (response.userId == gameInfo.thatUserId) {
oneStep(response.col, response.row, !gameInfo.isWhite);
} else {
console.log('[putChess] response userId 错误! response=' + JSON.stringify(response));
return;
}
chessBoard[response.row][response.col] = 1;
me = !me; // 接下来该下个人落子了.
// 2. 判断游戏是否结束
if (response.winner != 0) {
// 胜负已分
if (response.winner == gameInfo.thisUserId) {
alert("你赢了!");
} else {
alert("你输了");
}
// 如果游戏结束, 则关闭房间, 回到游戏大厅.
location.assign('/game_hall.html')
}
// 3. 更新界面显示
setScreenText(me);
}
3后端：
先引入了Room和RoomManager类，Room类用来进行一局游戏RoomManager来管理Room。
Room类，在匹配成功和挑战成功创建。
RoomManager类，用来管理room
GameAPI类websocket连接，处理游戏房间的逻辑
在两名玩家成功跳转到game——room页面后，再将两名玩家安排进房间，且先连接到后端的玩家被设置为先手
handleTextMessage来处理前端的落子请求
putchess落子和判断胜负，然后将落子响应返回给前端
总结：游戏房间负责游戏进行，在匹配成功和挑战匹配之后，会创建room，在前端收到“gameReady”之后会跳转到game_room,这个时又会建立websocket连接，将玩家安排进房间里面，同时返回‘’gameReady‘’个前端，聊天功能的websocket连接也会用到这个“gameReady”。
具体源代码：码云项目源代码
3.挑战功能
功能需求：存在天梯积分top10排行榜，用户可以挑战排行榜上的在线用户，当然被挑战者也可以拒绝挑战。
思路分析：
当前挑战者是lisi，如果他想挑zahnsgan，点击“挑战”需要给zhangsan发送挑战申请：
zhangsan得能看到lisi的个人数据，然后选择接受/拒绝挑战
这就需要在点击“挑战”时，可以从前端获取到“挑战者”和“被挑战者”的信息，然后在后端将挑战请求转发给“被挑战者”，“被挑战者”的接受/拒绝也得通过后端转发给“挑战者”。
1.约定前后端交互接口
挑战者发出的请求
被挑战者受到的响应：
挑战者收到的响应：
2.前端代码
top10获取到分数前10的玩家，动态拼接前端标签。
function top10(){
jQuery.ajax({
type: 'get',
url: 'user/top10',
data:{
},
success: function(result){
//获取父标签scoreboard_list
let scoreboard_listDiv = document.querySelector('.scoreboard_list');
if(result!=null && result.code==200 && result.data.length>0){
// 清空父标签的子元素
scoreboard_listDiv.innerHTML = '';
//
for(var i= 0;i< result.data.length;i++){
//创建scoreboard_list_child标签
let scoreboard_list_childDiv = document.createElement('div');
// //标签设置class
scoreboard_list_childDiv.class = 'scoreboard_list_child';
//每一个玩家信息都在list里面
let usertop = result.data[i];
//判断用户当前的状态
let state = ''
if(usertop.state == 'no'){
state = '离线';
}else if(usertop.state == 'yes'){
state = '在线';
}else if(usertop.state == 'busy'){
state = '正在游戏中'
}
let userName = usertop.username;
let userState = usertop.state;
//拼标签
scoreboard_list_childDiv.innerHTML =' <div class="scoreboard_list_child">\n' +
' <div class="rank">'+(i+1)+'</div>'
+' <div class="username">'+usertop.username+'</div>'
+'<div class="score">'+usertop.score+'</div>'
+' <div class="state">'+state+'</div>'
+ ' <button onClick="myfun(' + usertop.userId + ', \'' + userName + '\', \'' + userState + '\');challenge();" class="click" style="color:rgb(255, 133, 127);">挑战Ta </button>\n'
+ '<div class="userid">'+usertop.userId+'</div>\n'+
' </div>';
//
//子标签插入到父标签
scoreboard_listDiv.appendChild(scoreboard_list_childDiv);
}
}else{
alert("用户信息异常!!!");
}
}
})
}
注意top10的调用时时机：
因为在游戏中的用户和离线的用户都不能被挑战，所以得确保积分榜上的用户数据是实时更新的，所以得在后端处理一下：当有用户在游戏大厅页面上下线时，当用户在进入/退出游戏页面时都调用一下top10，保证top10的数据是最新的
用户在游戏大厅上线
用户在游戏大厅下线
用户在游戏房间上线
用户在游戏大厅下线
前端判断调用top10
被挑战者接受挑战，挑战者跳转到游戏房间页面
被挑战者点击“接受挑战”会跳转到游戏房间页面
3后端代码
总结：挑战功能实际上是将两个与服务器websocket连接的玩家放入到同一个room里进行游戏，所以关键在于如何通过服务器把客户端的两个websocket连接的用户安排在一起，这就需要在发起挑战请求时就获取到挑战者和被挑战者的信息，这样在后端就可以通过userId，把两个用户的session关联在一起，就是在服务器与不同的前端存在大量的websocket连接下如何连接两个客户端的websocket连接。
具体源代码：码云项目源代码
4.人机对战
功能需求：可以挑战AI
思想分析：点击匹配按钮直接进入游戏房间，并且AI先手。
这里直接建立在ai游戏页面aigame的websocket连接，点击人机对战之后直接跳转ai游戏页面，AI先下手，人机的落子都在后端。
1.约定前后端交互接口
人机对战请求：
落子请求和响应
2.前端代码
前端注意以下over为true时不能在触发点击事件在棋盘上落子了。
3后端代码
AIGame里封装了人机对战的所有逻辑，包括：落子，打印棋盘，判断胜负，AI算生成落子坐标。
多线程环境下，每个玩家的人机对战得有独一无二的棋盘，不同的玩家之间不能相互影响，所以使用哈希表记录了每一个用户自己的AIGame
算法的用的是五元组和一个积分统统计表，该算法会计算出棋盘上每个空位子处的分数，分数越高说明能赢的概率就越大，因此会根据棋盘上已有棋子，在分数在高的空位上落子。
总结：双人对局的简化版，在后端要处理好AI落子，然后在后端生成落子请求多用putchess，AI先落子，有个细节要处理一下：由于玩家发送一个落子请求之后，前端得收到玩家落子响应和AI落子响应，而玩家获胜之后，AI可以不用在继续落子了。
具体源代码：码云项目源代码
5.聊天功能
功能需求：在游戏界面里实时聊天。
思想分析：就是弄一个websocket连接，然后后端在转发消息时，可以精准的找到发送方和接收方的session进行转发即可。
1.前后端接口交互
2.前端代码
3.后端代码
总结：为了使前端发送的数据跟完整：有发送方和接收方，使用了“gameReady”里的数据，在后端进行转发时，借助了onlineUserManager和 roomManager来找消息接收方的会话。
具体源代码：码云项目源代码