先搭好整体框架 

 private void sendResult(){ //向两名玩家返回结果}private void judge(){//判断两名玩家是否合法操作}private void sendMove(){ //向两个client公布信息}//入口函数@Overridepublic void run() {for(int i = 0;i<1000;i++){//先判断是否获取两条蛇的下一步操作if(nextStep()){ // 是否获取了两条蛇的下一步的操作judge();if(status.equals("playing")){//将每名玩家的操作广播给两名玩家，实现同步sendMove();}else{//向前端返回结果sendResult();break;}}else{//这里也要加锁 涉及到nextStep的读 防止边界情况 ，在超时的边界输入lock.lock();status = "finished";try{if(nextStepA == null && nextStepB == null){loser = "all";}else if(nextStepA == null){loser =  "A";}else{loser = "B";}     }finally {lock.unlock();}sendResult();break;// 表示整个游戏结束}}}
}

  private void sendAllMessage(String message){WebSocketServer.users.get(playerA.getId()).sendMessage(message);WebSocketServer.users.get(playerB.getId()).sendMessage(message);}private void sendResult(){ //向两名玩家返回结果//向本局的两名玩家分别广播JSONObject resp = new JSONObject();resp.put("event","result");resp.put("loser",loser);sendAllMessage(resp.toJSONString());}private void judge(){//判断两名玩家是否合法操作}private void sendMove(){ //向两个client公布信息lock.lock();try{JSONObject resp = new JSONObject();resp.put("event","move");resp.put("a_direction",nextStepA);resp.put("b_direction",nextStepB);//清空操作nextStepA = nextStepB = null;}finally {lock.unlock();}}

4.前端: 发送移动指令给后端

GameMap.js

add_listening_events() {this.ctx.canvas.focus();this.ctx.canvas.addEventListener("keydown", e => {let d = -1;if(e.key === 'w') d = 0;else if(e.key === 'd') d = 1;else if(e.key === 's') d = 2;else if(e.key === 'a') d = 3;// else if(e.key === 'ArrowUp') snake1.set_direction(0);// else if(e.key === 'ArrowRight') snake1.set_direction(1);// else if(e.key === 'ArrowDown') snake1.set_direction(2);// else if(e.key === 'ArrowLeft') snake1.set_direction(3);// 若移动了，发送给后端if(d >= 0) {this.store.state.pk.socket.send(JSON.stringify({event: "move",direction: d,}));}});}

5.后端处理接收移动的事件

private void move(int d){if(game.getPlayerA().getId().equals(user.getId())) {game.setNextStepA(d);}else if(game.getPlayerB().getId().equals(user.getId())){game.setNextStepB(d);}}//路由@OnMessagepublic void onMessage(String message, Session session) {// 从Client接收消息System.out.println("receive message!");//将字符串转换成json对象JSONObject data = JSONObject.parseObject(message);String event = data.getString("event");//防止空指针if("start-matching".equals(event)){startMatching();}else if("stop-matching".equals(event)){stopMatching();}else if("move".equals(event)){move(data.getInteger("direction"));}}

6前端接收后端发送过来的移动事件

设立GameMap的存储

src/store/pk.jsexport default {state: {...gameObject: null,},getters: {},mutations: {...updateGameObject(state, gameobject) {state.gameObject = gameobject;}},actions: {},modules: {}
}

GameMap存储

src/components/GameMap.vue

Pk页面：接收后端的移动事件

src/views/pk/PkIndexView.vue

7.前端：根据后端返回结果将死了的蛇变白

Snake.js

删除前端判断蛇的操作是否有效

export class Snake extends AcGameObject {...// 将蛇状态变为走下一步next_step() {...// 让蛇在下一回合长一个格子const k = this.cells.length;for(let i = k; i > 0; i--) {this.cells[i] = JSON.parse(JSON.stringify(this.cells[i - 1]));}// 删除前端判断蛇的操作是否有效}...
}

PkIndexView.vue

根据后端结果将失败的一方颜色变白

// 回调函数：接收到后端信息调用socket.onmessage = msg => {// 返回的信息格式由后端框架定义，django与spring定义的不一样const data = JSON.parse(msg.data);if(data.event === "start-matching") {...} else if(data.event === "move") {...} else if(data.event === "result") {console.log(data);const game = store.state.pk.gameObject;const [snake0, snake1] = game.snakes;if(data.loser === "all" || data.loser === "A") {snake0.status = "die";}if(data.loser === "all" || data.loser === "B") {snake1.status = "die";}}}

8.后端：将前端的裁判程序移到后端

注意，此地方有两处代码有迷惑性，分别是：
1. 在Player.java的getCells函数里为什么删除的是第0个元素
2. 在Game.java的check_valid函数里为什么不判断最后一个元素是否重合
以上两个答案在下方代码的关键处有解释

Cell.java

package com.kill9.backend.consumer.utils;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class Cell {private Integer x;private Integer y;
}

Player.java 

package com.kill9.backend.consumer.utils;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.ArrayList;
import java.util.List;@NoArgsConstructor
@AllArgsConstructor
@Data
public class Player {private Integer id;private Integer sx;private Integer sy;//每一次的指令private List steps;private boolean check_tail_increasing(int step){//检验当前回合蛇的长度是否增加if(step<=10) return true;return step % 3 == 1;}public List getCells(){List res = new ArrayList<>();int[] dx={-1,0,1,0},dy = {0,1,0,-1};int x = sx,y = sy;int step = 0;/*** 每一步移动都会把蛇头移动到下一个格子(注：蛇头有两个cell，详看前端Snake.js的next_step()与update_move()逻辑)，* 若当前长度增加，蛇头正好移到新的一个格子，剩下的蛇身长度不变，因此长度 + 1；若长度不增加，则删除蛇尾*/res.add(new Cell(x,y));for(int d: steps){x += dx[d];y += dy[d];res.add(new Cell(x,y));if(!check_tail_increasing(++step)){/*** 关键：* 为什么此处删除0呢，首先存储蛇身、且判定是否增加、且画蛇的逻辑此时还是在前端，我们只是将* 判断蛇是否撞到 墙和蛇身 移到后端。并且我们在后端保存的是是蛇头的x、y坐标和蛇身相对* 于上一步操作的方向，但是在我们做了第一个操作后蛇尾才是蛇头，意思就是res逆序才是蛇* 头到蛇尾的位置！*/res.remove(0);//删掉蛇尾}return  res;}}}

 Game.java

public class Game extends Thread {...private boolean check_valid(List cellsA, List cellsB) {int n = cellsA.size();Cell cell = cellsA.get(n - 1);// 如果是墙，则非法if(g[cell.x][cell.y] == 1) return false;// 遍历A除最后一个Cell/*** 关键：* 首先我在Player中已经解释getCells的函数返回的res是蛇尾到蛇头的位置。* 因此以下两个for循环分别判断的是蛇头是否和两条蛇的蛇身重合！* 那么为什么不用判断两个蛇头是否重合呢？可能是地图大小为13 * 14，* 两个蛇头的位置初始为(1, 1)和(11, 12)，两个蛇头的位置横纵之和分别为偶数* 和奇数，因此两个蛇头永远不会走到同一个格子！*/for(int i = 0; i < n - 1; i++) {// 和蛇身是否重合if(cellsA.get(i).x == cell.x && cellsA.get(i).y == cell.y) {return false;}}// 遍历B除最后一个Cellfor(int i = 0; i < n - 1; i++) {// 和B蛇身是否重合if(cellsB.get(i).x == cell.x && cellsB.get(i).y == cell.y) {return false;}}return true;}private void judge() {      // 判断两名玩家操作是否合法List cellsA = playerA.getCells();List cellsB = playerB.getCells();boolean validA = check_valid(cellsA, cellsB);boolean valibB = check_valid(cellsB, cellsA);if(!validA || !valibB) {status = "finished";if(!validA && !valibB) {loser = "all";} else if(!validA) {loser = "A";} else {loser = "B";}}}private void senAllMessage(String message) {...}private void sendMove() {   // 向两名玩家传递移动信息...}private void sendResult() {     // 向两名玩家发送游戏结果...}@Overridepublic void run() {...}
}

9.结果板的实现

pk信息存储类

src/store/pk.jsexport default {state: {...loser: "none",  // all、A、B},getters: {},mutations: {...updateLoser(state, loser) {state.loser = loser;}},actions: {},modules: {}
}

 ResultBoard.vue

src/components/ResultBoard.vue

Pk页面

src/views/pk/PkIndexView.vue

完善pk页面 对局中添加玩家头像，确认自己是哪条蛇

PlayGround.vue

对局回放

通过保存对局每个状态的信息实现对局的回放功能

backend
    pojo
        Record.java
    mapper
        RecordMapper.java 

创建数据库

Record.java

package com.kill9.backend.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.Date;@Data
@AllArgsConstructor
@NoArgsConstructor
public class Record {@TableId(type = IdType.AUTO)private Integer id;private Integer aId;private Integer aSx;private Integer aSy;private Integer bId;private Integer bSx;private Integer bSy;private String aSteps;private String bSteps;private String map;private String loser;@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")private Date createtime;
}

RecordMapper.java

package com.kill9.backend.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.kill9.backend.pojo.Record;
import org.apache.ibatis.annotations.Mapper;@Mapper
public interface RecordMapper extends BaseMapper {
}

WebSocketServer.java

注入RecordMapper，为了保存对局信息

@Component
// url链接：ws://127.0.0.1:3000/websocket/**
@ServerEndpoint("/websocket/{token}")  // 注意不要以'/'结尾
public class WebSocketServer {...private static UserMapper userMapper;public static RecordMapper recordMapper;...@Autowiredpublic void setRecordMapper(RecordMapper recordMapper) {WebSocketServer.recordMapper = recordMapper;}...}

 Player.java

将玩家的蛇的方向偏移量转化成String

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Player {...public String getStepsString() {StringBuilder res = new StringBuilder();for(int d : steps) {res.append(d);}return res.toString();}
}

Game.java

将对局信息保存至数据库

public class Game extends Thread {...private String getMapString() {StringBuilder res = new StringBuilder();for(int i = 0; i < rows; i++) {for(int j = 0; j < cols; j++) {res.append(g[i][j]);}}return res.toString();}private void saveToDataBase() {Record record = new Record(null,playerA.getId(),playerA.getSx(),playerA.getSy(),playerB.getId(),playerB.getSx(),playerB.getSy(),playerA.getStepsString(),playerB.getStepsString(),getMapString(),loser,new Date());WebSocketServer.recordMapper.insert(record);}private void sendResult() {     // 向两名玩家发送游戏结果...saveToDataBase();senAllMessage(resp.toJSONString());}...
}

 完成～～