Javascript左右移动图像的随机数

Question

我必须在屏幕的左侧开始有两个图像，然后移到右侧并停止。 它就像一场比赛，无论谁先获得右边的胜利。 我为此生成一个随机数，图像仅向右移动一次。 我无法弄清楚为什么它们只移动一次，并且不知道如何使它们停在右侧。

这是我的代码：

 var myVar1 = setInterval(fly, 250); function fly() { var ranNum = Math.floor(Math.random()*2); if(ranNum == 0){ document.getElementById("race").style.left = '25px'; } else if (ranNum == 1){ document.getElementById("race1").style.left = "25px"; } } 

 body { background-image: url(images/stars.jpg); } .img1 { position: absolute; bottom: 0px; left: 0px; } .img2 { position: absolute; bottom: 200px; left: 0px; } .img3 { position: absolute; top: 0px; right: 0px; } 

 <img src="images/tie.png" class="img1" id="race" alt="tie"></br> <img src="images/xwing.png" class="img2" id="race1" alt="xwing"> <img src="images/death.png" class="img3" alt="dstar"> 

第三张图片（death.png，又名死亡之星），单击它会更改颜色并启动“种族”，为此我将使用onClick方法，对吗？ 因此，一旦平局战斗机或X机翼到达右侧的“终点线”，两个图像均停止，因此我们将有一个赢家。 同样，如果X翼获胜，我将把dstar更改为dstar。

Answer 1

您需要增加值才能使其移动。

var leftIncrement = parseInt(document.getElementById("race").style.left) + ranNum + "px";
document.getElementById("race").style.left = leftIncrement;

目前，您将每个间隔设置为“ 25px”。

Answer 2

尝试这个：

var els = [document.getElementById("race"), document.getElementById("race1")],
    timer = setInterval(fly, 250);
function fly() {
  var el = els[Math.floor(Math.random()*2)],
      newPos = (parseInt(el.style.left) || 0) + 1;
  el.style.left = newPos + 'px';
  if(newPos == 25) {
    clearInterval(timer);
    el.classList.add('winner');
  }
}

 var els = [document.getElementById("race"), document.getElementById("race1")], timer = setInterval(fly, 250); function fly() { var el = els[Math.floor(Math.random()*2)], newPos = (parseInt(el.style.left) || 0) + 1; el.style.left = newPos + 'px'; if(newPos == 25) { clearInterval(timer); el.classList.add('winner'); } } 

 body { background-image: url(images/stars.jpg); } .img1 { position: absolute; bottom: 0px; left: 0px; } .img2 { position: absolute; bottom: 200px; left: 0px; } .img3 { position: absolute; top: 0px; right: 0px; } .winner { outline: 3px solid #0f0; } 

 <img src="images/tie.png" class="img1" id="race" alt="tie"></br> <img src="images/xwing.png" class="img2" id="race1" alt="xwing"> <img src="images/death.png" class="img3" alt="dstar"> 

Answer 3

这是因为不管您生成什么随机数，始终会为您分配25px的左样式值。

var left = document.getElementById("race").style.left;
left = left.replace('px','');
left += parseInt(left) + 25;
document.getElementById("race").style.left = left + "px";

未经测试，但应该可以。

Answer 4

这有效

var racers   = [ document.getElementById("race"), document.getElementById("race1") ];
var interval = setInterval( fly, 250 );

function fly() {
    var racer  = racers[ Math.floor(Math.random() * racers.length) ];
    var newPos = parseInt( racer.style.left || 0 ) + 25;
    racer.style.left = newPos + "px";
    if( (newPos + racer.clientWidth) >= window.innerWidth){
        clearInterval( interval );
        alert( "And the winner is " + racer.id );
    }    
}

在这里，您可以通过JsFiddle获得它http://jsfiddle.net/5poa7tnt/10/

询问是否需要帮助以了解

编辑：看起来类似于Oriol的帖子思想

编辑2：比赛是最美丽的一步的“ 1”而不是“ 25”和间隔“ 5”或“ 10”而不是250 ..我不知道你想要什么最终结果