实现微服务：匹配系统（中）

最新推荐文章于 2024-05-31 10:46:10 发布

SMnK

最新推荐文章于 2024-05-31 10:46:10 发布

阅读量538

点赞数

分类专栏： Mac springboot vue 文章标签： java 开发语言

本文链接：https://blog.csdn.net/weixin_49884716/article/details/127949262

版权

springboot 同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

vue

16 篇文章 0 订阅

订阅专栏

Mac

4 篇文章 0 订阅

订阅专栏

1、同步两个玩家的位置思路解析

2、实现了三个棋盘的同步原理

3、初始化一下我们的playerAplayerB

1、同步两个玩家的位置思路解析

除了地图同步以外、我们还需要同步两个玩家的位置
同步玩家的位置我们可以标记一下、至于谁在A谁在B我们需要在云端确定
确定完之后我们会把每一个玩家的位置传给前端，我们可以傻瓜式的确定a在左下角b在
右上角、我们在存地图的时候需要存一下玩家的id和位置
在game这个类里我们需要加一个player类来维护玩家的位置信息
一般开发思路需要用什么定义什么、先定义需要用到的各种函数
有参构造函数无参构造函数、存一下每个玩家每一次的指令是什么

2、实现了三个棋盘的同步原理

现在有三个棋盘、还有一个在云端
有两个浏览器就是有两个client、状态同步的机制
client向云端发送消息表示这个蛇动了一下、当服务器接收到两个蛇的移动之后
服务器就会把两个蛇移动的信息分别返回给Client1client2
同步给两名玩家、这样我们就实现了三个棋盘的同步

3、初始化一下我们的playerAplayerB

首先我们构造map的时候传入两名玩家的userid、初始化一下我们的playerAplayerB
为了需要访问到我们的player、我们需要写两个函数
后端就可以把两个玩家的信息传过去、前端做出相应修改

4、什么是线程为什么要用多线程？

Game不能作为单线程来处理、线程：一个人干就是单线程，两个人干就是多线程
涉及到两个线程之间的通信以及加锁的问题
我们需要先把game变成一个支持多线程的类
就变成多线程了、我们需要实现thread类的一个入口函数
alt+insert就可以实现、重载run函数
start函数就是thread函数的一个api、可以另起一个线程来执行这个函数
为了方便我们需要先把我们的game存放到这个类里面
我们的线程就要一步一步等待下一步操作的操作
这里设计到两个线程同时读写一个变量、这样就会有读写冲突、涉及到顺序问题

5、如何去实现等待两名玩家输入

两名玩家都输入我们就进行下一步
如果超过一定时间之后两名玩家还没有输入的话
我们要结束这个操作、告诉我们哪个玩家没有输入
就输了、可以用sleep函数、如果是正在进行中的话
我们应该将这一步操作广播给两位玩家、需要同步一下
我们从服务器分别接收到两名玩家的输入之后、需要将两名玩家的输入分别广
播给两个人、比如说我们两个玩家，同时都向服务器发送了请求
c1不知道c2的操作s向c1c2广播操作

6、前端向后端发消息

当我们移动的时候、之前我们是在gamemap里面判断的
两个线程同时操纵一个变量、至少有一个变量是写的话那就需要加锁子
前端写完之后后端需要接收到这个请求
gameobject需要存下来才能访问到蛇、每一个新的游戏都会new一个新的类
都会开一个新的线程

7、在数据库中创建表record

record表用来记录每局对战的信息

表中的列：

id: int
a_id: int
a_sx: int
a_sy: int
b_id: int
b_sx: int
b_sy: int
a_steps: varchar(1000)
b_steps: varchar(1000)
map: varchar(1000)
loser: varchar(10)
createtime: datetime

联机对战：同步玩家的操作

文件结构

backend
consumer
utils
Cell.java
Player.java

src
components
ResultBoard.vue

1.后端：同步玩家位置信息

玩家类:需要联机对战肯定就有玩家，因此建立玩家类

package com.kill9.backend.consumer.utils;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Player {
    private Integer id;
    private Integer sx;
    private Integer sy;
    //每一次的指令
    private List<Integer> steps;
}

游戏类

一场游戏包含两名玩家

 private final Player playerA,playerB;


    final int[][] g;

    public Game(
            Integer rows,
            Integer cols,
            Integer innerWallsCount,
            Integer idA,
            Integer idB)
    {
        this.rows = rows;
        this.cols = cols;
        this.innerWallsCount = innerWallsCount;
        this.g = new int[rows][cols];
        playerA = new Player(idA,rows-2,1,new ArrayList<>());
        playerB = new Player(idB,1,cols-2,new ArrayList<>());

    }

public Player getPlayerA() {
        return playerA;
    }

    public Player getPlayerB() {
        return playerB;
    }

websocket操作类

在匹配完之后，初始化地图时，将玩家传给Game构造函数

Game game = new Game(13,14,20,a.getId(),b.getId());
            game.createMap();

            //封装游戏信息
            JSONObject respGame = new JSONObject();
            respGame.put("a_id",game.getPlayerA().getId());
            respGame.put("a_sx",game.getPlayerA().getSx());
            respGame.put("a_sy",game.getPlayerA().getSy());
            respGame.put("b_id",game.getPlayerB().getId());
            respGame.put("b_sx",game.getPlayerB().getSx());
            respGame.put("b_sy",game.getPlayerB().getSy());
            respGame.put("map",game.getG());
 respA.put("game",respGame);
respB.put("game",respGame);

2.前端：接收两名玩家位置以及地图信息

pk类的存储

import ModuleUser from './user'
export default {
    state: {
        socket:null ,//ws连接
        opponent_username:"",
        opponent_photo:"",
        status:"matching",matching表示匹配界面，playing表示对战界面
        gamemap:null,
        a_id:0,
        a_sx:0,
        a_sy:0,
        b_id:0,
        b_sx:0,
        b_sy:0,
    },
    getters: {

    },
    mutations: {
        updateSocket(state,socket){
            state.socket = socket;
        },
        updateOpponent(state,opponent){
            state.opponent_username = opponent.username,
            state.opponent_photo = opponent.photo;
        },
        updateStatus(state,status){
            state.status = status;
        },
        updateGame(state,game){
            state.gamemap = game.map;
            state.a_id = game.a_id;
            state.a_sx = game.a_sx;
            state.a_sy = game.a_sy;
            state.b_id = game.b_id;
            state.b_sx = game.b_sx;
            state.b_sy = game.b_sy;
        }
    },
    actions: {


    },
    modules: {
        user: ModuleUser,
    }
}

pk界面

修改pk界面的接收地图相关参数

export default {
    ...

    setup() {
        ...

        onMounted(() => {
            ...

            // 回调函数：接收到后端信息调用
            socket.onmessage = msg => {
                // 返回的信息格式由后端框架定义，django与spring定义的不一样
                const data = JSON.parse(msg.data);
                if(data.event === "start-matching") {
                    ...

                    setTimeout(() => {
                        store.commit("updateStatus", "playing");
                    }, 200);

                    store.commit("updateGame", data.game);
                }
            }

            ...
        });

        ...
    }
}

3.后端：一局游戏的逻辑

Webscoket操作类

将Game作为一局游戏的一个线程，使Game线程启动

 private Game game = null;

    ...

    private void startMatching() {
        System.out.println("start matching!");
        matchPool.add(this.user);

        while(matchPool.size() >= 2) {
            ...

            game.createMap();
            // 一局游戏一个线程，会执行game类的run方法
            game.start();

            users.get(a.getId()).game = game;
            users.get(b .getId()).game = game;

            ...
        }
    }

游戏类

一局游戏的操作，首先执行run方法。只有读写、写写有冲突，此处关于nextStep，我们会接收前端的nextStep输入或 bots代码的输入，而且会频繁的读，因此需要加锁。

Game.java

package com.kill9.backend.consumer.utils;

import java.util.ArrayList;
import java.util.Random;
import java.util.concurrent.locks.ReentrantLock;

//支持多线程
public class Game extends  Thread{
    private final Integer rows;
    private final Integer cols;
    private final Integer innerWallsCount;

    private  final static int[] dx = {-1,0,1,0},dy={0,1,0,-1};

    private final Player playerA,playerB;
    private Integer nextStepA = null;
    private Integer nextStepB = null;
    //定义锁
    private ReentrantLock lock = new ReentrantLock();


    final int[][] g;

    public Game(
            Integer rows,
            Integer cols,
            Integer innerWallsCount,
            Integer idA,
            Integer idB)
    {
        this.rows = rows;
        this.cols = cols;
        this.innerWallsCount = innerWallsCount;
        this.g = new int[rows][cols];
        playerA = new Player(idA,rows-2,1,new ArrayList<>());
        playerB = new Player(idB,1,cols-2,new ArrayList<>());

    }
    public int[][] getG(){
        return g;
    }

    public Player getPlayerA(){
        return playerA;
    }
    public Player getPlayerB(){
        return playerB;
    }

    public void setNextStepA(Integer nextStepA){
        //上锁
        lock.lock();
        try{
            this.nextStepA = nextStepA;
        }finally {
            lock.unlock();
        }

    }
    public void setNextStepB(Integer nextStepB){
        //上锁
        lock.lock();
        try{
            this.nextStepB = nextStepB;
        }finally {
            lock.unlock();
        }
    }
    //判断连通性 flood fill
    private boolean check_connectivity(int sx,int sy,int tx,int ty){
        if(sx==tx&&sy==ty) return true;
        g[sx][sy] = 1;
        for(int i = 0;i<4;i++){
            int x = sx+dx[i],y = sy+dy[i];
            if(x<this.rows && x>=0 && y<this.cols && y>=0 && g[x][y]==0){
                if(check_connectivity(x,y,tx,ty)){
                    //恢复原来的数组
                    g[sx][sy] = 0;
                    return true;
                }
            }
        }
        //恢复现场
        g[sx][sy] = 0;
        return  false;
    }
    //画地图
    private  boolean draw(){
        //初始化
        for(int i = 0;i<this.rows;i++){
            for(int j = 0;j<this.cols;j++){
                g[i][j] = 0;
            }
        }

        //给四周加墙
        for(int r = 0;r<this.rows;r++){
            g[r][0] = g[r][this.cols-1] = 1;
        }
        for(int c = 0;c<this.cols;c++){
            g[0][c] = g[this.rows-1][c] = 1;
        }
        Random random = new Random();
        for(int i = 0;i<this.innerWallsCount/2;i++){
            for(int j = 0;j<1000;j++){
                int r = random.nextInt(this.rows);
                int c = random.nextInt(this.cols);

                //画过的不画
                if(g[r][c]==1||g[this.rows-1-r][this.cols-1-c]==1) continue;
                g[r][c] = g[this.rows-1-r][this.cols-1-c] = 1;
                break;
            }
        }
        return check_connectivity(this.rows-2,1,1,this.cols-2);
    }

    public void createMap(){
        for(int i = 0;i<1000;i++){
            if(draw()) break;
        }
    }

    private boolean nextStep(){
        //每秒五步操作，因此第一步操作是在200ms后判断是否接收到输入。并给地图初始化时间
        //如果两名玩家操作非常快 比如1s操作了50次，但是返回前端，每动完一格之后才会去判断下一步，
        //如果我们在动一格的期间获取了很多下一步的操作的话，我们就会把中间结果都覆盖掉，在前端渲染的时候就会遗漏一些步数
        //所以在进行下一步操作时先睡200ms  ，因为200ms才能走一格，如果200ms内多输入了很多，它之只会留最后一步，就会 覆盖掉
        try {
            Thread.sleep(200);
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }
        //等待两名玩家的下一步操作，上锁
            for(int i = 0;i<5;i++){
                //此循环循环了5000ms，也就是5s，前端是一秒移动5步，
                //后端接收玩家键盘输入是5s内玩家的一个输入，若在一方先输入，
                //一方还未输入，输入的一方多此操作，以最后一次为准。
                try {
                    Thread.sleep(1000);
                    //等待玩家输入
                    lock.lock();//读玩家输入要上锁
                    try{
                        if(nextStepA != null && nextStepB != null){
                            playerA.getSteps().add(nextStepA);
                            playerB.getSteps().add(nextStepB);
                            return true;
                        }
                    }finally {
                        //由于报异常的话 可能不会解锁，所以要在finally解锁
                        lock.unlock();
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            return false;
    }
    //入口函数
    @Override
    public void run() {
        super.run();
    }
}

先搭好整体框架

 private void sendResult(){ //向两名玩家返回结果
        
    }
    private void judge(){//判断两名玩家是否合法操作
        
    }
    private void sendMove(){ //向两个client公布信息
        
    }
    //入口函数
    @Override
    public 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);
        }

    }

    //路由
    @OnMessage
    public 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.js

export default {
  state: {
    ...

    gameObject: null,
  },
  getters: {
  },
  mutations: {
    ...

    updateGameObject(state, gameobject) {
        state.gameObject = gameobject;
    }
  },
  actions: {

  },
  modules: {
  }
}

GameMap存储

src/components/GameMap.vue

<template>
    ...
</template>

<script>
...

export default {
    setup() {
        ...

        onMounted(() => {
            store.commit(
                "updateGameObject",
                new GameMap(canvas.value.getContext('2d'), parent.value, store)
            );
        });

        ...
    }
}
</script>

<style scoped>

...

</style>

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

src/views/pk/PkIndexView.vue

<template>
    ...
</template>

<script>
...

export default {
    components: {
        PlayGround,
        MatchGround,
    },
    setup() {
        ...

        onMounted(() => {
            ...

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

            ...
        });
        onUnmounted(() => {
            ...
        });
    }
}
</script>

<style scoped>

</style>

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<Integer> steps;
    private boolean check_tail_increasing(int step){//检验当前回合蛇的长度是否增加
        if(step<=10) return true;
        return step % 3 == 1;
    }

    public List<Cell> getCells(){
        List<Cell> 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<Cell> cellsA, List<Cell> 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除最后一个Cell
        for(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<Cell> cellsA = playerA.getCells();
        List<Cell> 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() {     // 向两名玩家发送游戏结果
        ...
    }

    @Override
    public void run() {
        ...
    }
}

9.结果板的实现

pk信息存储类

src/store/pk.js

export default {
  state: {
    ...
    loser: "none",  // all、A、B
  },
  getters: {
  },
  mutations: {
    ...
    updateLoser(state, loser) {
        state.loser = loser;
    }
  },
  actions: {

  },
  modules: {
  }
}

ResultBoard.vue

src/components/ResultBoard.vue
<template>
    <div class="result-board">
        <div class="result-board-text" v-if="$store.state.pk.loser == 'all'">
            Draw
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser == 'A' && $store.state.pk.a_id == $store.state.user.id">
            Lose
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser == 'B' && $store.state.pk.b_id == $store.state.user.id">
            Lose
        </div>
        <div class="result-board-text" v-else>
            Win
        </div>

        <div class="result-board-btn">
            <button @click="restart" type="button" class="btn btn-warning btn-lg">
                再来一局
            </button>
         </div>

    </div>

</template>
<script>
import {useStore} from 'vuex';

export default{

    setup(){
        const store = useStore();
        const restart = () =>{
            store.commit("updateStatus","matching");
            store.commit("updateOpponent",{
                username:"我的对手",
                photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })
        
            store.commit("updateLoser","none");
        }
        return {
            restart,
        }
    }
}
</script>
<style scoped>
div.result-board{
    height: 30vh;
    width: 30vw;
    background-color:rgba(191, 227, 241,0.5);
    position: absolute;
    top: 40vh;
    left: 35vw;

}
div.result-board-text{
    text-align: center;
    color: white;
    font-size: 50px;
    font-weight: 600;
    font-style: italic;
    padding-top: 5vh;

}
div.result-board-btn{ 
    text-align: center;
    padding-top: 7vh;
}
</style>

Pk页面

src/views/pk/PkIndexView.vue

<template>
    ...

    <ResultBoard v-if="$store.state.pk.loser != 'none'" />
</template>

<script>

...

import ResultBoard from '../../components/ResultBoard.vue';

...

export default {
    components: {
        ...

        ResultBoard,
    },
    setup() {

        ...

        onMounted(() => {

            ...

            // 回调函数：接收到后端信息调用
            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") {
                    ...

                    store.commit("updateLoser", data.loser);
                }
            }

            ...
        });
        ...
    }
}
</script>

<style scoped>

</style>

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

PlayGround.vue

<template>
    <div class="playground">
        <div class="user_b" v-if="$store.state.pk.b_id == $store.state.user.id">
        <img :src="$store.state.user.photo" alt="">
        <p>{{$store.state.user.username}}</p>
        </div>
        <div class="user_b" v-if="$store.state.pk.b_id != $store.state.user.id">
        <img :src="$store.state.pk.opponent_photo" alt="">
        <p>{{$store.state.pk.opponent_username}}</p>
        </div>
        <GameMap/>
        <div class="user_a" v-if="$store.state.pk.a_id != $store.state.user.id">
        <img :src="$store.state.pk.opponent_photo" alt="">
        <p>{{$store.state.pk.opponent_username}}</p>
        </div>
        <div class="user_a" v-if="$store.state.pk.a_id == $store.state.user.id">
        <img :src="$store.state.user.photo" alt="">
        <p>{{$store.state.user.username}}</p>
        </div>
    </div>
</template>

<script>
import GameMap from './GameMap';

export default{
    components:{
        GameMap,
    }
}

</script>

<style scoped>

div.playground{
    width:60vw;
    height: 70vh;
    margin: 70px auto;
}
.user_a > img{
        width: 10vh;
        border-radius: 40%;
    }
    .user_a{
        margin-left: 10%;
    }
    .user_b > img{
        width: 10vh;
        border-radius: 40%;
    }
    .user_b{
        margin-left: 80%;
    }
    p{
        margin-left:27px ;
    }
</style>

对局回放

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

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<Record> {
}

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;

    ...

    @Autowired
    public 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());
    }

    ...
}