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;

目前，您将其设置为＆＃34; 25px＆＃34;每个时间间隔。

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 ..我不知道你想要的最终结果< / p>

Javascript从左到右移动图像随机数

4 个答案: