基于HTML5+WebSocket+JAVA的棋牌游戏开发,从入门到放弃(二)
chanming 发布于 2018-10-22

前言

前面我们已经实现了一个简单的五指棋,但问题特别多。这一篇,我们要解决的问题有

  • 新增房间
  • 前端给出一些提示,告诉你所属的颜色,是否是你的回合

思考

首先,当用户连接的时候,我们需要取出他是哪一个房间?
我们需要一个类Room来表示房间,房间需要一个标示RoomId。
房间里面可能有这么几个动作?

  1. 进入房间(需要处理能否进入?)
  2. 广播(进入房间后,房间里每个人的动作只要跟这个房间里面的人说就行了)
  3. 退出房间

前端的话我们需要用户输入一个id,并且在建立webSocket的时候,把id号带过去。

实现

我们来看看前端的实现,我们需要在一开始弹出一个框,告诉用户,输入一个房间号。(虽然很挫,但是很容易实现)

Paste_Image.png
        var roomId = prompt("请输入房间号", ""); //房间号
        host = document.location.host;
        host = "ws://" + host + "/chess?roomId=" + roomId;
        var webSocket = new WebSocket(host);

是不是很简单呢?这样子我们在简历链接的时候就会把后面的参数带过去。
接下来我们来看看后端代码的实现,首先,我们要获取这个roomId。

        List<String> roomList = session.getRequestParameterMap().get("roomId");
        String roomId = roomList.get(0);

然后当用户发出connect信号时,我们需要判断这个roomId是否存在,如果不存在,咱们就新建一个room。

if (roomMap.containsKey(roomId)){//已经存在这个房间
    Room room = roomMap.get(roomId);
    if (room.enterRoom(session)){
        session.getUserProperties().put("roomId", roomId);
    }else{
        session.getBasicRemote().sendText("error");
    }
}else{//新建一个房间
    Room room = new ChessRoom(roomId, 2);
    room.enterRoom(session);
    roomMap.put(roomId, room);
    session.getUserProperties().put("roomId", roomId);
}

当用户下棋的时候,调用room的广播方法。

String content = message.substring(5);
ChessAction chessAction = new Gson().fromJson(content, ChessAction.class);
chessAction.setCode("Chess");
Room room = roomMap.get(roomId);
room.broadcast(new Gson().toJson(chessAction));

至此,我们基本实现了一个简单的房间了。接下来,我们需要在前端加一些提示语,提示你是什么颜色。像这种。

Paste_Image.png

代码其实很简单,只需要在开始和每次下棋的时候用js的innerHtml方法就行。

      function changeTip(){
        if (myTurn == true){
            document.getElementById("tips").innerHTML = "这是你的回合";
        }else{
            document.getElementById("tips").innerHTML = "等待对方下棋";
        }
    }

    function changeHead(){
        if (myTurn == false){
            document.getElementById("head").innerHTML = "你的房间号为" + roomId + "你是黑色";
        }else{
            document.getElementById("head").innerHTML = "你的房间号为" + roomId + "你是白色";
        }
    }

总结

我们已经简单实现了一个有房间的系统。代码。接下来我们会对前后的交互进行一个数据格式的优化,方便以后新功能的扩展。

推荐阅读