Javascript将图像从左向右随机移动

我必须有两个图像从屏幕左侧开始，然后移到右侧并停止。这就像一场比赛，谁先到右边谁就赢。我正在为这个生成一个随机数，图像只向右移动一次。我不明白他们为什么只移动一次，也不知道我该如何让他们停在右边

这是我的密码：

var myVar1=setInterval（fly，250）；
函数fly（）{
var ranNum=Math.floor（Math.random（）*2）；
如果（ranNum==0）{
document.getElementById（“race”）.style.left='25px'；
}else if（ranNum==1）{
document.getElementById（“race1”）.style.left=“25px”；
}
}

body{背景图片：url（images/stars.jpg）；}
.img1{
位置：绝对位置；
底部：0px；
左：0px；
}
.img2{
位置：绝对位置；
底部：200px；
左：0px；
}
.img3{
位置：绝对位置；
顶部：0px；
右：0px；
}

您需要增加值以使其移动

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

---

此时，您将每个间隔设置为“25px”。

这是因为无论您生成的是什么随机数，都会为您分配一个25px的左样式值

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

未经测试，但应能正常工作。

尝试以下方法：

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”），
定时器=设置间隔（飞行，250）；
函数fly（）{
var el=els[Math.floor（Math.random（）*2）]，
newPos=（parseInt（el.style.left）| | 0）+1；
el.style.left=newPos+'px'；
如果（newPos==25）{
清除间隔（计时器）；
el.classList.add（'winner'）；
}
}

body{背景图片：url（images/stars.jpg）；}
.img1{
位置：绝对位置；
底部：0px；
左：0px；
}
.img2{
位置：绝对位置；
底部：200px；
左：0px；
}
.img3{
位置：绝对位置；
顶部：0px；
右：0px；
}
.获胜者{
外形：3px实心#0f0；
}

这很有效

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 );
    }    
}

这是你用JSFIDLE得到的

询问你是否需要帮助来理解

编辑：看起来与Oriol的帖子想法相似

---

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

工作得很完美，但是每当我加载页面时，它就会启动，我需要它在我点击“images/death.png”时启动。我有这样一个图像：你需要在你点击死亡图像时，像这样在你的身体里放上“interval=setInterval（fly，250）”（没有“var”来获得一个globale变量）

并从前面的代码中删除如下内容：这在JSFIDLE中不起作用，但在实际文件中尝试时起作用。