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

总结

大家又往前走了一步。这几回重要都是一对效应的无微不至呢。前边大家对有的效益继续完善。
源代码下载地址

总结

俺们早已简单实现了一个有房间的系列。代码。接下来我们会对左右的交互举行一个数量格式的优化,方便以后新功用的扩大。

发表评论

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

网站地图xml地图