澳门新葡亰娱乐在线基于HTML5+WebSocket+JAVA的棋牌游

2019-10-30 02:25 来源:未知

实现

先放一张效果图

Paste_Image.png

是不是感觉比之前的好看多了,感觉就很高大上,如果是大学的毕业设计,一下子从C变成了A+,老师们都喜欢好看的...

我们来看下css的代码(后端猴子最讨厌了)

body {
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    background: url(..g.jpg) repeat scroll 0% 0% transparent;
    margin: 0;
    position: relative;
}
.game-box {
    width: 640px;
    margin: 0 auto;
    position: relative;
}
.btn-box {
    padding-left:45px;
}
.btn-box a {
    background: url(..tn-bg1.png) center 0 no-repeat;
    height: 75px;
    width: 205px;
    cursor: pointer;
    margin:0 30px;
    display:block;
    font: normal 22px/70px "微软雅黑";
    float:left;
    color: #480e00;
    text-decoration: none;
}

body是背景,game-box是画布,btn-box是下面的按钮。这里面的几个参数还是比较熟悉的,如果有哪些字段不知道什么意思,可以在w3c 上面查一查。这里面比较“神奇”的就是game-box里面的margin了,通过auto自适应,可以居中。但是随即我们就发现了一个问题,当我们发生monseDown的时候,获取的坐标是页面里面的坐标,我们如何转化为画布的坐标呢?
很明显我们需要获取

Paste_Image.png

这么一个位置,这个东西纠结了好久,一直不知道怎么搞,一直找不到现成的方法(前端弱鸡)。后来阅读别人的代码中获取到这么一种思路,逐层往外递增。

    function getDomXY(a) {
        for (var b = a.offsetLeft,
                     c = a.offsetTop,
                     d = a.offsetParent; null !== d;) b += d.offsetLeft,
                c += d.offsetTop,
                d = d.offsetParent;
        return {
            x: b,
            y: c
        }
    }

在前端中,offsetParent顾名思义,就是获取这个对象的父对象。
好了,添加了这些,我们其实已经把前端变得“高大上”了。这一部分都是纯粹的前端改动,后台并不需要进行任何处理。
接下来我们来考虑增加准备这么一个功能。
前端非常简单,我们只要添加一个按钮,还有对应的js代码

    <div class = "btn-box"><a onclick="sendReadyMsg()">准备好了</a></div>

    function sendReadyMsg(){
        if (isReady == false){
            webSocket.send("ready");
        }
        isReady = true;
    }

但是对于后端,我们发现我们原来的简单后端模型支持不了。于是我们需要进行改造,首先,我们需要一个上下文对象来存用户的状态。现在我们只用来保存用户的准备状态。

  public class UserContext {
        private Session session;

        public UserContext(Session session){
            this.session = session;
        }

        /**
         * 游戏状态
         */
        private @Getter @Setter int gameStatus;
        public interface GAME_STATUS {int PENDING  = 0; int READY = 1; int RUNNING = 2;}

        /**
         * 是否准备完成
         */
        public boolean isReady(){
            return gameStatus == GAME_STATUS.READY;
        }
    }

然后以前room中存用户的set<Session>变成map<Session, UserContext>.我们来整理一下整个准备动作的流程。

Paste_Image.png

简书的markdown不支持流程图真是太不方便了....
按照这个流程图,我们只要修改对应的方法即可。非常简单,就不贴代码出来了。

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

总结

再一次回到刚才我们提到的问题,就是用户、规则、房间等类之间的关系。这一部分是需要后面好好好好考虑的。虽然现在我也做好了一些抽象,但是可能之前没做过相关的东西,我想还是先继续添加一些功能,然后看看之前的模型是否适用。
源代码下载地址
以往没有任何做游戏的经验,如果大家有什么批评指正,欢迎大家评论指教。

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

思考

对于一个前端只会写js的人,其实来搞前端样式还是有困难的。但是,我们可以“借鉴”呀。
至此之前,后端只要考虑有没有这个玩家,现在我们要考虑这个玩家的状态。很明显,我们需要一个context的上下文对象来保存这个状态。在这个过程中,开发得其实很蹩脚。有这么几种关系,棋盘、规则、房间、玩家等,这部分需要去做合理地抽象,我希望未来这个后台是可以通配各种棋牌游戏的,如果我们今天想玩麻将了,我们只要写前端代码,还有写麻将的规则即可。

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

前言

最近有些突发的事情,在飞机上写了点代码,先把它们更新上来吧。毕竟这个文章是做这个东西的一个心路历程,可能有些东西讲得并不是很明白。大家可以自己查下资料或者在下面留言。这段时间,我主要是做了一些前端的的样式以及“准备”这个功能的开发,这个功能主要是为后续的重新开始游戏等功能的准备。

 function changeTip(){ if (myTurn == true){ document.getElementById.innerHTML = "这是你的回合"; }else{ document.getElementById.innerHTML = "等待对方下棋"; } } function changeHead(){ if (myTurn == false){ document.getElementById.innerHTML = "你的房间号为" + roomId + "你是黑色"; }else{ document.getElementById.innerHTML = "你的房间号为" + roomId + "你是白色"; } }

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

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

String content = message.substring;ChessAction chessAction = new Gson().fromJson(content, ChessAction.class);chessAction.setCode;Room room = roomMap.get;room.broadcast(new Gson().toJson(chessAction));
if (roomMap.containsKey{//已经存在这个房间 Room room = roomMap.get; if (room.enterRoom{ session.getUserProperties().put("roomId", roomId); }else{ session.getBasicRemote().sendText; }}else{//新建一个房间 Room room = new ChessRoom(roomId, 2); room.enterRoom; roomMap.put(roomId, room); session.getUserProperties().put("roomId", roomId);}
 var roomId = prompt("请输入房间号", ""); //房间号 host = document.location.host; host = "ws://" + host + "/chess?roomId=" + roomId; var webSocket = new WebSocket;
  • 新增房间
  • 前端给出一些提示,告诉你所属的颜色,是否是你的回合

澳门新葡亰娱乐在线 1Paste_Image.png

澳门新葡亰娱乐在线 2Paste_Image.png

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

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

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

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

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

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

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

TAG标签:
版权声明:本文由澳门新葡亰娱乐在线发布于葡亰_棋牌,转载请注明出处:澳门新葡亰娱乐在线基于HTML5+WebSocket+JAVA的棋牌游