How to move two different images across the screen using JavaScript

Question

I have been challenged with a website that requires me to make two images race at random across the screen to a finish line. I am required to make this happen using JavaScript. Unfortunately I have ran into some trouble here making this happen.

I have the script that allows a div container and an object "animate" (which is a small square) to move across the screen to the right as I am supposed to do. My question comes into play when trying to do this to two different images.

The goal is to have the animation I have created to apply to the images, I cannot figure out how to apply the functions to the images already placed on the page to make it seem as if they are racing on random intervals across the page to the finish line.

I understand the concept of the animation and the JavaScript behind it, I just dont understand how to make it apply to an image, and more than 1 image at that.

Please advise.

Here is my code that I am using: you can see that I left my demo animation on the page, and the two images I am looking to apply it to.

function myMove() 
{
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() 
  {
    if (pos == 350) 
    {
      clearInterval(id);
    } 
    else 
    {
      pos++; 
      elem.style.left = pos + 'px'; 
    }
  }
}

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="yeildLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

<style>
  body {
    overflow: hidden;
  }

  #bluefish {
    position: absolute;
    top: 31pc;
    width: 17pc;
    left: -.5pc;
  }

  #turtle {
    position: absolute;
    width: 15pc;
    top: 20pc;
  }

  body {
    background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
  }

  .finishline {
    position: absolute;
    right: -12pc;
    top: 18pc;
  }

  #traffic-light {
    height: 10pc;
    width: 4pc;
    background-color: #333;
    border-radius: 20pc;
    position: absolute;
  }

  .bulb {
    height: 2pc;
    width: 2pc;
    background-color: #111;
    border-radius: 50%;
    margin: 15px auto;
    transition: background 500ms;
  }

  #container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
</div>

Answer 1

Try this one:

function myMove() 
{
  var elemBluefish = document.getElementById("bluefish");
  var elemBluefishWin = document.getElementById("bluefishwin");
  var elemTurtle = document.getElementById("turtle");
  var elemTurtleWin = document.getElementById("turtlewin");
  
  var posBluefish = 0;
  var posTurtle = 0;

  var hasWinner = false;
  elemBluefishWin.style.display = 'none';
  elemTurtleWin.style.display = 'none';
  
  var id = setInterval(frame, 5);
  function frame()
  {
    if(posBluefish >= 350 && posTurtle >= 350)
    {
      clearInterval(id);
      return;
    }

    if(posBluefish < 350)
    {
      posBluefish += Math.round(Math.random()*10);
      if(posBluefish >= 350)
      {
        posBluefish = 350;
        if(!hasWinner){
          hasWinner = true;
          elemBluefishWin.style.display = 'unset';
        }
      }
      elemBluefish.style.left = posBluefish + 'px';
    }

    if(posTurtle < 350)
    {
      posTurtle += Math.round(Math.random()*10);
      if(posTurtle >= 350)
      {
        posTurtle = 350;
        if(!hasWinner){
          hasWinner = true;
          elemTurtleWin.style.display = 'unset';
        }
      }
      elemTurtle.style.left = posTurtle + 'px';
    }
  }
}

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="yeildLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

<style>
  body {
    overflow: hidden;
  }

  #bluefish {
    position: absolute;
    top: 31pc;
    width: 17pc;
    left: -.5pc;
  }

  #turtle {
    position: absolute;
    width: 15pc;
    top: 20pc;
  }
  
  #bluefishwin {
    position: absolute;
    right: 1pc;
    top: 31pc;
    display: none;
  }
  
  #turtlewin {
    position: absolute;
    right: 1pc;
    top: 20pc;
    display: none;
  }

  body {
    background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
  }

  .finishline {
    position: absolute;
    right: -12pc;
    top: 18pc;
  }

  #traffic-light {
    height: 10pc;
    width: 4pc;
    background-color: #333;
    border-radius: 20pc;
    position: absolute;
  }

  .bulb {
    height: 2pc;
    width: 2pc;
    background-color: #111;
    border-radius: 50%;
    margin: 15px auto;
    transition: background 500ms;
  }

  /*#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }*/
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">

<p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
</div>

It gets an element for each image and adds every 5ms a random amount of pixels (between 0 and 9) to each pos of image. If both "racers" reached the target (350px) the interval is cleared and the race is over. The winner gets an image displayed at the finish line.

Answer 2

an example:

function startRace() {
  animateRacer("player1", true);
  animateRacer("player2", true);
}

function animateRacer(playerId, reset) {
  var elem = document.getElementById(playerId);
  var pos = parseInt(elem.style.left, 10);
  if (isNaN(pos) || reset) {
    pos = 0;
  }
  //console.log(playerId + ': ' + pos);

  if (pos < 450) {
    pos += randStep(3);
    elem.style.left = pos + 'px';
    setTimeout('animateRacer("' + playerId + '")', randStep(5));
  }
}

function randStep(max) {
  var min = 1;
  return Math.floor(Math.random() * (max - min)) + min;
}

body {
  overflow: hidden;
}

#container {
  width: 500px;
  height: 160px;
  position: relative;
  background-color: yellow;
}

.player {
  width: 50px;
  height: 50px;
  background-color: gray;
  position: relative;
}

#player1 {
  background-color: red;
  top: 20px;
}
#player2 {
  background-color: blue;
  top: 40px;
}

<p>
  <button onclick="startRace()">Start Race</button>
</p>

<div id="container">
  <div id="player1" class="player"></div>
  <div id="player2" class="player"></div>
</div>

Answer 3

function mover(obj) { 
this.obj=obj;
this.pos = 0; 
this.id = setInterval(this.frame, 5);   
} 
mover.prototype.frame=function() { 
 if (this.pos == 350) { 
clearInterval(this.id); 
} else { 
this.pos++; 
this.obj.style.left = this.pos + 'px'; 
} 
} 
}

Simply do:

img1=new mover(document.getElementById("pic1"));

You can repeat this with every image and you could store them into an array:

images=[]; 
function letsmove(){
images.push(new mover(someid));
...
}

And you can do this with all images on the site:

images=[]; 
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}

See JS OOP and JS Prototyping for more explanation