1.コア機能
テクノロジー:
フロントエンド:バックHTML + CSS + JavaScript + AJAX
エンド:SpringBoot + MyBatis + WebSocket + MySQL 5.7
2. 実証効果
3. プロジェクトを作成する
4. データベース設計
create database if not exists java_gobang;
use java_gobang;
drop table if exists user;
create table user (
userId int primary key auto_increment,
username varchar(50) unique,
password varchar(255),
score int, -- 天梯积分
totalCount int, -- 比赛总场数
winCount int -- 获胜场数
);
insert into user values(null,"cm","$2a$10$Bs4wNEkledVlGZa6wSfX7eCSD7wRMO0eUwkJH0WyhXzKQJrnk85li",1000,0,0);
5. 設定ファイル
application.yml
debug: true
logging:
level:
com:
example: DEBUG
example.onlinemusic.mapper: debug
druid:
sql:
Statement: DEBUG
root: INFO
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
password: root
url: jdbc:mysql://localhost:3306/java_gobang?characterEncoding=utf8&serverTimezone=UTC
username: root
mybatis:
mapper-locations: classpath:mybatis/**Mapper.xml
server:
port: 8081
mybatis.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.java_gobang.mapper.UserMapper">
</mapper>
6. ユーザーモジュール
6.1 ログインの実装
6.1.1 フロントエンドとバックエンドの対話インターフェース
設計するたびに、最初にフロントエンドとバックエンドのインタラクティブ インターフェイスを設計する必要があります。
请求
POST /login HTTP/1.1
{
username: "",password: ""}
响应
HTTP/1.1 200 OK
Content-Type: application/json
{
userId: 1,
username: 'cm',
score: 1000,
totalCount: 0,
winCount: 0
}
6.1.2 モデル層
ユーザー クラスを作成する
@Data
public class User {
private int userId;
private String username;
private String password;
private int score;
private int totalCount;
private int winCount;
}
6.1.3 マッパーレイヤー
@Mapper アノテーションを忘れないでください
@Mapper
public interface UserMapper {
//往数据里插入一个用户,用于注册功能
int insert(User user);
//根据用户名,来查询用户的详细信息,用于登录功能
User selectByName(String username);
// 总比赛场数 + 1, 获胜场数 + 1, 天梯分数 + 30
int userWin(int userId);
// 总比赛场数 + 1, 获胜场数 不变, 天梯分数 - 30
int userLose(int userId);
}
6.1.4 xml 层
resources の下に mybatis パッケージを作成し、UserMapper.xml を作成します。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.java_gobang.mapper.UserMapper">
<!-- 新增用户 -->
<insert id="insert">
insert into user values (null,#{username},#{password},1000,0,0);
</insert>
<!-- 根据用户名查找用户用户 -->
<select id="selectByName" resultType="com.example.java_gobang.model.User">
select * from user where username=#{username};
</select>
<update id="userWin">
update user set totalCount = totalCount + 1, winCount = winCount + 1, score = score + 30
where userId = #{userId}
</update>
<update id="userLose">
update user set totalCount = totalCount + 1, score = score - 30
where userId = #{userId}
</update>
</mapper>
6.1.5 サービス層
マッパーレイヤーのメソッドを呼び出す
@Service
public class UserService {
@Resource
private UserMapper userMapper;
//往数据里插入一个用户,用于注册功能
public int insert(User user){
return userMapper.insert(user);
}
//根据用户名,来查询用户的详细信息,用于登录功能
public User selectByName(String username){
return userMapper.selectByName(username);
}
// 总比赛场数 + 1, 获胜场数 + 1, 天梯分数 + 30
public int userWin(int userId){
return userMapper.userWin(userId);
}
// 总比赛场数 + 1, 获胜场数 不变, 天梯分数 - 30
public int userLose(int userId){
return userMapper.userLose(userId);
}
}
6.1.6 コントローラ層
セッション文字列の保存に使用
@RestController
public class UserController {
@Autowired
private UserService userService;
@Resource
private BCryptPasswordEncoder bCryptPasswordEncoder;
@RequestMapping("/login")
@ResponseBody
public Object login(String username, String password, HttpServletRequest request){
// 查询用户是否在数据库中存在
User user = userService.selectByName(username);
// 没有查到
if(user == null) {
System.out.println("登录失败!");
return new User();
}else {
//查到了,但密码不一样
if(!bCryptPasswordEncoder.matches(password,user.getPassword())) {
return new User();
}
// 匹配成功,创建 session
request.getSession().setAttribute(Constant.USER_SESSION_KEY,user);
return user;
}
}
}
6.1.7 BCrypt によるパスワード暗号化
<!-- security依赖包 （加密）-->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
</dependency>
スタートアップ クラスにアノテーションを追加する
@SpringBootApplication(exclude = {
org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class})
6.1.8 インターセプターを追加する
設定パッケージを作成
LoginInterceptor クラス
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession(false);
if (session != null && session.getAttribute(Constant.USER_SESSION_KEY) != null){
return true;
}
response.sendRedirect("/login.html");
return false;
}
}
AppConfig クラス
@Override
public void addInterceptors(InterceptorRegistry registry) {
LoginInterceptor loginInterceptor = new LoginInterceptor();
registry.addInterceptor(loginInterceptor)
.addPathPatterns("/**")
.excludePathPatterns("/**/login.html")
.excludePathPatterns("/**/register.html")
.excludePathPatterns("/**/css/**.css")
.excludePathPatterns("/**/images/**")
.excludePathPatterns("/**/js/**.js")
.excludePathPatterns("/**/login")
.excludePathPatterns("/**/register")
.excludePathPatterns("/**/logout");
}
6.1.9 テスト
6.2 登録の実装
6.2.1 フロントエンドとバックエンドの対話インターフェース
请求
POST /register HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=cm&password=123456
响应
HTTP/1.1 200 OK
Content-Type: application/json
{
userId: 1,
username: 'dingding',
score: 1000,
totalCount: 0,
winCount: 0
}
登録が失敗した場合 (たとえば、ユーザー名が既に存在する場合)、ユーザー名が null であるオブジェクトを返します。
6.2.2 コントローラ層
@RequestMapping("/register")
@ResponseBody
public Object register(String username,String password){
User user1 = userService.selectByName(username);
if(user1 != null){
System.out.println("当前用户已存在");
return new User();
}else{
User user2 = new User();
user2.setUsername(username);
String password1 = bCryptPasswordEncoder.encode(password);
user2.setPassword(password1);
userService.insert(user2);
return user2;
}
}
6.2.3 テスト
同じものを再度登録しても機能しません。
6.3. ユーザー情報の取得
6.3.1 フロントエンドとバックエンドの相互作用インターフェース
请求
GET /userinfo HTTP/1.1
响应
HTTP/1.1 200 OK
Content-Type: application/json
{
userId: 1,
username: 'cm',
score: 1000,
totalCount: 0,
winCount: 0
}
6.3.2 コントローラ層
@RequestMapping("/userinfo")
@ResponseBody
public Object getUserInfo(HttpServletRequest request){
try{
HttpSession session = request.getSession(false);
User user = (User)session.getAttribute("user");
User newUser = userService.selectByName(user.getUsername());
return newUser;
}catch (NullPointerException e){
System.out.println("没有该用户");
return new User();
}
}
6.3.3 テスト
このアカウントでログインする前に、この JSESSIONID を保存したため
6.4 ログアウト
6.4.1 フロントエンドとバックエンドの対話インターフェース
请求
GET /logout HTTP/1.1
响应
HTTP/1.1 200
6.4.2 コントローラ層
@RequestMapping("/logout")
public void logout(HttpServletRequest request, HttpServletResponse response) throws IOException {
HttpSession session = request.getSession(false);
// 拦截器的拦截, 所以不可能出现session为空的情况
session.removeAttribute(Constant.USER_SESSION_KEY);
response.sendRedirect("login.html");
}
6.4.3 テスト
ログインページをリダイレクトしました
7. マッチングモジュール
クライアントは積極的にサーバーへのリクエストを開始し, レスポンスを返します. クライアントがリクエストを開始しない場合, サーバーは積極的にクライアントに連絡できません. ここで, サーバーは積極的にクライアントにメッセージを送信する必要があります.ここでは "message push" を使用
します. フロントエンドとバックエンドの対話インターフェースについて合意する必要があります. これも に基づいwebsocketています. テキストデータとバイナリデータを送信できます. ここでは json でテキストデータを送信するように設計されています.フォーマット。
7.1 フロントエンドとバックエンドの相互作用インターフェース
接続 (URL)
ws://127.0.0.1:8080/findMatch
マッチリクエスト
{
message: 'startMatch' / 'stopMatch', // 开始/结束匹配
}
ここで一致するのは、ログイン後にユーザー情報が取得され、HttpSession に保存されていることです。
一致する応答 1 (これは、要求を送信した直後にサーバーによって返された一致する応答です)
{
ok: true, // 是否成功. 比如用户 id 不存在, 则返回 false
reason: '', // 错误原因
message: 'startMatch' / 'stopMatch'
}
マッチング応答 2 (対戦相手にマッチング、サーバーは積極的にメッセージをプッシュバック、マッチングされた対戦相手はレスポンスに反映される必要はなく、サーバー側に配置されます)
{
ok: true, // 是否成功. 比如用户 id 不存在, 则返回 false
reason: '', // 错误原因
message: 'matchSuccess',
}
7.2 マッチング機能のフロントエンド開発
// 此处进行初始化 websocket, 并且实现前端的匹配逻辑.
// 此处的路径必须写作 /findMatch, 千万不要写作 /findMatch/
let websocketUrl = 'ws://' + location.host + '/findMatch';
let websocket = new WebSocket(websocketUrl);
websocket.onopen = function() {
console.log("onopen");
}
websocket.onclose = function() {
console.log("onclose");
}
websocket.onerror = function() {
console.log("onerror");
}
// 监听页面关闭事件. 在页面关闭之前, 手动调用这里的 websocket 的 close 方法.
window.onbeforeunload = function() {
websocket.close();
}
// 一会重点来实现, 要处理服务器返回的响应
websocket.onmessage = function(e) {
// 处理服务器返回的响应数据. 这个响应就是针对 "开始匹配" / "结束匹配" 来对应的
// 解析得到的响应对象. 返回的数据是一个 JSON 字符串, 解析成 js 对象
let resp = JSON.parse(e.data);
let matchButton = document.querySelector('#match-button');
if (!resp.ok) {
console.log("游戏大厅中接收到了失败响应! " + resp.reason);
return;
}
if (resp.message == 'startMatch') {
// 开始匹配请求发送成功
console.log("进入匹配队列成功!");
matchButton.innerHTML = '匹配中...(点击停止)'
} else if (resp.message == 'stopMatch') {
// 结束匹配请求发送成功
console.log("离开匹配队列成功!");
matchButton.innerHTML = '开始匹配';
} else if (resp.message == 'matchSuccess') {
// 已经匹配到对手了.
console.log("匹配到对手! 进入游戏房间!");
// location.assign("/game_room.html");
location.replace("/game_room.html");
} else if (resp.message == 'repeatConnection') {
alert("当前检测到多开! 请使用其他账号登录!");
location.replace("/login.html");
} else {
console.log("收到了非法的响应! message=" + resp.message);
}
}
// 给匹配按钮添加一个点击事件
let matchButton = document.querySelector('#match-button');
matchButton.onclick = function() {
// 在触发 websocket 请求之前, 先确认下 websocket 连接是否好着呢~~
if (websocket.readyState == websocket.OPEN) {
// 如果当前 readyState 处在 OPEN 状态, 说明连接好着的~
// 这里发送的数据有两种可能, 开始匹配/停止匹配~
if (matchButton.innerHTML == '开始匹配') {
console.log("开始匹配");
websocket.send(JSON.stringify({
message: 'startMatch',
}));
} else if (matchButton.innerHTML == '匹配中...(点击停止)') {
console.log("停止匹配");
websocket.send(JSON.stringify({
message: 'stopMatch',
}));
}
} else {
// 这是说明连接当前是异常的状态
alert("当前您的连接已经断开! 请重新登录!");
location.replace('/login.html');
}
}
7.3 マッチング機能のバックエンド開発
Websocket リクエストを処理するためのエントリ クラスである MatchController クラスを作成します。
// 通过这个类来处理匹配功能中的 websocket 请求
@Component
public class MatchController extends TextWebSocketHandler {
private ObjectMapper objectMapper = new ObjectMapper();
@Autowired
private OnlineUserManager onlineUserManager;
@Autowired
private Matcher matcher;
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
}
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
}
}
AppConfig で URL をトリガーする応答アドレスを追加します
@Configuration
@EnableWebSocket
public class AppConfig implements WebSocketConfigurer {
@Autowired
private MatchAPI matchAPI;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(testAPI, "/test");
// 通过 .addInterceptors(new HttpSessionHandshakeInterceptor() 这个操作来把 HttpSession 里的属性放到 WebSocket 的 session 中
// 参考: https://docs.spring.io/spring-framework/docs/5.0.7.RELEASE/spring-framework-reference/web.html#websocket-server-handshake
// 然后就可以在 WebSocket 代码中 WebSocketSession 里拿到 HttpSession 中的 attribute.
registry.addHandler(matchAPI, "/findMatch")
.addInterceptors(new HttpSessionHandshakeInterceptor());
}
}
このように、前回のログイン処理で HttpSession に格納されたデータ (主に User オブジェクト) を WebSocket のセッションに入れることができます. 現在のユーザー情報を以下のコードで取得すると便利です.
7.3.1 ユーザーマネージャの実装
現在のユーザーのオンライン ステータスを管理する OnlineUserManager クラスを作成します。これは基本的にハッシュ テーブル構造です。キーはユーザー ID で、値はユーザーの WebSocketSession です。
これはマルチスレッド状態であるため、多くのユーザーが同じハッシュ テーブルにアクセスするときにスレッド セーフの問題が発生するため、ここでは ConcurrentHashMap を使用してスレッド セーフの問題を確認します。
このクラスを使用すると、ユーザーがオンラインかどうかを判断できると同時に、クライアントにコールバックするためのセッションを簡単に取得できます。
ルームに入るときはユーザーをハッシュテーブルに格納し、
退室するときはハッシュテーブルからユーザーを削除し、
userId で対応するセッションをクエリして、クライアントにデータを返します。
奥にはバトルインターフェースもあり、全て最初に作成
@Component
public class OnlineUserManager {
private ConcurrentHashMap<Integer, WebSocketSession> gameHall = new ConcurrentHashMap<>();
private ConcurrentHashMap<Integer, WebSocketSession> gameRoom = new ConcurrentHashMap<>();
public void enterGameHall(int userId, WebSocketSession session) {
gameHall.put(userId, session);
}
// 只有当前页面退出的时候, 能销毁自己的 session
// 避免当一个 userId 打开两次 游戏页面, 错误的删掉之前的会话的问题.
public void exitGameHall(int userId) {
gameHall.remove(userId);
}
public WebSocketSession getSessionFromGameHall(int userId) {
return gameHall.get(userId);
}
public void enterGameRoom(int userId, WebSocketSession session) {
gameRoom.put(userId, session);
}
public void exitGameRoom(int userId) {
gameRoom.remove(userId);
}
public WebSocketSession getSessionFromGameRoom(int userId) {
return gameRoom.get(userId);
}
}
試合中の選手はスコアでマッチングされ、選手全体が3つのカテゴリーに分けられます
通常: スコア < 2000
高: スコア >= 2000 && スコア < 3000
非常に高い: スコア >= 3000
これらの 3 つのレベルに応じて、異なるキューが割り当てられます.一致するキューを継続的にスキャンするには、特別なスレッドが必要です.一致するプレーヤーがペアを形成する場合、それらは取り出されて部屋に配置されます.
MatchAPI クラスが呼び出す add メソッドを提供して、プレーヤーを一致するキューに追加します.
MatchAPI クラスが呼び出す remove メソッドを提供して、プレーヤーを一致するキューから削除します.
同時に、Matcher は OnlineUserManager がプレーヤーの Session を取得するために記録されます。
handlerMatch は別のスレッドで呼び出されるため. したがって、キューへのアクセスのスレッド セーフを考慮する必要がある. ロックを追加する必要がある.
各キューはキュー オブジェクト自体をロックとして使用できる.
入口で wait を使用して、キューが終了するまで待機する要素が 2 つ以上になると、スレッド消費キューが起動されます。
@Component
// 这个类表示"匹配器" , 通过这个类负责完成整个匹配功能
public class Matcher {
//创建三个匹配队列
private Queue<User> normalQueue = new LinkedList<>();
private Queue<User> highQueue = new LinkedList<>();
private Queue<User> veryHighQueue = new LinkedList<>();
@Autowired
private OnlineUserManager onlineUserManager;
@Autowired
private RoomManager roomManager;
private ObjectMapper objectMapper = new ObjectMapper();
// 操作匹配队列的方法
// 把玩家放到匹配队列中
public void add(User user){
if(user.getScore() < 2000){
synchronized (normalQueue){
normalQueue.offer(user);
normalQueue.notify();
}
System.out.println("把玩家 "+user.getUsername()+" 加入到 normalQueue 中!");
}else if(user.getScore() >= 2000 && user.getScore() < 3000){
synchronized (highQueue){
highQueue.offer(user);
highQueue.notify();
}
System.out.println("把玩家 "+user.getUsername()+" 加入到 highQueue 中!");
}else{
synchronized (veryHighQueue){
veryHighQueue.offer(user);
veryHighQueue.notify();
}
System.out.println("把玩家 "+user.getUsername()+" 加入到 veryHighQueue 中!");
}
}
// 当玩家点击停止匹配的时候,就需要把玩家从匹配队列中删除
public void remove(User user){
if (user.getScore() < 2000) {
synchronized (normalQueue) {
normalQueue.remove(user);
}
System.out.println("把玩家 " + user.getUsername() + " 移除了 normalQueue!");
} else if (user.getScore() >= 2000 && user.getScore() < 3000) {
synchronized (highQueue) {
highQueue.remove(user);
}
System.out.println("把玩家 " + user.getUsername() + " 移除了 highQueue!");
} else {
synchronized (veryHighQueue) {
veryHighQueue.remove(user);
}
System.out.println("把玩家 " + user.getUsername() + " 移除了 veryHighQueue!");
}
}
public Matcher() {
// 创建三个线程, 分别针对这三个匹配队列, 进行操作.
Thread t1 = new Thread() {
@Override
public void run() {
// 扫描 normalQueue
while (true) {
handlerMatch(normalQueue);
}
}
};
t1.start();
Thread t2 = new Thread(){
@Override
public void run() {
while (true) {
handlerMatch(highQueue);
}
}
};
t2.start();
Thread t3 = new Thread() {
@Override
public void run() {
while (true) {
handlerMatch(veryHighQueue);
}
}
};
t3.start();
}
private void handlerMatch(Queue<User> matchQueue) {
synchronized (matchQueue){
try{
// 1. 检测队列中元素个数是否达到 2
// 队列的初始情况可能是 空
// 如果往队列中添加一个元素,这个时候,仍然是不能进行后续匹配操作的
// 因此在这里使用 while 循环检查是更合理的
while(matchQueue.size() < 2){
matchQueue.wait();
}
// 2. 尝试从队列中取出两个玩家
User player1 = matchQueue.poll();
User player2 = matchQueue.poll();
System.out.println("匹配出两个玩家: "+player1.getUsername()+","+player2.getUsername());
// 3. 获取到玩家的 websocket 的会话
// 获取到会话的目的是为了告诉玩家,你排到了..
WebSocketSession session1 = onlineUserManager.getSessionFromGameHall(player1.getUserId());
WebSocketSession session2 = onlineUserManager.getSessionFromGameHall(player2.getUserId());
//理论上来说,匹配队列中的玩家一定是在线的状态
// 因为前面的逻辑里进行了处理,当玩家断开连接的时候把玩家从匹配队列中移除
// 但是此处仍然进行一次判定
if(session1 == null){
// 如果玩家1 现在不在线,就把玩家2 重新放回到匹配队列中
matchQueue.offer(player2);
return;
}
if(session2 == null){
// 如果玩家2 现在下线,就把玩家1 重新放回到匹配队列
matchQueue.offer(player1);
return;
}
// 当前能否排到两个玩家是同一个用户的情况嘛? 一个玩家入队列了两次??
// 理论上也不会存在~~
// 1) 如果玩家下线, 就会对玩家移出匹配队列
// 2) 又禁止了玩家多开.
// 但是仍然在这里多进行一次判定, 以免前面的逻辑出现 bug 时带来严重的后果.
if (session1 == session2) {
// 把其中的一个玩家放回匹配队列.
matchQueue.offer(player1);
return;
}
// 4. 把这两个玩家放到一个游戏房间中
Room room = new Room();
roomManager.add(room, player1.getUserId(), player2.getUserId());
// 5. 给玩家反馈信息: 你匹配到对手了
// 通过 websocket 返回一个 message 为 'matchSuccess' 这样的响应
// 此处要给两个玩家都返回 "匹配成功" 这样的信息
// 因此就要返回两次
MatchResponse response1 = new MatchResponse();
response1.setOk(true);
response1.setMessage("matchSuccess");
String json1 = objectMapper.writeValueAsString(response1);
session1.sendMessage(new TextMessage(json1));
MatchResponse response2 = new MatchResponse();
response2.setOk(true);
response2.setMessage("matchSuccess");
String json2 = objectMapper.writeValueAsString(response2);
session2.sendMessage(new TextMessage(json2));
}catch (IOException | InterruptedException e){
e.printStackTrace();
}
}
}
}
7.3.2 Room クラスの実装
試合が成功したら、2 人のプレイヤーを同じルーム オブジェクトに配置する必要があります。
- ルームには、UUID をルームの一意の識別子として使用するルーム ID が含まれている必要があります。
- ゲーム内の両方のプレーヤーの情報は、部屋に記録する必要があります。
- 最初の発動者の ID を記録する
- ゲームのチェス盤として 2 次元配列を記録します。
- 後でクライアントと対話するために、OnlineUserManager を記録します。
- もちろん、jsonの処理にはObjectMapperが必須
public class Room {
private String roomId;
// 玩家1
private User user1;
// 玩家2
private User user2;
// 先手方的用户 id
private int whiteUserId = 0;
// 棋盘, 数字 0 表示未落子位置. 数字 1 表示玩家 1 的落子. 数字 2 表示玩家 2 的落子
private static final int MAX_ROW = 15;
private static final int MAX_COL = 15;
private int[][] chessBoard = new int[MAX_ROW][MAX_COL];
private ObjectMapper objectMapper = new ObjectMapper();
private OnlineUserManager onlineUserManager;
public Room() {
// 使用 uuid 作为唯一身份标识
roomId = UUID.randomUUID().toString();
}
// getter / setter 方法略
}
7.3.3 ルームマネージャーの実装
多くの Room オブジェクトが存在します.ゲーム内の 2 人のプレイヤーはすべて Room オブジェクトに対応します.すべてのルームを管理するには manager オブジェクトが必要です.
- ハッシュ テーブルを使用してすべてのルーム オブジェクトを保存します。キーは roomId、値はルーム オブジェクトです。
- 次に、Hash テーブルを使用して userId -> roomId のマッピングを保存します。これは、プレーヤーに応じてルームを見つけるのに便利です。
- 追加・削除・確認用のAPIを提供（確認にはルームIDによるクエリとユーザーIDによるクエリの2種類あります）。
// 房间管理器
// 也要唯一实例
@Component
public class RoomManager {
private ConcurrentHashMap<String, Room> rooms = new ConcurrentHashMap<>();
private ConcurrentHashMap<Integer, String> userIdToRoomId = new ConcurrentHashMap<>();
public void add(Room room, int userId1, int userId2) {
rooms.put(room.getRoomId(), room);
userIdToRoomId.put(userId1, room.getRoomId());
userIdToRoomId.put(userId2, room.getRoomId());
}
public void remove(String roomId, int userId1, int userId2) {
rooms.remove(roomId);
userIdToRoomId.remove(userId1);
userIdToRoomId.remove(userId2);
}
public Room getRoomByRoomId(String roomId) {
return rooms.get(roomId);
}
public Room getRoomByUserId(int userId) {
String roomId = userIdToRoomId.get(userId);
if (roomId == null) {
// userId -> roomId 映射关系不存在, 直接返回 null
return null;
}
return rooms.get(roomId);
}
}
7.3.4 コントローラ層
websocket には 4 つのメソッドがあります。
一: 实现 afterConnectionEstablished 方法.
- ログイン前に設定したUser情報をパラメータのsessionオブジェクトで取得します。
- onlineUserManager を使用して、ユーザーのオンライン ステータスを管理します。
- 最初に、ユーザーが既にオンラインであるかどうかを判断し、オンラインの場合は直接エラーを返します (同じアカウントで複数のアカウントを開設することを禁止します)。
- プレーヤーのオンライン ステータスを設定します。
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 玩家上线, 加入到 OnlineUserManager 中
// 1. 先获取到当前用户的身份信息(谁在游戏大厅中, 建立的连接)
try {
User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
// 2. 先判定当前用户是否已经登录过(已经是在线状态), 如果是已经在线, 就不该继续进行后续逻辑.
if (onlineUserManager.getSessionFromGameHall(user.getUserId()) != null
|| onlineUserManager.getSessionFromGameRoom(user.getUserId()) != null) {
// 当前用户已经登录了!!
// 针对这个情况要告知客户端, 你这里重复登录了.
MatchResponse response = new MatchResponse();
response.setOk(true);
response.setReason("当前禁止多开!");
response.setMessage("repeatConnection");
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));
// 此处直接关闭有些太激进了, 还是返回一个特殊的 message , 供客户端来进行判定, 由客户端负责进行处理
// session.close();
return;
}
// 3. 拿到了身份信息之后, 就可以把玩家设置成在线状态了
onlineUserManager.enterGameHall(user.getUserId(), session);
System.out.println("玩家 " + user.getUsername() + " 进入游戏大厅!");
} catch (NullPointerException e) {
System.out.println("[MatchAPI.afterConnectionEstablished] 当前用户未登录!");
// e.printStackTrace();
// 出现空指针异常, 说明当前用户的身份信息是空, 用户未登录呢.
// 把当前用户尚未登录这个信息给返回回去~~
MatchResponse response = new MatchResponse();
response.setOk(false);
response.setReason("您尚未登录! 不能进行后续匹配功能!");
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));
}
}
二: 实现 handleTextMessage 方法
- まず、セッションから現在のプレーヤーの情報を取得します。
- クライアントから送信されたリクエストを解析する
- 要求のタイプを判別します。startMatch の場合は、ユーザー オブジェクトを一致するキューに追加します。stopMatch の場合は、ユーザー オブジェクトを一致するキューから削除します。
- マッチングの実際のロジックを処理するには、ここでマッチャー オブジェクトを実装する必要があります。
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// 实现处理开始匹配请求和处理停止匹配请求.
User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
// 获取到客户端给服务器发送的数据
String payload = message.getPayload();
// 当前这个数据载荷是一个 JSON 格式的字符串, 就需要把它转成 Java 对象. MatchRequest
MatchRequest request = objectMapper.readValue(payload, MatchRequest.class);
MatchResponse response = new MatchResponse();
if (request.getMessage().equals("startMatch")) {
// 进入匹配队列
matcher.add(user);
// 把玩家信息放入匹配队列之后, 就可以返回一个响应给客户端了.
response.setOk(true);
response.setMessage("startMatch");
} else if (request.getMessage().equals("stopMatch")) {
// 退出匹配队列
matcher.remove(user);
// 移除之后, 就可以返回一个响应给客户端了.
response.setOk(true);
response.setMessage("stopMatch");
} else {
response.setOk(false);
response.setReason("非法的匹配请求");
}
String jsonString = objectMapper.writeValueAsString(response);
session.sendMessage(new TextMessage(jsonString));
}
三: 实现 afterConnectionClosed 方法
- 主な仕事は、onlineUserManager からプレーヤーを終了することです。
- 終了するときは、現在のプレーヤーが複数開いているかどうかを確認するように注意してください (2 つの Websocket 接続に対応する 1 つの userId)。 .
- プレーヤーが現在マッチメイキング キューにある場合、マッチメイキング キューから直接削除されます。
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
try {
// 玩家下线, 从 OnlineUserManager 中删除
User user = (User) session.getAttributes().get(Constant.USER_SESSION_KEY);
WebSocketSession tmpSession = onlineUserManager.getSessionFromGameHall(user.getUserId());
if (tmpSession == session) {
onlineUserManager.exitGameHall(user.getUserId());
}
// 如果玩家正在匹配中, 而 websocket 连接断开了, 就应该移除匹配队列
matcher.remove(user);
} catch (NullPointerException e) {
System.out.println("[MatchAPI.afterConnectionClosed] 当前用户未登录!");
// e.printStackTrace();
}
}
四: 实现 handleTransportError 方法
afterConnectionClosedと同様のロジックで、異常終了時にユーザーの情報を取得し、オンライン状態をオフラインに設定し、一致するキューのユーザーを削除する
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
try {
// 玩家下线, 从 OnlineUserManager 中删除
User user = (User) session.getAttributes().get("user");
WebSocketSession tmpSession = onlineUserManager.getSessionFromGameHall(user.getUserId());
if (tmpSession == session) {
onlineUserManager.exitGameHall(user.getUserId());
}
// 如果玩家正在匹配中, 而 websocket 连接断开了, 就应该移除匹配队列
matcher.remove(user);
} catch (NullPointerException e) {
System.out.println("[MatchAPI.handleTransportError] 当前用户未登录!");
}
}
8. バトルモジュール
8.1 フロントエンドとバックエンドの相互作用インターフェース
接続
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,
winner: 0
}
8.2 クライアント開発
ここのキャンバスはチェス盤を描くために使われ、
js ファイル:
- コードのこの部分はキャンバス API に基づいています. この部分を理解する必要はありません. 次のコードを直接コピーして貼り付けてください.
- チェス盤を表すために 2 次元配列を使用します。結果はサーバーによって決定されますが、クライアントのチェス盤は「1 つの位置で繰り返し移動する」という状況を回避できます。
- oneStep 関数の効果は, 指定された位置にチェスの駒を描くことです. 白い文字を描くか黒い駒を描くかを区別できます. パラメータは, 列と行にそれぞれ対応する横座標と縦座標です.
- onclick を使用して、ユーザー クリック イベントを処理します。ユーザーがクリックすると、この関数を使用してポーンの描画が制御されます。
- me 変数は自分の番かどうかを示すために使用され、over 変数はゲームの終了を示すために使用されます。
- このコードは、画像ディレクトリに配置できる背景画像 (sky.jpg) を使用します。
gameInfo = {
roomId: null,
thisUserId: null,
thatUserId: null,
isWhite: true,
}
//
// 设定界面显示相关操作
//
function setScreenText(me) {
let screen = document.querySelector('#screen');
if (me) {
screen.innerHTML = "轮到你落子了!";
} else {
screen.innerHTML = "轮到对方落子了!";
}
}
//
// 初始化 websocket
//
// TODO
//
// 初始化一局游戏
//
function initGame() {
// 是我下还是对方下. 根据服务器分配的先后手情况决定
let me = gameInfo.isWhite;
// 游戏是否结束
let over = false;
let chessBoard = [];
//初始化chessBord数组(表示棋盘的数组)
for (let i = 0; i < 15; i++) {
chessBoard[i] = [];
for (let j = 0; j < 15; j++) {
chessBoard[i][j] = 0;
}
}
let chess = document.querySelector('#chess');
let context = chess.getContext('2d');
context.strokeStyle = "#BFBFBF";
// 背景图片
let logo = new Image();
logo.src = "image/sky.jpeg";
logo.onload = function () {
context.drawImage(logo, 0, 0, 450, 450);
initChessBoard();
}
// 绘制棋盘网格
function initChessBoard() {
for (let i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 430);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(435, 15 + i * 30);
context.stroke();
}
}
// 绘制一个棋子, me 为 true
function oneStep(i, j, isWhite) {
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
if (!isWhite) {
gradient.addColorStop(0, "#0A0A0A");
gradient.addColorStop(1, "#636766");
} else {
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
}
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) {
// TODO 发送坐标给服务器, 服务器要返回结果
oneStep(col, row, gameInfo.isWhite);
chessBoard[row][col] = 1;
}
}
// TODO 实现发送落子请求逻辑, 和处理落子响应逻辑.
}
initGame();
8.2.1 ウェブソケットの初期化
フロントエンド コード:
- 最初に元の initGame 関数呼び出しを削除し、サーバーから Ready 応答を取得したら、ボードを初期化します。
- websocket オブジェクトを作成し、onopen/onclose/onerror 関数を登録し、onerror でゲームロビーにジャンプするロジックを行い、ネットワークが異常切断された場合、ロビーに戻るようにします。
- onmessage メソッドを実装します。onmessage は最初にゲームの準備完了の応答を処理します。
// 注意, 路径要写作 /game 不要写作 /game/
websocket = new WebSocket("ws://127.0.0.1:8080/game");
//连接成功建立的回调方法
websocket.onopen = function (event) {
console.log("open");
}
//连接关闭的回调方法
websocket.onclose = function () {
console.log("close");
}
//连接发生错误的回调方法
websocket.onerror = function () {
console.log("error");
alert('和服务器连接断开! 返回游戏大厅!')
location.assign('/game_hall.html')
};
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
}
websocket.onmessage = function (event) {
console.log('handlerGameReady: ' + event.data);
let response = JSON.parse(event.data);
if (response.message != 'gameReady') {
console.log('响应类型错误!');
return;
}
if (!response.ok) {
alert('连接游戏失败! reason: ' + response.reason);
location.assign('/game_hall.html')
return;
}
// 初始化游戏信息
gameInfo.roomId = response.roomId;
gameInfo.thisUserId = response.thisUserId;
gameInfo.thatUserId = response.thatUserId;
gameInfo.isWhite = (response.whiteUserId == gameInfo.thisUserId);
console.log('[gameReady] ' + JSON.stringify(gameInfo));
// 初始化棋盘
initGame();
// 设置 #screen 的显示
setScreenText(gameInfo.isWhite);
}
8.2.2 移動リクエストの送信
onclick 関数を変更して、子が配置されたときにリクエストを送信するロジックを追加します。
- 元の onStep の動作をコメントアウトして chessBoard を修正し、move レスポンス受信時の処理に入れます。
- send を実装し、websocket を介してドロップ リクエストを送信します。
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;
// me = !me;
}
}
function send(row, col) {
console.log("send");
let request = {
message: "putChess",
userId: gameInfo.thisUserId,
row: row,
col: col,
}
websocket.send(JSON.stringify(request));
}
8.2.3 移動応答の処理
initGame で、websocket の onmessage を変更します。
- initGame の前に、ゲームの Ready 応答を処理し、Game 応答を受信した後、Move 応答を受信するように変更します。
- ムーブレスポンスの処理では、勝ち手の処理を行う必要があります。
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);
}
8.3 サーバー開発
Websocket リクエストを処理する GameController クラスを作成する
@Component
public class GameController extends TextWebSocketHandler {
private ObjectMapper objectMapper = new ObjectMapper();
@Autowired
private RoomManager roomManager;
// 这个是管理 game 页面的会话
@Autowired
private OnlineUserManager onlineUserManager;
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
}
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
}
}
8.3.1 サブリクエスト/レスポンスオブジェクトを作成する
GameReadyResponse クラス
public class GameReadyResponse {
private String message = "gameReady";
private boolean ok = true;
private String reason = "";
private String roomId = "";
private int thisUserId = 0;
private int thatUserId = 0;
private int whiteUserId = 0;
}
GameRequest クラス
public class GameRequest {
// 如果不给 message 设置 getter / setter, 则不会被 jackson 序列化
private String message = "putChess";
private int userId;
private int row;
private int col;
}
GameResponse クラス
public class GameResponse {
// 如果不给 message 设置 getter / setter, 则不会被 jackson 序列化
private String message = "putChess";
private int userId;
private int row;
private int col;
private int winner; // 胜利玩家的 userId
}
8.3.2 接続成功の処理
- まず、ユーザーのログイン状態を検出する必要があります. セッションから現在のユーザー情報を取得します.
- 次に、現在のプレイヤーが部屋にいるかどうかを判断する必要があります。
- 次に、マルチオープン判定を行いますが、既にゲームに参加している場合、再接続することはできません。
- 2 人のプレイヤーを対応するルーム オブジェクトに配置します。両方のプレイヤーが接続されると、ルームは満員になります。このとき、2 人のプレイヤーは両方とも準備ができていることが通知されます。
- 3 人目のプレイヤーもルームに参加しようとすると、ルームが満員であるというプロンプトが表示されます。
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
GameReadyResponse resp = new GameReadyResponse();
User user = (User) session.getAttributes().get("user");
if (user == null) {
resp.setOk(false);
resp.setReason("用户尚未登录!");
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
return;
}
Room room = roomManager.getRoomByUserId(user.getUserId());
if (room == null) {
resp.setOk(false);
resp.setReason("用户并未匹配成功! 不能开始游戏!");
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
return;
}
System.out.println("连接游戏! roomId=" + room.getRoomId() + ", userId=" + user.getUserId());
// 先判定用户是不是已经在游戏中了.
if (onlineUserManager.getSessionFromGameHall(user.getUserId()) != null
|| onlineUserManager.getSessionFromGameRoom(user.getUserId()) != null) {
resp.setOk(false);
resp.setReason("禁止多开游戏页面!");
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
return;
}
// 更新会话
onlineUserManager.enterGameRoom(user.getUserId(), session);
// 同一个房间的两个玩家, 同时连接时要考虑线程安全问题.
synchronized (room) {
if (room.getUser1() == null) {
room.setUser1(user);
// 设置 userId1 为先手方
room.setWhiteUserId(user.getUserId());
System.out.println("userId=" + user.getUserId() + " 玩家1准备就绪!");
return;
}
if (room.getUser2() == null) {
room.setUser2(user);
System.out.println("userId=" + user.getUserId() + " 玩家2准备就绪!");
// 通知玩家1 就绪
noticeGameReady(room, room.getUser1().getUserId(), room.getUser2().getUserId());
// 通知玩家2 就绪
noticeGameReady(room, room.getUser2().getUserId(), room.getUser1().getUserId());
return;
}
}
// 房间已经满了!
resp.setOk(false);
String log = "roomId=" + room.getRoomId() + " 已经满了! 连接游戏失败!";
resp.setReason(log);
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
System.out.println(log);
}
8.3.3 プレーヤーのオフライン処理
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
User user = (User) session.getAttributes().get("user");
if (user == null) {
return;
}
WebSocketSession existSession = onlineUserManager.getSessionFromGameRoom(user.getUserId());
if (existSession != session) {
System.out.println("当前的会话不是玩家游戏中的会话, 不做任何处理!");
return;
}
System.out.println("连接出错! userId=" + user.getUserId());
onlineUserManager.exitGameRoom(user.getUserId());
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
User user = (User) session.getAttributes().get("user");
if (user == null) {
return;
}
WebSocketSession existSession = onlineUserManager.getSessionFromGameRoom(user.getUserId());
if (existSession != session) {
System.out.println("当前的会话不是玩家游戏中的会话, 不做任何处理!");
return;
}
System.out.println("用户退出! userId=" + user.getUserId());
onlineUserManager.exitGameRoom(user.getUserId());
}
8.3.4 Room クラスにチェッカーボード コードを追加する
ここで Room は Spring オブジェクトを注入したいので、@Autowired @Resource アノテーションを使用することはできません. context を使用する必要があります.
スタートアップ クラスを変更する
public class JavaGobangApplication {
public static ConfigurableApplicationContext context;
public static void main(String[] args) {
context = SpringApplication.run(JavaGobangApplication.class, args);
}
}
ゲームルーム:
public Room() {
// 构造 Room 的时候生成一个唯一的字符串表示房间 id.
// 使用 UUID 来作为房间 id
roomId = UUID.randomUUID().toString();
// 通过入口类中记录的 context 来手动获取到前面的 RoomManager 和 OnlineUserManager
onlineUserManager = JavaGobangApplication.context.getBean(OnlineUserManager.class);
roomManager = JavaGobangApplication.context.getBean(RoomManager.class);
userService = JavaGobangApplication.context.getBean(UserService.class);
}
8.3.5 送信リクエストの処理
handleTextMessage を実装する
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
User user = (User) session.getAttributes().get("user");
if (user == null) {
return;
}
Room room = roomManager.getRoomByUserId(user.getUserId());
room.putChess(message.getPayload());
}
8.3.6 putChess メソッドを実装する
- まず、リクエストをリクエスト オブジェクトに解析します.
2. リクエスト オブジェクトの情報に従って、チェス盤上でゲームを移動します.
3. 移動が完了したら、デバッグを容易にするために、現在の状態を出力できます。 4.
ゲームが終了したかどうかを確認する.
5. 構築する手に対して応答し、各プレーヤーに書き戻す.
6. 書き戻すときに、プレーヤーが切断されていることが判明した場合、相手は相手と判断されます. 7.
ゲームが得点された場合、プレーヤーの得点を修正し、部屋を破壊します。
// 玩家落子
public void putChess(String message) throws IOException {
GameRequest req = objectMapper.readValue(message, GameRequest.class);
GameResponse response = new GameResponse();
// 1. 进行落子
int chess = req.getUserId() == user1.getUserId() ? 1 : 2;
int row = req.getRow();
int col = req.getCol();
if (chessBoard[row][col] != 0) {
System.out.println("落子位置有误! " + req);
return;
}
chessBoard[row][col] = chess;
printChessBoard();
// 2. 检查游戏结束
// 返回的 winner 为玩家的 userId
int winner = checkWinner(chess, row, col);
// 3. 把响应写回给玩家
response.setUserId(req.getUserId());
response.setRow(row);
response.setCol(col);
response.setWinner(winner);
WebSocketSession session1 = onlineUserManager.getSessionFromGameRoom(user1.getUserId());
WebSocketSession session2 = onlineUserManager.getSessionFromGameRoom(user2.getUserId());
if (session1 == null) {
// 玩家1 掉线, 直接认为玩家2 获胜
response.setWinner(user2.getUserId());
System.out.println("玩家1 掉线!");
}
if (session2 == null) {
// 玩家2 掉线, 直接认为玩家1 获胜
response.setWinner(user1.getUserId());
System.out.println("玩家2 掉线!");
}
String responseJson = objectMapper.writeValueAsString(response);
if (session1 != null) {
session1.sendMessage(new TextMessage(responseJson));
}
if (session2 != null) {
session2.sendMessage(new TextMessage(responseJson));
}
// 4. 如果玩家胜负已分, 就把 room 从管理器中销毁
if (response.getWinner() != 0) {
userMapper.userWin(response.getWinner() == user1.getUserId() ? user1 : user2);
userMapper.userLose(response.getWinner() == user1.getUserId() ? user2 : user1);
roomManager.removeRoom(roomId, user1.getUserId(), user2.getUserId());
System.out.println("游戏结束, 房间已经销毁! roomId: " + roomId + " 获胜方为: " + response.getWinner());
}
}
8.3.7 チェス盤を印刷するロジックの実装
private void printChessBoard() {
System.out.println("打印棋盘信息: ");
System.out.println("===========================");
for (int r = 0; r < MAX_ROW; r++) {
for (int c = 0; c < MAX_COL; c++) {
System.out.print(chessBoard[r][c] + " ");
}
System.out.println();
}
System.out.println("===========================");
}
8.3.8 勝敗を分ける
- 引き分けの場合はプレーヤーの ID が返され、引き分けでない場合は 0 が返されます。
- ボード上の値 1 はプレイヤー 1 の移動を意味し、値 2 はプレイヤー 2 の移動を意味します。
- 結果を確認するときは、現在の移動位置を中心として、関連するすべての行、列、および対角線を確認します. ボード全体をトラバースする必要はありません.
// 判定棋盘形式, 找出胜利的玩家.
// 如果游戏分出胜负, 则返回玩家的 id.
// 如果未分出胜负, 则返回 0
// chess 值为 1 表示玩家1 的落子. 为 2 表示玩家2 的落子
private int checkWinner(int chess, int row, int col) {
// 以 row, col 为中心
boolean done = false;
// 1. 检查所有的行(循环五次)
for (int c = col - 4; c <= col; c++) {
if (c < 0 || c >= MAX_COL) {
continue;
}
if (chessBoard[row][c] == chess
&& chessBoard[row][c + 1] == chess
&& chessBoard[row][c + 2] == chess
&& chessBoard[row][c + 3] == chess
&& chessBoard[row][c + 4] == chess) {
done = true;
}
}
// 2. 检查所有的列(循环五次)
for (int r = row - 4; r <= row; r++) {
if (r < 0 || r >= MAX_ROW) {
continue;
}
if (chessBoard[r][col] == chess
&& chessBoard[r + 1][col] == chess
&& chessBoard[r + 2][col] == chess
&& chessBoard[r + 3][col] == chess
&& chessBoard[r + 4][col] == chess) {
done = true;
}
}
// 3. 检查左对角线
for (int r = row - 4, c = col - 4; r <= row && c <= col; r++, c++) {
if (r < 0 || r >= MAX_ROW || c < 0 || c >= MAX_COL) {
continue;
}
if (chessBoard[r][c] == chess
&& chessBoard[r + 1][c + 1] == chess
&& chessBoard[r + 2][c + 2] == chess
&& chessBoard[r + 3][c + 3] == chess
&& chessBoard[r + 4][c + 4] == chess) {
done = true;
}
}
// 4. 检查右对角线
for (int r = row - 4, c = col + 4; r <= row && c >= col; r++, c--) {
if (r < 0 || r >= MAX_ROW || c < 0 || c >= MAX_COL) {
continue;
}
if (chessBoard[r][c] == chess
&& chessBoard[r + 1][c - 1] == chess
&& chessBoard[r + 2][c - 2] == chess
&& chessBoard[r + 3][c - 3] == chess
&& chessBoard[r + 4][c - 4] == chess) {
done = true;
}
}
if (!done) {
return 0;
}
return chess == 1 ? user1.getUserId() : user2.getUserId();
}
8.3.9 プレーヤーの終了プロセス
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
User user = (User) session.getAttributes().get("user");
if (user == null) {
return;
}
WebSocketSession existSession = onlineUserManager.getSessionFromGameRoom(user.getUserId());
if (existSession != session) {
System.out.println("当前的会话不是玩家游戏中的会话, 不做任何处理!");
return;
}
System.out.println("连接出错! userId=" + user.getUserId());
onlineUserManager.exitGameRoom(user.getUserId());
// [代码加在这里]
noticeThatUserWin(user);
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
User user = (User) session.getAttributes().get("user");
if (user == null) {
return;
}
WebSocketSession existSession = onlineUserManager.getSessionFromGameRoom(user.getUserId());
if (existSession != session) {
System.out.println("当前的会话不是玩家游戏中的会话, 不做任何处理!");
return;
}
System.out.println("用户退出! userId=" + user.getUserId());
onlineUserManager.exitGameRoom(user.getUserId());
// [代码加在这里]
noticeThatUserWin(user);
}
// 通知另外一个玩家直接获胜!
private void noticeThatUserWin(User user) throws IOException {
Room room = roomManager.getRoomByUserId(user.getUserId());
if (room == null) {
System.out.println("房间已经释放, 无需通知!");
return;
}
User thatUser = (user == room.getUser1() ? room.getUser2() : room.getUser1());
WebSocketSession session = onlineUserManager.getSessionFromGameRoom(thatUser.getUserId());
if (session == null) {
System.out.println(thatUser.getUserId() + " 该玩家已经下线, 无需通知!");
return;
}
GameResponse resp = new GameResponse();
resp.setUserId(thatUser.getUserId());
resp.setWinner(thatUser.getUserId());
session.sendMessage(new TextMessage(objectMapper.writeValueAsString(resp)));
}