Question

基本上，我正在制作自己的小游戏，但我遇到了问题。在“游戏”中你的屏幕中间有一个文字，通过点击心脏去它，心脏淡出，你得到分数，并在5秒钟内重生，等等。现在，我做了一个div所有这些都被称为“游戏区域”，我希望心脏留在它里面，我不希望它重叠或我不想隐藏它的一部分，我想完全在game_area div中。它产生的心脏坐标由Math.random（）设置，我在jQuery中完成所有这些。

$(document).click(function(e) {
    var x = e.pageX;
    y = e.pageY;
    $("#text").animate({
        marginTop: y,
        marginLeft: x
    }, 300);
});
$("#heart").click(function() {
    $("#heart").fadeOut(2000);
    var heart_pos = $("#heart").position();
    heart_top = heart_pos.top;
    heart_left = heart_pos.left;
    setTimeout(function() {
        $("#heart").css({
            marginTop: Math.random() * 500 - 117,
            marginLeft: Math.random() * 500 - 100
        });
    }, 4000);
    setTimeout(function() {
        $("#heart").fadeIn(2000)
    }, 5000)
    get_heartPos();
});

function set_heartPos() {
    var heart_pos = $("#heart").position();
    heart_top = heart_pos.top;
    heart_left = heart_pos.left;
    $("#heart").css({
        marginTop: Math.random() * 900 - 117,
        marginLeft: Math.random() * 500 - 100
    });
}
window.onload = set_heartPos();

function get_heartPos() {
    var heart_pos = $("#heart").position();
    heart_top = heart_pos.top;
    heart_left = heart_pos.left;
    setTimeout("get_heartPos()", 3000);
}
window.onload = get_heartPos();

HTML：

<html>
    <body>
        <div id="game_area">
            <div id="heart">

            </div>

            <div id="text">
                Text
            </div>
        </div>
    </body>

CSS：

#game_area {
    width: 950;
    border: 1px solid #000;
    margin: 0 auto;
}

#text {
    margin-top: 50%;
    margin-left: 50%;
    cursor: default;
}

#heart {
    display: block;
    width: 117px;
    height: 100px;
    border: 1px solid #000;
    background: url("heart.png") no-repeat 0 0;
    float: left;
}

::selection {
    background: rgba(255, 255, 255, 0);
    cursor: default;
}

停止重叠Math.random（）div

0 个答案: