Javascript Moving an Image left to right random number

Question

I have to have two images start on the left side of the screen and move to the right side and stop. Its like a race and whoever get to the right side first wins. I am generating a random number for this just, the images only move to the right once. I cant figure out why they are only moving once, and dont know how I would get them to stop on the right side.

Here's my code:

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

The third image(death.png aka death star), when its clicked it changes color and starts the "race" which I would use the onClick method for that, right? So once either the tie fighter or x-wing reaches the "finish line" on the right side, both images stop so we will have a winner. Also if the x-wing wins, I am going to have the dstar change to a dstar blowing up.

Answer 1

You need to increment the values in order to get it to move.

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

At the moment you are setting it to "25px" every interval.

Answer 2

Try this:

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

It's because regardless of what random numbers you are generating, you are always assigned a left style value of 25px.

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

Untested but should work.

Answer 4

This works

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

Here you got it in a JsFiddle http://jsfiddle.net/5poa7tnt/10/

Ask if you need help to understand

Edit : Looks similar to Oriol's post thought

Edit 2 : The race is most beautiful the a step of "1" instead of "25" and an interval of "5" or "10" instead of 250 .. I don't know what final result you want