Spring Boot 游戏开发实战：实现游戏同步、结果页面与记录管理

修改 consumer/WebSocketServer.java 中的传参逻辑。

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

将游戏相关信息封装成 JSONObject 返回给客户端。

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.getMark());
// 直接传游戏信息给玩家 A 和玩家 B
respA.put("game", respGame);
respB.put("game", respGame);

2. 前端状态管理

在 store/pk.js 中更新 state 以接收游戏数据。

state: {
    socket: null,
    opponent_username: "",
    opponent_photo: "",
    status: "matching",
    game_map: null,
    a_id: 0, a_sx: 0, a_sy: 0,
    b_id: 0, b_sx: 0, b_sy: 0,
},
mutations: {
    updateGame(state, game) {
        state.game_map = 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;
    },
    // ... other mutations
}

在 PkindexView.vue 中提交状态更新。

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

3. 实现游戏同步

游戏对战涉及两个客户端棋盘和一个云端棋盘，需实现云端与客户端的同步。

3.1 多线程处理

为避免阻塞主线程，Game 类继承 Thread，每个对局单独开启新线程。

consumer/utils/Game.java

public class Game extends Thread {
    @Override
    public void run() {
        super.run();
    }
}

在 WebSocketServer.java 中启动线程。

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

3.2 线程同步锁

使用 ReentrantLock 保护共享变量 nextStepA 和 nextStepB 的读写。

private Integer nextStepA = null;
private Integer nextStepB = null;
private ReentrantLock lock = new ReentrantLock();

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

3.3 后端逻辑与等待机制

设置最长等待时间为 5s，若超时未收到操作则判定失败。读取前需 sleep 200ms 以匹配前端操作频率。

private boolean nextStep() {
    try {
        Thread.sleep(200);
    } catch (InterruptedException e) {
        throw new RuntimeException(e);
    }
    for (int i = 0; i < 5; i++) {
        try {
            Thread.sleep(1000);
            lock.lock();
            try {
                if (nextStepA != null && nextStepB != null) {
                    playerA.getSteps().add(nextStepA);
                    playerB.getSteps().add(nextStepB);
                    return true;
                }
            } finally {
                lock.unlock();
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
    return false;
}

private void sendMove() {
    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();
    }
}

private void sendResult() {
    JSONObject resp = new JSONObject();
    resp.put("event", "result");
    resp.put("loser", loser);
    sendAllMessage(resp.toJSONString());
}

@Override
public void run() {
    for (int i = 0; i < 1000; i++) {
        if (nextStep()) {
            judge();
            if ("playing".equals(status)) {
                sendMove();
            } else {
                sendResult();
                break;
            }
        } else {
            status = "over";
            lock.lock();
            try {
                if (nextStepA == null && nextStepB == null) {
                    loser = "all";
                } else if (nextStepA == null) {
                    loser = "A";
                } else {
                    loser = "B";
                }
            } finally {
                lock.unlock();
            }
            sendResult();
            break;
        }
    }
}

3.4 碰撞检测

蛇的死亡判断移至后端。定义 Cell 类存储身体部分，在 Player 类中生成身体列表，并在 Game 类中判断撞墙、撞自己或撞对手。

consumer/utils/Player.java

public List<Cell> getCells() {
    List<Cell> res = new ArrayList<>();
    int[][] fx = {{-1, 0}, {0, 1}, {1, 0}, {0, -1}};
    int x = sx, y = sy;
    res.add(new Cell(x, y));
    int step = 0;
    for (int d : steps) {
        x += fx[d][0];
        y += fx[d][1];
        res.add(new Cell(x, y));
        if (!check_tail_increasing(++step)) {
            res.remove(0);
        }
    }
    return res;
}

consumer/utils/Game.java

private boolean check_valid(List<Cell> cellsA, List<Cell> cellsB) {
    int n = cellsA.size();
    Cell cell = cellsA.get(n - 1);
    if (mark[cell.x][cell.y]) return false;
    for (int i = 0; i < n - 1; i++) {
        if (cellsA.get(i).x == cell.x && cellsA.get(i).y == cell.y) return false;
    }
    for (int i = 0; i < n - 1; i++) {
        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 validB = check_valid(cellsB, cellsA);
    if (!validA || !validB) {
        status = "over";
        if (!validA && !validB) loser = "all";
        else if (!validA) loser = "A";
        else loser = "B";
    }
}

4. 前端交互与结果展示

前端监听按键发送移动指令，并处理后端返回的移动和结果事件。

scripts/GameMap.js

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;
    if (d >= 0) {
        this.store.state.pk.socket.send(JSON.stringify({ event: "move", direction: d }));
    }
});

consumer/WebSocketServer.java

@OnMessage
public void onMessage(String message, Session session) {
    JSONObject data = JSONObject.parseObject(message);
    String event = data.getString("event");
    if ("move".equals(event)) {
        int d = data.getInteger("direction");
        move(d);
    }
}

public void move(int direction) {
    if (game.getPlayerA().getId().equals(user.getId())) {
        game.setNextStepA(direction);
    } else if (game.getPlayerB().getId().equals(user.getId())) {
        game.setNextStepB(direction);
    }
}

views/pk/PkindexView.vue

socket.onmessage = msg => {
    const data = JSON.parse(msg.data);
    if (data.event === "move") {
        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") {
        const game = store.state.pk.gameObject;
        const [snake0, snake1] = game.snakes;
        if (data.loser === "all" || data.loser === "A") snake0.status = "dead";
        if (data.loser === "all" || data.loser === "B") snake1.status = "dead";
        store.commit("updateLoser", data.loser);
    }
};

4.1 结果面板

创建 components/ResultBoard.vue 显示胜负信息。

<template>
<div class="result-board">
    <div class="result-board-text draw" v-if="$store.state.pk.loser == 'all'">Draw</div>
    <div class="result-board-text lose" v-else-if="$store.state.pk.loser =='A' && $store.state.pk.a_id == $store.state.user.id">Lose</div>
    <div class="result-board-text lose" v-else-if="$store.state.pk.loser =='B' && $store.state.pk.b_id == $store.state.user.id">Lose</div>
    <div class="result-board-text win" v-else>WIN</div>
    <div class="result-board-btn"><button type="button" class="btn">Try again</button></div>
</div>
</template>

点击重试按钮将状态重置为 matching，清空 loser 信息。

5. 游戏记录存储

设计数据库表存储对战录像，包含双方 ID、位置、步骤、地图状态及结果。

RecordMapper.java

package com.kob.backend.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.kob.backend.pojo.Record;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface RecordMapper extends BaseMapper<Record> {}

保存记录逻辑：

private void saveRecord() {
    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);
}

总结

本文实现了完整的在线游戏同步逻辑、结果展示页面与记录存储机制。通过多线程与锁机制保证了服务端状态的并发安全，结合 WebSocket 实现了低延迟的双向通信，并通过数据库持久化了对战数据，为构建高质量的在线游戏系统提供了基础架构支持。