Question

我的javascript中的代码有问题。我想编辑代码来制作迷你游戏。

这是我尝试编辑的原始代码。这是关于弹跳球的。当你按下按钮时，球开始弹跳。球处于随机位置，每个球随机移动。当他们即将逃离边境时，他们正在返回。此代码中的所有内容都非常完美。 原始代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    #border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
    b {display:block; height:10px; width:10px; border-radius:5px; background:red; position:absolute}
    h1,div {text-align:center; margin:10px}
</style>
</head>
<body>

</body>

<h1>Balls</h1>
<div id='border'>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
</div>

<div>
    <button onclick="run=false"> Stop </button>
    <button onclick="run=true;start()"> Start </button>
</div>


<script>
        var b=document.getElementsByTagName('B');
        var run=false;
        var i;
        for(i=0;i<b.length;i++)
        {
            b[i].x=Math.random()*490;
            b[i].y=Math.random()*490;

            b[i].vx=Math.random()*20-10;
            b[i].vy=Math.random()*20-10;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

    function start()
    {
        var i;
        for(i=0;i<b.length;i++)
        {
            b[i].x+=b[i].vx;
            b[i].y+=b[i].vy;

            if(b[i].x>490 || b[i].x<0)  b[i].vx*=-1;
            if(b[i].y>490 || b[i].y<0)  b[i].vy*=-1;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

        if(run)
            setTimeout(start,20);

    }
</script>

</html>

我想用图像替换球。我想我做到了但它根本不起作用。 图像始终处于相同位置。当我按下按钮移动它们时，图像以相同的方向移动。图像从边界逃逸（它们应该在墙壁上反弹并返回）。 我的修改

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    #border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
    img {display:block; height:10px; width:10px; position:absolute}
    h1,div {text-align:center; margin:10px}
</style>
</head>
<body>

</body>

<h1>Balls</h1>
<div id='border'>
    <img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
    <img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
    <img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
</div>

<div>
    <button onclick="run=false"> Stop </button>
    <button onclick="run=true; start()"> Start </button>
</div>


<script>
        var b=document.getElementsByTagName('IMG');
        var run=false;
        var i;
        for(i=0; i<b.length; i++)
        {
            b[i].x=Math.random()*490;
            b[i].y=Math.random()*490;

            b[i].vx=Math.random()*20-10;
            b[i].vy=Math.random()*20-10;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

    function start()
    {
        var i;
        for(i=0; i<b.length; i++)
        {
            b[i].x+=b[i].vx;
            b[i].y+=b[i].vy;

            if(b[i].x>490 || b[i].x<0)  b[i].vx*=-1;
            if(b[i].y>490 || b[i].y<0)  b[i].vy*=-1;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

        if(run)
            setTimeout(start,20);

    }
</script>

</html>

我希望我的图像像原始代码中的球一样行为。你是我唯一的希望。

Answer 1

不使用<img>，而是使用

b {background-image: url("http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354");
background-repeat: no-repeat;
background-position: right top;}

Answer 2

代码未使用img代码的原因在documentation中列出：

HTMLImageElement.x 只读返回表示的长整数   距离最近层的水平偏移量。这个属性模仿旧的   Netscape 4的行为。

HTMLImageElement.y 只读返回一个长号   表示距离最近层的垂直偏移量。这个性质   模仿旧的Netscape 4行为。

作为解决方法，您可以在b代码上使用background-image或将坐标属性名称更改为currentX和currentY

在div游戏中弹出img

2 个答案: