Question

我正在编写一个HTML5棋盘游戏，我遇到了jQuery偏移（）的问题。构成游戏板的DIV网格位于包装器DIV中，该包装器具有设置溢出的CSS：滚动/宽度和高度：100％。游戏板本身相当大，因此滚动可以在水平和垂直方向上相当多。

问题在于，当我点击DIV并尝试将玩家移动到该棋盘时，玩家会转移并且相对于单击的棋盘片而言永远不会处于一致的位置。

代码：

$(".boardGridPiece").click(function(){
    if(!$(this).hasClass("room") && $(this).hasClass("eligibleMove")){
        playerStartX = $(this).offset().left;
        playerStartY = ($(this).offset().top;
        player.css("left", playerStartX);
        player.css("top", playerStartY);
        determineEligibleMoves($(this).attr("id"));
    }
});

您可以看到，当单击棋盘时，会抓住棋盘的偏移并将其设置为玩家的X和Y.

CSS：

#boardWrapper {
    position:relative;
    width:100%;
    height:80%;
    overflow: scroll;
}

#theGame {
    background-color: #fff;
    height: 1080px;
    width: 1920px;
}

根据玩家相对于当前滚动视图的位置，当我点击棋盘时，他会以非常不一致的方式移动。有时他离我点击或远远等的地方很远。

我做错了什么？如何考虑相对滚动位置以获得一致的定位？

Answer 1

这里有一块供你玩的板子作为例子。此外，我还包括了对jquery的刺激。基本上，它找到你点击的位置，以浮动形式计算px距离，并动画士兵滑动到他的新位置：

＆＃13;

var black = '<td style="background-color:black"><div class="boardGridPiece"></div></td>';
var white = '<td style="background-color:white"><div class="boardGridPiece"></div></td>';
var squares = [black, white];
var grid = "";
for (var i = 0; i < 9; i++) {
    grid += "<tr>";
    for (var j = 0; j < 16; j++) {
        grid += squares[(i + j) % 2];
    }
    grid += "<\tr>";
}
$('#gameboard').append(grid);
var gridSelected = $('#gameboard').find('tr:nth-child(2)').find('td:first').find('div');
gridSelected.toggleClass('position');

$('.boardGridPiece').click(function () {
    $('.position').removeClass('position');
    var gridSelected = $(this);
    gridSelected.toggleClass('position');
    var thisBox = $('.position');
    var finalX = 0;
    var finalY = 0;
    for (var i = 0; i < 9.00; i++) {
        for (var j = 0; j < 16.00; j++) {
            var aBox = $('#gameboard').find('tr:nth-child(' + (i + 1) + ')').find('td:nth-child(' + (j + 1) + ')').find('div');
            if (thisBox.get(0) == aBox.get(0)) {
                finalX = j + 1;
                finalY = i;
                i = j = 16; // soft break
            }
        }
    }
    var overX = (finalX * parseFloat(1920))/16.00;
    var downY = (finalY * parseFloat(1080))/9.00;
    $('#player').animate({ left: overX, top: downY });});

＆＃13;

html {
    background-color:gray;
}
#gameboard {
    margin: 100px;
    height:1080px;
    width:1920px;
    border:1px solid black;
}

.boardGridPiece {
    height: 110px;
    width: 110px;
}

.position {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 1px solid red;
}

#player {
    position: absolute;
    top: 120px;
    left: 125px;
    height: 200px;
    width: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="gameboard" style=""></table>
<img id="player" src="http://img2.wikia.nocookie.net/__cb20110819034426/halo/images/7/74/ODST_Helljumper.png" />

＆＃13;

div溢出的jQuery偏移问题：滚动

1 个答案: