Question

我正在尝试使用javascript进行比赛。我有两张图片从左侧开始。一旦用户点击go，它们就会以随机的方式向右移动。一旦他们到达右侧，他们就会停下来。我需要显示一个图像，指示哪个图像首先到达终点。我的比赛部分有效，但当他们到达终点时，获胜者的形象永远不会出现。谢谢你的帮助吗？

function move_img(str) 
{
    var x=document.getElementById('i1').offsetTop;
    x= x +100;
    document.getElementById('i1').style.top= x + "px";
}

function playerOne()
{
    var step = Math.random();
    var y1=document.getElementById('i1').offsetTop;
    var x1=document.getElementById('i1').offsetLeft;
    if(x1 < 500 ){x1= x1 +step;
        document.getElementById('i1').style.left= x1 + "px";
    }

    return x1;
}

function playerTwo()
{
    var step = Math.random();
    var y2=document.getElementById('i2').offsetTop;
    var x2=document.getElementById('i2').offsetLeft;
    if(x2 < 500 ){x2= x2 +step;
        document.getElementById('i2').style.left= x2 + "px";
    }

    return x2;
}

function timer()
{
    var x1 = 0;
    var x2 = 0;

    if ( (x1 < 500 && x2 < 500))
    {
        playerOne();
        playerTwo();
        var x=document.getElementById('i1').offsetLeft;
        var y=document.getElementById('i1').offsetTop;
        my_time=setTimeout('timer()',10);
        x1 = document.getElementById('i1').offsetLeft;
    } else if ( (x1 == 500 && x2 < 500))
    {
        function winnerPlayerOne()
        {
            var img = document.createElement('img');
            img.src = "/images/winner_ford.png";
            document.body.appendChild(img);
        }

    } else {
        function winnerPlayerTwo()
        {
        var img = document.createElement('img');
        img.src = "/images/winner_meis.png";
        document.body.appendChild(img);
        }
    }

}

Answer 1

我在你的代码中看到两个问题。

第一个是你假设一个特定的赢家在500保证金上着陆，同时通过随机数增加它的价值。

if ( (x1 == 500 && x2 < 500))

在上述情况下，x1，这里的胜利者，根据你的逻辑，可以超过500.

第二个问题是，假设您的逻辑以某种方式到达图像创建部分，您创建图像并将其添加到正文中。你永远不会说这些图像应该出现在哪里。

var img = document.createElement('img');
img.src = "/images/winner_ford.png";
document.body.appendChild(img);

上述代码很可能会创建一个图像，但在添加到正文时会潜入另一个绝对定位的元素。

Answer 2

对于那些后来发现这种情况的人来说，这就是我的工作方式：

HTML：

    <html>
        <head>
            <title>The Race for an A!</title>
            <link rel="stylesheet" type="text/css" href="race.css"> 
            <script type='text/JavaScript' src="race.js" language=javascript>
            </script>
        </head>

        <body>

            <h1 class = "amazing"> The Amazing Race For an A! </h1>

            <h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1>

            <div id="traffic-light">
            <div id="stopLight" class="bulb"></div>
            <div id="slowLight" class="bulb"></div>
            <div id="goLight" class="bulb"></div>
            </div>

            <input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;">

            <img src=images/teacher.jpg id='i1' style="position:absolute; left: 25; top: 325; z-index:2;" width ="100" >
                <br><br><br><br>
            <img src=images/meis.png id='i2' style="position:absolute; left: 25; top: 500; z-index:2;" width ="100">
            <img src=images/road.jpg id='road' style="position:absolute; left: 30; top: 325; z-index:1;" height = "133" width ="1180">
            <img src=images/road.jpg id='road' style="position:absolute; left: 30; top: 500; z-index:1;" height = "133" width ="1180">
            <img src=images/winner_ford.png id='image1' style="position:absolute; left: 5; top: 0; z-index:3;" width ="100%" height = "100%" onclick="reset()">
                <br><br><br><br>
            <img src=images/winner_meis.png id='image2' style="position:absolute; left: 5; top: 0; z-index:3;" width ="100%" height = "100%" onclick="reset()">

            <script>
                illuminateRed()
                hideImage()
            </script>

        <div class="vertical-line" />

        </body>
    </html>

JS：

<!--

function hideImage() 
{
    document.getElementById("image1").src = "images/winner_ford.png";
    document.getElementById("image2").src = "images/winner_meis.png";

    document.getElementById("image1").style.visibility = "hidden";
    document.getElementById("image2").style.visibility = "hidden";

}

function meis()
{
    document.getElementById("image2").style.visibility = "visible";
}

function ford()
{
    document.getElementById("image1").style.visibility = "visible";
}

function timer()
{
    var x1 = 0;
    var x2 = 0;
    var step1 = Math.random();
    var step2 = Math.random();
    var x1=document.getElementById('i1').offsetLeft;
    var x2=document.getElementById('i2').offsetLeft;

    if(x1 < 1100 && x2 < 1100)
    {
        x1 = x1 + step1;
        x2 = x2 + step2;

        document.getElementById('i1').style.left= x1 + "px";
        document.getElementById('i2').style.left= x2 + "px";

        setTimeout('timer()', 1);
    }else if ( x1 >= 1100 )
        {
            ford();
        }
        else if ( x2 >= 1100 )
        {
            meis()
        }
}

function illuminateRed()
    {
    clearLights();
    document.getElementById('stopLight').style.backgroundColor = "red";
    }

function illuminateGreen() {
    clearLights();
    document.getElementById('goLight').style.backgroundColor = "green";
    }

function clearLights() {
    document.getElementById('stopLight').style.backgroundColor = "black";
    document.getElementById('goLight').style.backgroundColor = "black";
    }

function reset()
{
    location.reload()
}

//-->

将图像显示为功能的一部分

2 个答案: