依照HTML5+WebSocket+JAVA的棋牌游戏开发,从入门到丢弃(四)mg4355线路检测手机版

前言

周末跟妹纸玩这些游乐,发现了多少个问题

  • 当页面存在滚动条时,下棋的岗位不得法。
  • 有时会存在这样一个处境,下了一个子事后依然轮到你

介绍

思考

  • 应该是因为存在滚动条时,调用event.clientX|event.clientY的时候得到的坐标是眼下页面的坐标,需要转为全局的。
  • 这是个相比较好奇的题材,一起首认为是丢包问题造成的,一直找不到原因,后来通过调节,发现只要爆发双击事件时,会一连发送两条下棋的音信,因为后端没有做校验,所以总体回到给前端。

一度发起了离职流程,工作交接的闲暇时间,来搞点工作呢。博主的程度属于菜逼型,html,js,java勉强会写一点点,websocket也仅知道是个长接连,尽管您连这些都不了解。提出先活动补习一下。
接下来讲我们要做什么样东西吗,就是一个五指棋游戏,然后有个客厅,可以去开房,然后就足以跟棋友啪啪啪下棋了。看起来好像很粗略,但大家仍然从更简便的初叶吧。

实现

俺们能够拿走滚动条的职务,将眼前的坐标转化为一个大局的坐标。

    function getAbsoluteX(x){
        var l = document.body.scrollLeft;
        return parseInt((x + l - 20) / 40);
    }

    function getAbsoluteY(y){
        var h = document.body.scrollTop;
        return parseInt((y + h - 20) / 40);
    }

第二个问题,大家在Room类里面扩张一个模式,Room#vaildAction(action)用来判断一个操作是否合法。同时,我们在劳动器端也加进一个数组来记录当前的棋盘。对于一个博弈的操作,我们会去看清:

  • 水彩是否科学(与上一个颜料不等同)
  • 下的地点是不是业已被下过了

 @Override
    public boolean vaildAction(Action action){
        if (action instanceof ChessAction){
            if (lastChessAction != null && ((ChessAction) action).getColor().equals(lastChessAction.getColor())){
                return false;
            }
            if (chessBoard[((ChessAction) action).getX()][((ChessAction) action).getY()] != 0){
                return false;
            }
            chessBoard[((ChessAction) action).getX()][((ChessAction) action).getY()] = ((ChessAction) action).getColor().equals("Black") ? -1 : 1;
            return true;
        }
        return false;
    }

我们增了一个日志类,slf4j,那么些一言以蔽之就是一个日志类的API,通过这么些我们接纳log4j打日志。引入maven包:

    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-api</artifactId>
        <version>1.6.1</version>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-log4j12</artifactId>
        <version>1.7.5</version>
    </dependency>

而且在resources目录下扩展,log4j.properties的配备。具体的安排可以Google下,这一个日志类的效益依然相比较多的。

正文
第一期的目的我们是搭建一个webSocket的服务器,然后做一个大概的五指棋,然后连接上去的几人就可以先导下棋啦。也不考虑各样bug啦。

总结

一个很小游戏竟然出了这么多坑,仍旧有无数到手的。前面的话会大增部分新的功用,例如悔棋|重新开头|准备等。

后端代码
第一是搭建一个webSocket的服务器,网上广大都是spring+WebSocket的,不过不用spring框架也是ok的。
这边提供一个大概的demo吧。(请等自身上传,哈哈哈)。点声明进去可以发现有的可选的参数,反正我们今天也不用。

@ServerEndpoint("/websocket")
public class WebSocketTest {

    @OnMessage
    public void onMessage(String message, Session session) 
        throws IOException, InterruptedException {
        //收到客户端消息
        session.getBasicRemote().sendText("hello");
    }

    @OnOpen
    public void onOpen () {
        //有一个客户端链接
        System.out.println("Client connected");
    }

    @OnClose
    public void onClose () {
        //有一个客户端断开
        System.out.println("Connection closed");
    }
}

然后需要汤姆(Tom)cat启动。
这么一个webSocket的服务器就搭建完了,然后我们就来兑现五指棋的逻辑咯。后端的逻辑分为两有的,第一是等待连接(没五个人下何以棋呢),第二步是客户端起来下棋,举行播报。

先是有些

代码相比较简单的,(因为并从未展开详尽的设计,所此前后相互的多寡格式也是比较扯淡的,后边会做的可比好,暂时就如此吧,以json的格式).数据封装成一个Action,然后传给前端。

    Set<Session> session_list =null;
    session_list =session.getOpenSessions();
    if (session_list.size() == 2){
       System.out.println("Ready Start Game");
        //first
        Session session1 = (Session)session_list.toArray()[0];
        StartAction startAction1 = new StartAction();
        startAction1.setDetail("Black");
        session1.getBasicRemote().sendText(new Gson().toJson(startAction1));

        //second
        Session session2 = (Session)session_list.toArray()[1];
        StartAction startAction2 = new StartAction();
        startAction2.setDetail("White");
        session2.getBasicRemote().sendText(new Gson().toJson(startAction2));
    }

第二局部:第二局部的逻辑相比较简单,接收到某一方下棋的一声令下,举行下棋,然后广播拥有的链接,跟他们说,这厮下了个棋啦。

  ChessAction chessAction = new Gson().fromJson(content, ChessAction.class);
  chessAction.setCode("Chess");
  for (Session each : session_list){
          each.getBasicRemote().sendText(new Gson().toJson(chessAction));
  }

此处需要留意的是,最原始的版本大家是不在服务端保存棋盘的。所以是存在一定问题的,后边再搞一搞咯。

前端代码
前端代码是网上扒一个单机的本子举办改造的,重点讲几局部吗。创制一个webSocket的链接

    host = document.location.host;
    host = "ws://" + host + "/chess";
    var webSocket = new WebSocket(host);

采用服务端音信

   webSocket.onmessage = function(event) {
          onMessage(event)
      };

   function onMessage(event){
       var action = JSON.parse(event.data);
       if (action.code == "Start"){
           startGame(action);
       }else if (action.code == "Chess"){
           recieveChessMsg(action);
       }
   }

发送消息

   function sendChessMsg(color, x, y){
          var chessAction = new Object();
          chessAction.color = color;
          chessAction.x = x;
          chessAction.y = y;
          var chessInfoStr = JSON.stringify(chessAction);
          webSocket.send("chess" + chessInfoStr);
   }

此外的画布呀,画一个五指棋出来咋样的,我们网上扒一扒就行,或者直接下载源码就ok了。

总结
第一期我们就大概地搭建了一个简约的在线五指棋。当然这中档存在非凡多的题目,例如:没有房间呀,链接数超过3个人有题目啊,下到一半刷新的题材呀,服务器并未校验操作,数据交互等等等。。。
没事,前边大家再持续。
第一期的代码等下上次,里面有一对代码因为是从其它地方扒的,没什么卵用,但也绝非去除,将就吧。

发表评论

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

网站地图xml地图