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

Javascript Moving an Image left to right random number

本文关键字：右移 移动 随机数 图像 Javascript      更新时间：2023-09-26

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

这是我的代码：

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爆炸。

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

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

目前，您正在将其设置为每个间隔"25px"。

试试这个：

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">

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

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

未经测试但应该有效。

这适用于

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

给你JsFiddlehttp://jsfiddle.net/5poa7tnt/10/

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

编辑：看起来类似于Oriol的后思考

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

相关文章：