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-wing 到达右侧的“终点线”，两个图像都会停止，因此我们将有一个赢家。此外，如果 x-wing 获胜，我将把 dstar 更改为 dstar 爆炸。

Answer 1

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

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

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