Javascript 在作用域之间传输变量值

我已经厌倦了思考这个问题。好的，有一个可拖动的蓝色盒子，；如果它接触到红色框，红色框会突然随机改变位置。我知道，我把所有的密码都弄混了；我对这个编码部分太笨了。但我无法理解这些错误。我需要一个了解我这种情况的人

Jquery部分

$(document).ready(function() {
var kol = 253;
var score = 0;
var redBoxWidth = $('#redBox').width();
var redBoxHeight = $('#redBox').height();
var redT = $('#redBox').position().top;
var redL = $('#redBox').position().left;
var redBox = $(".redBox");

var blueCoordinates = function(element1) {
    var top;
    var left;
    var blueBoxWidth = $('#blueBox').width();
    var blueBoxHeight = $('#blueBox').height();
    element1 = $(element1);
    top = element1.position().top;
    left = element1.position().left;

    $('#results').text('X: ' + left + ' ' + 'Y: ' + top);
    $('#results3').text('redL: ' + redL + 'redX: ' + redT);
    setTimeout(function() {
        if ((top > (redX) && left > (redY))) {
            setTimeout(function() {
                $('#results2').text(top + "  " + redX + "  " + redY + "  " + redBoxHeight + "   " + redBoxWidth);
            });
            redX = (Math.random() * ($('#canvas').width() - redBoxWidth)).toFixed();
            redY = (Math.random() * ($('#canvas').height() - redBoxHeight)).toFixed();
            redBox.css({
                'position': 'absolute',
                'left': redX + 'px',
                'top': redY + 'px'

            });


        }
        blueCoordinates();
    });
}

$('#blueBox').draggable({
    drag: function() {
        blueCoordinates('#blueBox');
    }
});

})

HTML部分

<div id="canvas">
<div id="blueBox"></div>
<div id="redBox" class="redBox"></div>
</div>
<div id="results" class="results"></div>
<div id="results1" class="results"></div>
<div id="results2" class="results"></div>
<div id="results3" class="results"></div>

---

我唯一需要的是将redX和redY的值传输到redT和redL

 if ((top > (redX) && left > (redY))) {
        setTimeout(function() {
            $('#results2').text(top + "  " + redX + "  " + redY + "  " + redBoxHeight + "   " + redBoxWidth);
        });
        redX = (Math.random() * ($('#canvas').width() - redBoxWidth)).toFixed();
        redY = (Math.random() * ($('#canvas').height() - redBoxHeight)).toFixed();
      redT=redY;
      redL=redX;
        redBox.css({
            'position': 'absolute',
            'left': redX + 'px',
            'top': redY + 'px'

        });

---

到底是什么问题？它根本没有按我想要的方式工作。红盒的位置稳定，我无法更改。

 if ((top > (redX) && left > (redY))) {
        setTimeout(function() {
            $('#results2').text(top + "  " + redX + "  " + redY + "  " + redBoxHeight + "   " + redBoxWidth);
        });
        redX = (Math.random() * ($('#canvas').width() - redBoxWidth)).toFixed();
        redY = (Math.random() * ($('#canvas').height() - redBoxHeight)).toFixed();
      redT=redY;
      redL=redX;
        redBox.css({
            'position': 'absolute',
            'left': redX + 'px',
            'top': redY + 'px'

        });