据悉HTML5+WebSocket+JAVA的棋牌游戏支付,从入门到放弃(二)

前言

前边大家早就完结了一个有房间的五指棋游戏,现在我们将进而来系数这几个东西。这两次大家打算新增的法力有:

  • 事先咱们扩张了屋子,但并不曾限定房间只可以进入2个人
  • 日增一个护理线程,总结当前房间的多少,前面我们将延续完善这么些守护线程的效用。
  • 来得上一个棋子落在何地
  • 距离房间后会收缩房间的人头,并回收房间

前言

前边我们已经实现了一个粗略的五指棋,但问题专门多。这一篇,我们要缓解的问题有

  • 新增房间
  • 前者给出一些指示,告诉你所属的颜料,是否是你的回合

思考

率先个效用应该是暴发在创制连接的时候,假若房间里领先2人,则赶回前端一个破绽百出。
其次个我们需要创立一个新的线程。
其多少个是一个彻头彻尾的前端开发工作,我们得以激增五个图片,并每便标记上五遍的岗位,当下一个子的时候,画一个与众不同的子,并用一张normal的子覆盖上一个子。
第五个是暴发在断开连接的时候。

思考

首先,当用户连接的时候,大家需要取出他是哪一个屋子?
咱俩需要一个类Room来代表房间,房间需要一个标记RoomId。
屋子里面或者有这般多少个动作?

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

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

实现

第一个效益。

    Room room = roomMap.get(roomId);
    if (room.enterRoom(session)){
        session.getUserProperties().put("roomId", roomId);
    }else{
        Result result = new Result();
        result.setSuccess(false);
        result.setErrMsg("进入房间失败");
        session.getBasicRemote().sendText(new Gson().toJson(result));
    }

如若在进入房间失利的时候回来一个错误信息给前端即可。当然前端也要拍卖这一个错误音信咯。
第二个功效,创设一个大概的Deamon,大家用一个context来传播运行时的局部参数。

    static {
        RunContext context = new RunContext(roomMap);
        DeamonThread deamonThread = new DeamonThread(context);
        Thread dThread = new Thread(deamonThread);
        System.out.println("Create Thread");
        dThread.start();
    }

大家得以在DeamonThread类中贯彻各样功能,例如每隔30s总结房间的总和。

    public void run() {
        while (true){
            try{
                System.out.println("RoomSize is[" + runContext.getRooms().size() + "]");
                Thread.sleep(30000);
            }catch (Exception e){

            }
        }
    }

其多少个是一个前端效能,我们新增了两张新的图片,用last_x,
last_y来表示上一个棋子落在何处。一先河我们开头化为-1。

    if (x >= 0 && x < 15 && y >= 0 && y < 15) {
        if (chess == 1) {
            if (last_x > 0 && last_y > 0){
                context.drawImage(img_b, last_x * 40 + 20, last_y * 40 + 20);
            }
            context.drawImage(img_w_now, x * 40 + 20, y * 40 + 20);//绘制白棋
            chessData[x][y] = 1;
        }
        else {
            if (last_x > 0 && last_y > 0){
                context.drawImage(img_w, last_x * 40 + 20, last_y * 40 + 20);
            }
            context.drawImage(img_b_now, x * 40 + 20, y * 40 + 20);
            chessData[x][y] = 2;
        }
        judge(x, y, chess);
        last_x = x;
        last_y = y;
    }

第五个,后面我们关系在onClose方法中,有可选的参数Session,我们得以经过那些Session来获取到房间号。

    String roomId = (String)session.getUserProperties().get("roomId");
    Room room = roomMap.get(roomId);
    if (room != null){
        room.leaveRoom(session);
        if (room.getNowNumber() <= 0){
            roomMap.remove(roomId);
        }
    }
    System.out.println("Connection closed");

PO一张图,现在的成为这样了。。。

图片 1

游玩界面

实现

咱俩来看看前端的实现,大家需要在一起始弹出一个框,告诉用户,输入一个房间号。(即使很挫,可是很容易实现)

图片 2

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

迄今,大家基本落实了一个简单易行的屋子了。接下来,我们需要在前端加一些指示语,指示您是何许颜色。像那种。

图片 3

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 + "你是白色";
        }
    }

总结

咱俩又往前走了一步。这三回重大都是有的效能的通盘呢。前面咱们对一些功力继续完善。
源代码下载地址

总结

大家已经简单实现了一个有房间的体系。代码。接下来我们会对内外的交互举行一个多少格式的优化,方便未来新功效的恢弘。

发表评论

电子邮件地址不会被公开。 必填项已用*标注