Question

我将结果附加到包装器以查看它是否正在获得正确的位置。它适用于玩家div (#redbox)。但是它不会更新最近的敌人div (.shd)位置。

此处的完整代码：http://jsfiddle.net/2bbW5/只需使用箭头键向下和向右移动，您就会看到它每次都打印相同的敌人位置，但每次都会正确打印新的玩家位置。

$('.gamewrapper').on('keydown', function (event) {
        var a = event.which;
        var b = parseInt($x.css('left'), 10);
        var c = parseInt($x.css('top'), 10);
        var player_position = $('#redbox').position();
        var enemy_position = $('#redbox').siblings().closest('.shd').position();
        $('<p> Player position is : ' + player_position.left + ' and ' + player_position.top + '</p>').appendTo('.gamewrapper');
        $('<p> Enemy position is : ' + enemy_position.left + ' and ' + enemy_position.top + '</p>').appendTo('.gamewrapper');

我做错了什么，因为它没有更新最近敌人div相对于#redbox的位置？

Answer 1

.closest()不会告诉您哪个兄弟物理最接近另一个元素。你需要自己计算一下。

这是一种方法，使用.each()来计算和存储每个敌人的距离，然后.filter()将兄弟姐妹的数量减少到最近的敌人：

    var player_position = $('#redbox').position();
    var closest_dist = Number.POSITIVE_INFINITY; // largest number in JavaScript
    var enemy_position = $('#redbox').siblings('.shd').each(function () {
        var epos = $(this).position();
        var dist = Math.sqrt(Math.pow(player_position.left - epos.left, 2) + Math.pow(player_position.top - epos.top, 2)); // basic distance formula
        $(this).data('dist', dist); // easier than building an array
        closest_dist = Math.min(closest_dist, dist); // update the closest_dist variable
    }).filter(function () {
        return $(this).data('dist') - closest_dist < 0.001; // allow for floating-point errors
    }).first().position(); // use .first() since there might be more than one

http://jsfiddle.net/ApY46/

在keydown获得最亲密的兄弟姐妹的位置

1 个答案: