网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块

网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块

  • 一、约定前后端交互接口
    • 1. 建立连接接口
    • 2. 针对落子的请求和响应
  • 二、实现前端页面
  • 三、实现后端
    • 1. 当用户进入房间,更新用户状态 OnlineUserManager
    • 2. 用户进入房间,服务器会怎么做

一、约定前后端交互接口

1. 建立连接接口

网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第1张图片

2. 针对落子的请求和响应

网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第2张图片

二、实现前端页面

网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第3张图片
网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第4张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏房间title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_room.css">
head>
<body>
    <div class="nav">五子棋对战div>
    <div class="container">
        <div>
            
            <canvas id="chess" width="450px" height="450px">

            canvas>
            
            <div id="screen"> 等待玩家连接中... div>
        div>
    div>
    <script src="js/script.js">script>
body>
html>

三、实现后端

1. 当用户进入房间,更新用户状态 OnlineUserManager

package com.example.java_gobang.game;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketSession;

import java.util.HashMap;
import java.util.concurrent.ConcurrentHashMap;

@Component
public class OnlineUserManager {
    // 这个哈希表就用来表示当前用户在游戏大厅在线状态.
    private ConcurrentHashMap<Integer, WebSocketSession> gameHall = new ConcurrentHashMap<>();
    // 这个哈希表就用来表示当前用户在游戏房间的在线状态.
    private ConcurrentHashMap<Integer, WebSocketSession> gameRoom = new ConcurrentHashMap<>();

    public void enterGameHall(int userId, WebSocketSession webSocketSession) {
        gameHall.put(userId, webSocketSession);
    }

    public void exitGameHall(int userId) {
        gameHall.remove(userId);
    }

    public WebSocketSession getFromGameHall(int userId) {
        return gameHall.get(userId);
    }

    public void enterGameRoom(int userId, WebSocketSession webSocketSession) {
        gameRoom.put(userId, webSocketSession);
    }

    public void exitGameRoom(int userId) {
        gameRoom.remove(userId);
    }

    public WebSocketSession getFromGameRoom(int userId) {
        return gameRoom.get(userId);
    }
}

2. 用户进入房间,服务器会怎么做

网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第5张图片
网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第6张图片
网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(四)对战模块_第7张图片

你可能感兴趣的:(项目,java,spring,spring,boot)