基于HTML5+WebSocket+JAVA的棋牌游戏开发,从入门到放任(三)

前言

事先我们早就到位了一个有房间的五指棋游戏,现在我们将更为来宏观那么些东西。这一次大家打算新增的成效有:

  • 事先我们扩张了屋子,但并没有限定房间只好进入2个人
  • 日增一个护理线程,总计当前房间的数码,前面我们将继续周到这一个守护线程的功用。
  • 来得上一个棋子落在哪个地方
  • 距离房间后会缩小房间的人数,并回收房间

前言

后面大家曾经落实了一个简易的五指棋,但问题特别多。这一篇,我们要化解的问题有

  • 新增房间
  • 前者给出一些擢升,告诉你所属的水彩,是否是你的回合

思考

率先个功效应该是暴发在建立连接的时候,如若房间里抢先2人,则赶回前端一个荒唐。
其次个我们需要创建一个新的线程。
其两个是一个纯粹的前端开发工作,大家得以激增三个图片,并每一趟标记上五次的职位,当下一个子的时候,画一个异样的子,并用一张normal的子覆盖上一个子。
第多个是爆发在断开连接的时候。

思考

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

  1. 进入房间(需要处理是否进入?)
  2. 播音(进入房间后,房间里每个人的动作只要跟这多少个屋子内部的人说就行了)
  3. 脱离房间

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

实现

mg4355线路检测手机版,率先个职能。

    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一张图,现在的成为这样了。。。

mg4355线路检测手机版 1

打闹界面

实现

我们来探视前端的贯彻,我们需要在一方始弹出一个框,告诉用户,输入一个房间号。(即使很挫,不过很容易实现)

mg4355线路检测手机版 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));

由来,大家着力实现了一个简短的房间了。接下来,大家需要在前者加一些指示语,提醒您是什么颜色。像这种。

mg4355线路检测手机版 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地图