基于HTML5+WebSocket+JAVA的棋牌游戏开发，从入门到放弃（四）

前言

周末跟妹纸玩这个游戏，发现了两个问题

• 当页面存在滚动条时，下棋的位置不正确。
• 有时候会存在这么一个情况，下了一个子之后还是轮到你

思考

• 应该是因为存在滚动条时，调用event.clientX|event.clientY的时候获取的坐标是当前页面的坐标，需要转为全局的。
• 这是个比较诡异的问题，一开始以为是丢包问题造成的，一直找不到原因，后来通过调试，发现如果发生双击事件时，会连续发送两条下棋的信息，因为后端没有做校验，所以全部返回给前端。

实现

我们可以获取滚动条的位置，将当前的坐标转化为一个全局的坐标。

    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包：

    
        org.slf4j
        slf4j-api
        1.6.1
    
    
        org.slf4j
        slf4j-log4j12
        1.7.5
    

并且在resources目录下增加,log4j.properties的配置。具体的配置可以谷歌下，这个日志类的功能还是比较多的。

总结

一个小小的游戏竟然出了这么多坑，还是有不少收获的。后面的话会增加一些新的功能，例如悔棋|重新开始|准备等。