基于HTML5+WebSocket+JAVA的棋牌游戏开发，从入

前言

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

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

思考

首先，当用户连接的时候，我们需要取出他是哪一个房间？
我们需要一个类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 + "你是白色";
        }
    }

总结

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