Alex Imperiale Alex Imperiale - 1 month ago 28
HTML Question

How to move two different images across the screen using JavaScript

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

Try this one:

function myMove() 
{
  var elemBluefish = document.getElementById("bluefish");
  var elemTurtle = document.getElementById("turtle");
  
  var posBluefish = 0;
  var posTurtle = 0;
  
  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;
      }
      elemBluefish.style.left = posBluefish + 'px';
    }

    if(posTurtle < 350)
    {
      posTurtle += Math.round(Math.random()*10);
      if(posTurtle > 350)
      {
        posTurtle = 350;
      }
      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;
  }

  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>

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.