Question

我正在制作一个简单的网页游戏，可以使用箭头键在页面周围移动div，目的是将其与另一个div相撞。然后将第二个div随机放置在页面上的其他位置。我的问题是，如何更改以下代码以重新定位第二个div apon碰撞？

我有代码在单击div时执行此操作

$('#test').click(function() {
  var docHeight = $(document).height(),
    docWidth = $(document).width(),
    $div = $('#test'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

$div.css({
    left: Math.floor( Math.random() * widthMax ),
    top: Math.floor( Math.random() * heightMax )
});
});

我希望在jquery，js或angular中执行此操作。任何帮助表示赞赏。

Answer 1

也许像https://api.jquery.com/offset/：

$('moving_div').click(function(){ // or the action you make the div move

    if ( $('#moving').offset().left == $('#target').offset().left && $('#moving').offset().top == $('#target').offset().top ) {
        $('target_div').css({
          left: Math.floor( Math.random() * widthMax ),
          top: Math.floor( Math.random() * heightMax )
        });
    }

});

像这样：http://jsfiddle.net/7seqdp3b/

当动画div跨越坐标时，随机重新放置div元素

1 个答案: