1

我目前正在用 javascript 编写一个简单的游戏。游戏发生在一个div名为#box的地方。敌人是一个div叫做#enemy。

       <div id="box">
                <div id="prepend">
                    <div id="hero"></div>
                </div>
                <div id="enemy"></div>
       </div>

在这个#box 内，#enemy 将使用setInterval()生成随机数的函数（动画到 x，y）四处移动。但是，当我这样做时，不知何故，坐标开始的原点位于窗口的左上角，而它应该位于#box的左上角。这就是我一直在尝试生成随机数以将#enemy保持在#box内的方式

var test = Math.floor(Math.random() * (1500 - $("#box").offset().left) + 0),
    test2 = Math.floor(Math.random() * (750 - $("#box").offset().top) + 0);

但我显然遇到的问题是它一直在#box之外设置动画。

CSS：

    #box{
    width:640px;
    height:400px;
    float: left;
    background:url(../png/space.jpg);
    margin: 0 0 0 100px;
    }   
    #enemy {
    width: 69px;
    height: 50px;
    position: absolute;
    margin: 100px 0 0 100px;
    background:url(../png/target2.png);
    z-index:2;
}
4

4 回答 4

2

容器 div 需要有position: relative. 否则窗口的位置，或最近的具有relative位置的父元素将用于确定内部div的位置。通过使父级具有相对位置，子级将相对于其父级而不是相对于窗口div定位自身。

于 2013-04-16T14:19:53.977 回答
0

添加position: relative;到#box 以使#enemy 位置相对于#box。

于 2013-04-16T14:20:28.417 回答
0

要使#boxes 子级相对于它定位，您可以根据您的要求使用以下任何一种：

#box { position: absolute; }
#box { position: relative; }
#box { position: fixed; }
于 2013-04-16T14:22:09.233 回答
0

你需要：

position: relative;

在你的#boxCSS中，你的绝对位置#enemy是相对于盒子的。

于 2013-04-16T14:19:00.600 回答